Bläddra i källkod

feat:细节调整

LAPTOP-U5GOA5HA\zz 1 år sedan
förälder
incheckning
afafd7e866

+ 3 - 3
app/src/views/Basic/components/Regional.vue

@@ -5,7 +5,7 @@
       <span class="count">区域</span>
       <span class="time">总数(栋)</span>
       <span class="unit">有物联网(栋)</span>
-      <span class="is_notice">占比%</span>
+      <span class="is_notice">占比</span>
     </div>
     <VueSeamlessScroll v-if="reload" :class-option="classOption" :data="dataList" class="warp">
       <ul class="item">
@@ -15,8 +15,8 @@
           <span class="type">{{ index + 1 }}</span>
           <span class="count">{{ item.qx }}</span>
           <span class="time">{{ item.zs }}</span>
-          <span class="unit">{{ item.jswlwsl || "-" }}</span>
-          <span class="is_notice">{{ item.zb || "-" }}</span>
+          <span class="unit">{{ item.jswlwsl || "0" }}(栋)</span>
+          <span class="is_notice">{{ item.zb || "0" }}%</span>
         </li>
       </ul>
     </VueSeamlessScroll>

+ 203 - 164
app/src/views/Basic/index.vue

@@ -1,177 +1,216 @@
 <template>
-	<div style="padding: 0px 35px; display: flex; justify-content: space-between; cursor: pointer;">
-		<div>
-			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计" @click="openBasicModal(1)">
-				<BuildNum :list="gcjztjList" :qy="qy" v-if="gcjztjList && gcjztjList.length > 0" />
-			</border-panel>
-			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计" @click="openBasicModal(2)">
-				<ChronologicDistributionStatistics :list="NdfbtjList" v-if="NdfbtjList && NdfbtjList.length > 0" />
-			</border-panel>
-			<border-panel height="310px" title="高度分布统计" @click="openBasicModal(3)">
-				<HeightDistribution :list="gdfbtjList" v-if="gdfbtjList && gdfbtjList.length > 0" />
-			</border-panel>
-		</div>
-		<div>
-			<div style="
+  <div
+    style="
+      padding: 0px 35px;
+      display: flex;
+      justify-content: space-between;
+      cursor: pointer;
+    "
+  >
+    <div>
+      <border-panel
+        height="310px"
+        style="margin-bottom: 6px"
+        title="高层建筑统计"
+        @click="openBasicModal(1)"
+      >
+        <BuildNum
+          :list="gcjztjList"
+          :qy="qy"
+          v-if="gcjztjList && gcjztjList.length > 0"
+        />
+      </border-panel>
+      <border-panel
+        height="320px"
+        style="margin-bottom: 6px"
+        title="年代分布统计"
+        @click="openBasicModal(2)"
+      >
+        <ChronologicDistributionStatistics
+          :list="NdfbtjList"
+          v-if="NdfbtjList && NdfbtjList.length > 0"
+        />
+      </border-panel>
+      <border-panel
+        height="310px"
+        title="高度分布统计"
+        @click="openBasicModal(3)"
+      >
+        <HeightDistribution
+          :list="gdfbtjList"
+          v-if="gdfbtjList && gdfbtjList.length > 0"
+        />
+      </border-panel>
+    </div>
+    <div>
+      <div
+        style="
           width: 900px;
           height: 1000px;
           position: relative;
           display: flex;
           padding-top: 150px;
-        ">
-				<MapCharts :formatter="showLabel" 
-				:mapHeatData="heatMap"
-				:qx="qy" @selectArea="area => qy = area" />
-				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
-					<SearchBox :area.sync="qy" />
-				</div>
-			</div>
-		</div>
-		<div>
-			<border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
-				<Regional :list="qyfbList" :qx="qy" v-if="qyfbList && qyfbList.length > 0" />
-			</border-panel>
-			<border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
-				<BuildingStatistics :list="jztjList" v-if="jztjList && jztjList.length > 0" />
-			</border-panel>
-		</div>
-		<basic-modal top="120px" ref="basicInfoModal" name="高层基础信息">
-			<jcxxCont :qy="qy" :flagVal="flagVal" />
-		</basic-modal>
-		
-	</div>
+        "
+      >
+        <MapCharts
+          :formatter="showLabel"
+          :mapHeatData="heatMap"
+          :qx="qy"
+          @selectArea="(area) => (qy = area)"
+        />
+        <div style="position: absolute; width: 500px; top: 10px; left: -20px">
+          <SearchBox :area.sync="qy" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
+        <Regional
+          :list="qyfbList"
+          :qx="qy"
+          v-if="qyfbList && qyfbList.length > 0"
+        />
+      </border-panel>
+      <border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
+        <BuildingStatistics
+          :list="jztjList"
+          v-if="jztjList && jztjList.length > 0"
+        />
+      </border-panel>
+    </div>
+    <basic-modal top="120px" ref="basicInfoModal" name="高层基础信息">
+      <jcxxCont :qy="qy" :flagVal="flagVal" />
+    </basic-modal>
+  </div>
 </template>
 <script>
-	import BuildNum from "./components/BuildNum.vue";
-	import Regional from "./components/Regional.vue";
-	import BuildingStatistics from "./components/BuildingStatistics.vue";
-	import HeightDistribution from "./components/HeightDistribution.vue";
-	import ChronologicDistributionStatistics from "./components/ChronologicDistributionStatistics.vue";
-	import MapCharts from "../Home/components/MapCharts.vue";
-	import SearchBox from "@/components/SearchBox.vue";
-	import jcxxCont from "./components/jcxxCont.vue";
+import BuildNum from "./components/BuildNum.vue";
+import Regional from "./components/Regional.vue";
+import BuildingStatistics from "./components/BuildingStatistics.vue";
+import HeightDistribution from "./components/HeightDistribution.vue";
+import ChronologicDistributionStatistics from "./components/ChronologicDistributionStatistics.vue";
+import MapCharts from "../Home/components/MapCharts.vue";
+import SearchBox from "@/components/SearchBox.vue";
+import jcxxCont from "./components/jcxxCont.vue";
 
-	import {
-		toFirst,
-		formatCityData,
-    createMapChartWindowInfo
-	} from '../../utils'
-	import {
-		getJztj,
-		getQyfbList,
-		getNdfbtj,
-		getGcjztj,
-		getGdfbtj,
-	} from "@/api/basicInfor.js";
-	export default {
-		name: "BasicPage",
-		components: {
-			BuildNum,
-			Regional,
-			BuildingStatistics,
-			HeightDistribution,
-			ChronologicDistributionStatistics,
-			MapCharts,
-			SearchBox,
-			jcxxCont,
-		
-		},
-		data() {
-			return {
-				qy: "重庆市",
-				params: {
-					pageSize: 100,
-					pageNum: 1,
-				},
-				jztjList: [],
-				qyfbList: [],
-				NdfbtjList: [],
-				gcjztjList: [],
-				gdfbtjList: [],
-				heatMap: [],
-				flagVal:1
-			};
-		},
-		watch: {
-			qy() {
-				this.getList();
-			},
-		},
-		methods: {
-			showLabel(params) {
-				return createMapChartWindowInfo({
-					title: params.name
-				}, () => `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`);
+import { toFirst, formatCityData, createMapChartWindowInfo } from "../../utils";
+import {
+  getJztj,
+  getQyfbList,
+  getNdfbtj,
+  getGcjztj,
+  getGdfbtj,
+} from "@/api/basicInfor.js";
+export default {
+  name: "BasicPage",
+  components: {
+    BuildNum,
+    Regional,
+    BuildingStatistics,
+    HeightDistribution,
+    ChronologicDistributionStatistics,
+    MapCharts,
+    SearchBox,
+    jcxxCont,
+  },
+  data() {
+    return {
+      qy: "重庆市",
+      params: {
+        pageSize: 100,
+        pageNum: 1,
       },
-			openBasicModal(val) {
-				this.flagVal=val
-				this.showModal("basicInfoModal");
-			},
-			getList() {
-				getJztj({
-					...this.params,
-					qx: this.qy === "重庆市" ? "" : this.qy
-				}).then(
-					(res) => {
-						this.jztjList = res.data.rows;
-					}
-				);
-				getQyfbList({
-					...this.params,
-				}).then((res) => {
-					const data = res.data.rows.map(item => ({
-						...item,
-						isActive: item.qx === this.qy
-					}));
-					this.qyfbList = toFirst(data, this.qy, 'qx')
-				});
-				getNdfbtj({
-					...this.params,
-					qx: this.qy === "重庆市" ? "" : this.qy,
-				}).then((res) => {
-					this.NdfbtjList = res.data.rows;
-				});
-				getGcjztj({
-					...this.params,
-					qx: this.qy === "重庆市" ? "" : this.qy,
-				}).then((res) => {
-					let lists=res.data.rows
-					if(lists.length>0){
-						const temp = {
-							jzdx:'高层建筑总数',
-								qx: this.qy,
-							sl: lists.reduce((a,b) => a + b.sl, 0)
-						}
-						lists.unshift(temp)
-					}
-					this.gcjztjList = lists
-
-				});
-				getGdfbtj({
-					...this.params,
-					pageSize: 1000,
-					qx: this.qy === "重庆市" ? "" : this.qy,
-				}).then((res) => {
-					this.gdfbtjList = res.data.rows;
-				});
-				getQyfbList({
-					pageSize: 1000,
-					pageNum: 1
-				}).then((res) => {
-					let lists=res.data.rows
-					this.heatMap = formatCityData(lists.map(item => ({
-						name: item.qx,
-						value: item.zs
-					})))
-					console.log(res.data.rows ,this.heatMap)
-				});
-			},
-		
-		},
-		created() {
-			this.getList();
-		},
-	};
+      jztjList: [],
+      qyfbList: [],
+      NdfbtjList: [],
+      gcjztjList: [],
+      gdfbtjList: [],
+      heatMap: [],
+      flagVal: 1,
+    };
+  },
+  watch: {
+    qy() {
+      this.getList();
+    },
+  },
+  methods: {
+    showLabel(params) {
+      return createMapChartWindowInfo(
+        {
+          title: params.name,
+        },
+        () =>
+          `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
+      );
+    },
+    openBasicModal(val) {
+      this.flagVal = val;
+      this.showModal("basicInfoModal");
+    },
+    getList() {
+      getJztj({
+        ...this.params,
+        qx: this.qy === "重庆市" ? "" : this.qy,
+      }).then((res) => {
+        this.jztjList = res.data.rows;
+      });
+      getQyfbList({
+        ...this.params,
+      }).then((res) => {
+        const data = res.data.rows.map((item) => ({
+          ...item,
+          isActive: item.qx === this.qy,
+        }));
+        this.qyfbList = toFirst(data, this.qy, "qx");
+      });
+      getNdfbtj({
+        ...this.params,
+        qx: this.qy === "重庆市" ? "" : this.qy,
+      }).then((res) => {
+        this.NdfbtjList = res.data.rows;
+      });
+      getGcjztj({
+        ...this.params,
+        qx: this.qy === "重庆市" ? "" : this.qy,
+      }).then((res) => {
+        let lists = res.data.rows;
+        if (lists.length > 0) {
+          const temp = {
+            jzdx: "高层建筑总数",
+            qx: this.qy,
+            sl: lists.reduce((a, b) => a + b.sl, 0),
+          };
+          lists.unshift(temp);
+        }
+        this.gcjztjList = lists;
+      });
+      getGdfbtj({
+        ...this.params,
+        pageSize: 1000,
+        qx: this.qy === "重庆市" ? "" : this.qy,
+      }).then((res) => {
+        this.gdfbtjList = res.data.rows;
+      });
+      getQyfbList({
+        pageSize: 1000,
+        pageNum: 1,
+      }).then((res) => {
+        let lists = res.data.rows;
+        this.heatMap = formatCityData(
+          lists.map((item) => ({
+            name: item.qx,
+            value: item.zs,
+          }))
+        );
+        console.log(res.data.rows, this.heatMap);
+      });
+    },
+  },
+  created() {
+    this.getList();
+  },
+};
 </script>
 
 <style scoped lang="less"></style>

+ 2 - 2
app/src/views/Risk/components/Investigation.vue

@@ -19,8 +19,8 @@
       <div >
         <div class="row header">
           <span class="time">排查指标</span>
-          <span class="person">正常数</span>
-          <span class="result">异常数</span>
+          <span class="person">正常数(个)</span>
+          <span class="result">异常数(个)</span>
         </div>
         <ul class="item">
             <li class="row" style="cursor: pointer;"  @click="ToFlage(checked)">

+ 2 - 2
app/src/views/Risk/components/RiskDanger.vue

@@ -131,9 +131,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 14px;
+    font-size: 16px;
     background-color: rgba(0, 0, 0, 0.2);
-    color: #44F1FF;
+    // color: #44F1FF;
     margin-top: 5px;
     .time,
     .type,