Merge branch 'master' into liuxing

app/src/api/h5.js

@@ -0,0 +1,26 @@
+import {
+	request
+} from '@zhgkpt/utils'
+/**
+ * 请求首页数据
+ * 
+ * @url /order/totaldata
+ * @method get
+ */
+// export function totaldata() {
+//   return request.get('/order/totaldata')
+// }
+/**
+ * 请求总览风险预警
+ * 
+ * @url /order/totaldata
+ * @method get
+ */
+//获取警情动态-报警信息列表
+export function getGcjzjcxx(params) {
+	return request({
+		url: '/system/gcjzjcxxcj/detail',
+		methods: 'get',
+		params
+	})
+}

app/src/assets/json/cq.json

@@ -6584,7 +6584,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500240,
-        "name": "石柱土家族自治县",
+        "name": "石柱县",
         "center": [108.112448, 29.99853],
         "centroid": [108.298494, 30.093676],
         "childrenNum": 0,
@@ -6831,7 +6831,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500241,
-        "name": "秀山土家族苗族自治县",
+        "name": "秀山县",
         "center": [108.996043, 28.444772],
         "centroid": [109.018121, 28.491722],
         "childrenNum": 0,
@@ -7021,7 +7021,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500242,
-        "name": "酉阳土家族苗族自治县",
+        "name": "酉阳县",
         "center": [108.767201, 28.839828],
         "centroid": [108.800321, 28.89987],
         "childrenNum": 0,
@@ -7296,7 +7296,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500243,
-        "name": "彭水苗族土家族自治县",
+        "name": "彭水县",
         "center": [108.166551, 29.293856],
         "centroid": [108.266309, 29.353956],
         "childrenNum": 0,
@@ -7523,4 +7523,4 @@
       }
     }
   ]
-}
+}

app/src/components/rate3D.vue

@@ -2,270 +2,269 @@
     <div class="chart-box">
         <div ref="chart" class="item" style="width: 96px; height:138px" />
     </div>
-  </template>
+</template>
   
-  <script>
-  import * as echarts from "echarts";
-  export default {
+<script>
+import * as echarts from "echarts";
+export default {
     props: {
         data: Number,
         text: String,
         title: String
     },
     data() {
-      return {
-        chart: null,
-      };
+        return {
+            chart: null,
+        };
     },
-    mounted() {
-      const chartDom = this.$refs.chart;
-      //   // 初始化图表实例
-      this.chart = echarts.init(chartDom);
-      this.initChart();
-      
-    },
-    methods: {
-      initChart() {
-      const  option = {
-    title: [{
-        text: this.title,
-        x: 'center',
-        top: '84%',
-        textStyle: {
-            color: '#fff',
-            fontSize:12,
-            // fontWeight: '100',
+    watch: {
+        data() {
+            this.initChart();
         }
-    }, {
-        text: this.text,
-        x: 'center',
-        top: '42%',
-        textStyle: {
-            fontSize: '12',
-            color: '#fdf914',
-            fontFamily: 'Lato',
-            // foontWeight: '600',
-        },
-    }],
-    polar: {
-        radius: ['74%', '53%'],
-        center: ['50%', '50%'],
-    },
-    angleAxis: {
-        max: 100,
-        show: false,
     },
-    radiusAxis: {
-        type: 'category',
-        show: true,
-        axisLabel: {
-            show: false,
-        },
-        axisLine: {
-            show: false,
-
-        },
-        axisTick: {
-            show: false
-        },
+    mounted() {
+        const chartDom = this.$refs.chart;
+        //   // 初始化图表实例
+        this.chart = echarts.init(chartDom);
+        this.initChart();
     },
-    series: [
-        {
-            name: '',
-            type: 'bar',
-            roundCap: true,
-            barWidth: 60,
-            showBackground: true,
-            backgroundStyle: {
-                color: 'rgba(66, 66, 66, .3)',
-            },
-            data: [this.data],
-            coordinateSystem: 'polar',
-            itemStyle: {
-                normal: {
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                        offset: 0,
-                        color: '#fdf914'
-                    }, {
-                        offset: 1,
-                        color: '#38a700'
-                    }]),
-                }
-            }
-        }, 
-        {
-            type: 'gauge',
-            name: '',
-            radius: '100%',
-            startAngle: '0',
-            endAngle: '-359.99',
-            splitNumber: '200',
-            center: ['50%', '50%'],
-            pointer: {
-                show: false
-            },
-            title: {
-                show: false
-            },
-            detail: {
-                show: false
-            },
-            data: [{
-                value: 95,
-                name: ''
-            }],
-            axisLine: {
-                lineStyle: {
-                    width: 20,
-                    opacity: 0
-                }
-            },
-            axisTick: {
-                show: false
-            },
-            splitLine: {
-                show: true,
-                length: 0,
-                lineStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 1,
-                        y: 0,
-                        x2: 0,
-                        y2: 0,
-                        colorStops: [{
-                            offset: 0,
-                            color: '#111'
-                        }, {
-                            offset: 0.5,
-                            color: 'rgba(66, 66, 66, 1)',
-                        }, {
-                            offset: 1,
-                            color: '#111'
-                        }],
-                        globalCoord: false
+    methods: {
+        initChart() {
+            const option = {
+                title: [{
+                    text: this.title,
+                    x: 'center',
+                    top: '84%',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                        // fontWeight: '100',
+                    }
+                }, {
+                    text: this.text,
+                    x: 'center',
+                    top: '42%',
+                    textStyle: {
+                        fontSize: '12',
+                        color: '#fdf914',
+                        fontFamily: 'Lato',
+                        // foontWeight: '600',
                     },
-                    width: 1,
-                    type: 'solid',
+                }],
+                polar: {
+                    radius: ['74%', '53%'],
+                    center: ['50%', '50%'],
                 },
-            },
-            axisLabel: {
-                show: false
-            }
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['100%', '82%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
+                angleAxis: {
+                    max: 100,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: 'category',
+                    show: true,
+                    axisLabel: {
+                        show: false,
                     },
-                    color: 'rgba(66, 66, 66, .4)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                    axisLine: {
+                        show: false,
 
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['62.5%', '64%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
+                    },
+                    axisTick: {
                         show: false
                     },
-                    color: 'rgba(66, 66, 66, .3)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                },
+                series: [
+                    {
+                        name: '',
+                        type: 'bar',
+                        roundCap: true,
+                        barWidth: 60,
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(66, 66, 66, .3)',
+                        },
+                        data: [this.data],
+                        coordinateSystem: 'polar',
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: '#fdf914'
+                                }, {
+                                    offset: 1,
+                                    color: '#38a700'
+                                }]),
+                            }
+                        }
+                    },
+                    {
+                        type: 'gauge',
+                        name: '',
+                        radius: '100%',
+                        startAngle: '0',
+                        endAngle: '-359.99',
+                        splitNumber: '200',
+                        center: ['50%', '50%'],
+                        pointer: {
+                            show: false
+                        },
+                        title: {
+                            show: false
+                        },
+                        detail: {
+                            show: false
+                        },
+                        data: [{
+                            value: 95,
+                            name: ''
+                        }],
+                        axisLine: {
+                            lineStyle: {
+                                width: 20,
+                                opacity: 0
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: true,
+                            length: 0,
+                            lineStyle: {
+                                color: {
+                                    type: 'linear',
+                                    x: 1,
+                                    y: 0,
+                                    x2: 0,
+                                    y2: 0,
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#111'
+                                    }, {
+                                        offset: 0.5,
+                                        color: 'rgba(66, 66, 66, 1)',
+                                    }, {
+                                        offset: 1,
+                                        color: '#111'
+                                    }],
+                                    globalCoord: false
+                                },
+                                width: 1,
+                                type: 'solid',
+                            },
+                        },
+                        axisLabel: {
+                            show: false
+                        }
+                    },
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['100%', '82%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .4)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['64.5%', '65.8%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
+                        }]
                     },
-                    color: 'rgba(66, 66, 66, .2)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['62.5%', '64%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .3)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['66.5%', '67.5%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
+                        }]
                     },
-                    color: 'rgba(66, 66, 66, .1)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['64.5%', '65.8%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .2)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
-            }]
-        },
-    ]
-};
-        this.chart.setOption(option);
-        //自适应图表
-        window.onresize = this.chart.resize;
-      },
-       numb(){
-    
-    myChart.setOption(option, true)
-},
+                        }]
+                    },
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['66.5%', '67.5%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .1)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
+                        }]
+                    },
+                ]
+            };
+            this.chart.setOption(option);
+            //自适应图表
+            window.onresize = this.chart.resize;
+        }
     }
-    
-  };
-  </script>
-  
-  <style scoped lang="less">
+
+};
+</script>
+<style scoped lang="less">
 .chart-box {
     position: relative;
 }
+
 .chart-box::after {
     content: "";
     position: absolute;
     bottom: -32px;
-    background: url("../assets/images/bottom-icon.png") no-repeat  center;
+    background: url("../assets/images/bottom-icon.png") no-repeat center;
     width: 98px;
     height: 62px;
 }

app/src/mixin/unit.js

@@ -0,0 +1,141 @@
+const punishmentMixin = {
+    data() {
+      return {
+        //建筑分类
+        TypeList: [
+        {
+          value: "住宅建筑",
+          label: "住宅建筑",
+        },
+        {
+          value: "工业建筑",
+          label: "工业建筑",
+        },
+        {
+          value: "居民建筑",
+          label: "居民建筑",
+        },
+      ],
+         //管理形式
+      mentList: [
+        {
+          value: "有管理单位(物业)",
+          label: "有管理单位(物业)",
+        },
+        {
+          value: "有管理单位(非物业)",
+          label: "有管理单位(非物业)",
+        },
+        {
+          value: "居民自主管理",
+          label: "居民自主管理",
+        },
+        {
+          value: "街道社区代管",
+          label: "街道社区代管",
+        },
+        {
+          value: "无管理主体",
+          label: "无管理主体",
+        },
+        {
+          value: "其他",
+          label: "其他",
+        },
+      ],
+        // 维保形式
+      wbList: [
+        {
+          value: "专业维保",
+          label: "专业维保",
+        },
+        {
+          value: "自主维保",
+          label: "自主维保",
+        },
+        {
+          value: "无维保",
+          label: "无维保",
+        },
+        {
+          value: "仅消火栓",
+          label: "仅消火栓",
+        },
+      ],
+          //管理主体
+      glList: [
+        {
+          value: "一般单位",
+          label: "一般单位",
+        },
+        {
+          value: "重点单位",
+          label: "重点单位",
+        },
+      ],
+      //年代
+      yearList:[
+        {
+          value: "2000年前",
+          label: "2000年前",
+        },
+          {
+          value: "2001-2010年",
+          label: "2001-2010年",
+        },
+           {
+          value: "2011-2020年",
+          label: "2011-2020年",
+        },
+           {
+          value: "2021年后",
+          label: "2021年后",
+        },
+      ],
+      //高度
+      higthList:[
+          {
+          value: "30m及以下",
+          label: "30m及以下",
+        },
+        {
+            value: "30-50米（含）",
+            label: "30-50米（含）",
+          },
+          {
+            value: "50-80米（含）",
+            label: "50-80米（含）",
+          },
+          {
+            value: "80-100米",
+            label: "80-100米",
+          },
+          {
+            value: "100米以上",
+            label: "100米以上",
+          },
+      ],
+      fxdjLlst:[
+        {
+            value: "重大风险",
+            label: "重大风险",
+          },
+          {
+            value: "较大风险",
+            label: "较大风险",
+          },
+          {
+            value: "一般风险",
+            label: "一般风险",
+          },
+          {
+            value: "低风险",
+            label: "低风险",
+          },
+      ]
+      };
+    },
+}
+  
+  export default punishmentMixin;
+  

app/src/views/Basic/index.vue

@@ -1,37 +1,18 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
-    <div>
-      <border-panel
-        height="310px"
-        style="margin-bottom: 6px"
-        title="高层建筑统计"
-      >
-        <BuildNum
-          :list="gcjztjList"
-          :qy="qy"
-          v-if="gcjztjList && gcjztjList.length > 0"
-        />
-      </border-panel>
-      <border-panel
-        height="320px"
-        style="margin-bottom: 6px"
-        title="年代分布统计"
-      >
-        <ChronologicDistributionStatistics
-          :list="NdfbtjList"
-          v-if="NdfbtjList && NdfbtjList.length > 0"
-        />
-      </border-panel>
-      <border-panel height="310px" title="高度分布统计">
-        <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">
+		<div>
+			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计">
+				<BuildNum :list="gcjztjList" :qy="qy" v-if="gcjztjList && gcjztjList.length > 0" />
+			</border-panel>
+			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计">
+				<ChronologicDistributionStatistics :list="NdfbtjList" v-if="NdfbtjList && NdfbtjList.length > 0" />
+			</border-panel>
+			<border-panel height="310px" title="高度分布统计">
+				<HeightDistribution :list="gdfbtjList" v-if="gdfbtjList && gdfbtjList.length > 0" />
+			</border-panel>
+		</div>
+		<div>
+			<div style="
           width: 900px;
           height: 1000px;
           position: relative;
@@ -39,7 +20,7 @@
           padding-top: 150px;
         "
       >
-        <MapCharts />
+        <MapCharts :qx="qy" @selectArea="area => qy = area" />
         <div style="position: absolute; width: 500px; top: 10px; left: -20px">
           <SearchBox :area.sync="qy"/>
         </div>
@@ -59,99 +40,104 @@
   </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 { toFirst } from '../../utils'
-import {
-  getJztj,
-  getQyfbList,
-  getNdfbtj,
-  getGcjztj,
-  getGdfbtj,
-} from "@/api/basicInfor.js";
-// import { getQyfbList } from "@/api/basicInfor.js";
-// import { getNdfbtj } from "@/api/basicInfor.js";
-// import { getGcjztj } from "@/api/basicInfor.js";
-// import { getGdfbtj } from "@/api/basicInfor.js";
-export default {
-  name: "BasicPage",
-  components: {
-    BuildNum,
-    Regional,
-    BuildingStatistics,
-    HeightDistribution,
-    ChronologicDistributionStatistics,
-    MapCharts,
-    SearchBox,
-  },
-  data() {
-    return {
-      qy: "重庆市",
-      params: {
-        pageSize: 100,
-        pageNum: 1,
-      },
-      jztjList: [],
-      qyfbList: [],
-      NdfbtjList: [],
-      gcjztjList: [],
-      gdfbtjList: [],
-    };
-  },
-  watch: {
-    qy() {
-      this.getList();
-    },
-  },
-  methods: {
-    openBasicModal() {
-      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) => {
-        this.gcjztjList = res.data.rows;
-      });
-      getGdfbtj({
-        ...this.params,
-        pageSize: 1000,
-        qx: this.qy === "重庆市" ? "" : this.qy,
-      }).then((res) => {
-        this.gdfbtjList = res.data.rows;
-      });
-    },
-  },
-  created() {
-    this.getList();
-  },
-};
+	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 {
+		toFirst
+	} from '../../utils'
+	import {
+		getJztj,
+		getQyfbList,
+		getNdfbtj,
+		getGcjztj,
+		getGdfbtj,
+	} from "@/api/basicInfor.js";
+	// import { getQyfbList } from "@/api/basicInfor.js";
+	// import { getNdfbtj } from "@/api/basicInfor.js";
+	// import { getGcjztj } from "@/api/basicInfor.js";
+	// import { getGdfbtj } from "@/api/basicInfor.js";
+	export default {
+		name: "BasicPage",
+		components: {
+			BuildNum,
+			Regional,
+			BuildingStatistics,
+			HeightDistribution,
+			ChronologicDistributionStatistics,
+			MapCharts,
+			SearchBox,
+		},
+		data() {
+			return {
+				qy: "重庆市",
+				params: {
+					pageSize: 100,
+					pageNum: 1,
+				},
+				jztjList: [],
+				qyfbList: [],
+				NdfbtjList: [],
+				gcjztjList: [],
+				gdfbtjList: [],
+			};
+		},
+		watch: {
+			qy() {
+				this.getList();
+			},
+		},
+		methods: {
+			openBasicModal() {
+				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) => {
+					this.gcjztjList = res.data.rows;
+				});
+				getGdfbtj({
+					...this.params,
+					pageSize: 1000,
+					qx: this.qy === "重庆市" ? "" : this.qy,
+				}).then((res) => {
+					this.gdfbtjList = res.data.rows;
+				});
+			},
+		},
+		created() {
+			this.getList();
+		},
+	};
 </script>
 
 <style scoped lang="less"></style>

app/src/views/Detail/components/Risklevel.vue

@@ -6,7 +6,7 @@
       <span v-for="(item, i) in fxd" :key="i">{{ item }}</span>
     </div>
     <div class="level_bottom">
-      <div class="code">
+      <div class="code" @click="rowClickHandler">
         <img src="../../../assets/images/image 13.png" alt="" />
       </div>
       <div class="info" v-if="detail">
@@ -42,6 +42,9 @@ export default {
   props: ["detail"],
   components: {},
   methods: {
+	  rowClickHandler() {
+	  	this.$router.push(`/h5?id=${'72042'}`);
+	  },
     getList() {
       const param = {
         pageNum: 1,

app/src/views/Fire/components/Construction.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="unit">
-      <span class="unit-c">管理主体</span>
-      <div class="unit-num" v-for="(item,index) in glztList" :key="index">
+      <span class="unit-c" @click="showHunit">管理主体</span>
+      <div class="unit-num" v-for="(item,index) in glztList" :key="index" @click="showHunit">
         <div >
           <LinearText
             style="display: inline-block"
@@ -67,14 +67,19 @@
         <div>无维保</div>
       </div> -->
     </div>
+    <!-- 弹窗 -->
+    <basic-modal top="120px" ref="higthModal" name="高层建筑管理">
+      <higthList  />
+    </basic-modal>
   </div>
 </template>
 
 <script>
 import unit3D from "@/components/unit3D.vue";
 import { gettotalGlxx } from "@/api/management.js";
+import higthList from "./higthList.vue";
 export default {
-  components: { unit3D },
+  components: { unit3D,higthList },
   props: {
     qx: String,
     glztList:Array,
@@ -94,10 +99,10 @@ export default {
     qx() {
       this.manageList()
     }
-},
+  },
   methods:{
     manageList() {
-      gettotalGlxx({...this.params, qx: this.qx}).then((res) => {
+      gettotalGlxx({...this.params, qx: this.qx === '重庆市' ? "" : this.qx}).then((res) => {
         this.fierList = res.data.rows.map((item) => {
           return {
             name: item.xfaqglxs,
@@ -106,6 +111,10 @@ export default {
         });
       });
     },
+    // 弹窗
+    showHunit(){
+      this.showModal("higthModal");
+    }
   },
   created() {
     this.manageList();

app/src/views/Fire/components/ManagementContent.vue

@@ -14,17 +14,23 @@ export default {
   data() {
     return {
       list: [],
-      qy: "渝北区",
       params: {
         pageSize: 100,
         pageNum: 1,
       },
     };
   },
-
+  props: {
+    qx: String,
+  },
+  watch: {
+    qx() {
+      this.getWclList()
+    }
+  },
   methods: {
     getWclList() {
-      getGlnrWcl({ ...this.params, qy: this.qy }).then((res) => {
+      getGlnrWcl({ ...this.params, qy: this.qx === '重庆市' ? "" : this.qx }).then((res) => {
         const item = res.data.rows[0];
         this.list = [
           {

app/src/views/Fire/components/UnitInfo.vue

@@ -1,108 +1,91 @@
 <template>
-  <div class="maintenance-supervision">
-    <div class="maintenance-supervision_header">
-      <el-input v-model="search" placeholder="建筑名称"></el-input>
-      <div>
-        <el-select v-model="value" placeholder="管理形式">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-      </div>
+	<div class="maintenance-supervision">
+		<div class="maintenance-supervision_header">
+			<el-input v-model="search" placeholder="建筑名称"></el-input>
+			<div>
+				<el-select v-model="value" placeholder="管理形式">
+					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+			</div>
 
-      <el-button @click="getZjglList">搜索</el-button>
-      <el-button @click="colos">重置</el-button>
-    </div>
-    <div v-if="checked === 0">
-      <div class="row header">
-        <span class="num">序号</span>
-        <span class="time">建筑名称</span>
-        <span class="person">管理形式</span>
-        <span class="result">管理单位</span>
-      </div>
-      <VueSeamlessScroll :data="ZjglList" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in ZjglList" :key="index">
-            <span class="num">{{ index + 1 }}</span>
-            <span class="time">{{ item.gcjzmc }}</span>
-            <span class="person">{{ item.xfaqglxs }}</span>
-            <span
-              class="result"
-              :style="{
+			<el-button @click="getZjglList">搜索</el-button>
+			<el-button @click="colos">重置</el-button>
+		</div>
+		<div v-if="checked === 0">
+			<div class="row header">
+				<span class="num">序号</span>
+				<span class="time">建筑名称</span>
+				<span class="person">管理形式</span>
+				<span class="result">管理单位</span>
+			</div>
+			<VueSeamlessScroll :data="ZjglList" :class-option="classOption" class="warp">
+				<ul class="item">
+					<li class="row" v-for="(item, index) in ZjglList" :key="index">
+						<span class="num">{{ index + 1 }}</span>
+						<span class="time">{{ item.gcjzmc }}</span>
+						<span class="person">{{ item.xfaqglxs }}</span>
+						<span class="result" :style="{
                 color: resultType(item.glzthztjzd),
-              }"
-              >{{ item.glzthztjzd }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
-    </div>
+              }">{{ item.glzthztjzd }}</span>
+					</li>
+				</ul>
+			</VueSeamlessScroll>
+		</div>
 
-    <div v-if="checked === 1">
-      <div class="row header">
-        <span class="time">检查结束事件</span>
-        <span class="person">执法机构</span>
-        <span class="result">检查结果</span>
-      </div>
-      <VueSeamlessScroll :data="list2" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list2" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person">{{ item[1] }}</span>
-            <span
-              class="result"
-              :style="{
+		<div v-if="checked === 1">
+			<div class="row header">
+				<span class="time">检查结束事件</span>
+				<span class="person">执法机构</span>
+				<span class="result">检查结果</span>
+			</div>
+			<VueSeamlessScroll :data="list2" :class-option="classOption" class="warp">
+				<ul class="item">
+					<li class="row" v-for="(item, index) in list2" :key="index">
+						<span class="time">{{ item[0] }}</span>
+						<span class="person">{{ item[1] }}</span>
+						<span class="result" :style="{
                 color: resultType(item[2]),
-              }"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
-    </div>
-    <div v-if="checked === 2">
-      <div class="row header">
-        <span class="time">登记事件</span>
-        <span class="person">排查人员</span>
-        <span class="result">是否存在隐患</span>
-      </div>
-      <VueSeamlessScroll :data="list3" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list3" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person">{{ item[1] }}</span>
-            <span
-              class="result"
-              :style="{
+              }">{{ item[2] }}</span>
+					</li>
+				</ul>
+			</VueSeamlessScroll>
+		</div>
+		<div v-if="checked === 2">
+			<div class="row header">
+				<span class="time">登记事件</span>
+				<span class="person">排查人员</span>
+				<span class="result">是否存在隐患</span>
+			</div>
+			<VueSeamlessScroll :data="list3" :class-option="classOption" class="warp">
+				<ul class="item">
+					<li class="row" v-for="(item, index) in list3" :key="index">
+						<span class="time">{{ item[0] }}</span>
+						<span class="person">{{ item[1] }}</span>
+						<span class="result" :style="{
                 color: resultType(item[2]),
-              }"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
-    </div>
-    <div v-if="checked === 3">
-      <div class="row header">
-        <span class="time">检查时间</span>
-        <span class="person">检查人</span>
-        <span class="result">检查结果</span>
-      </div>
-      <VueSeamlessScroll :data="list4" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list4" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person ellipsis">{{ item[1] }}</span>
-            <span class="result ellipsis">{{ item[2] }}</span>
-          </li>
-        </ul>
-      </VueSeamlessScroll>
-    </div>
-  </div>
+              }">{{ item[2] }}</span>
+					</li>
+				</ul>
+			</VueSeamlessScroll>
+		</div>
+		<div v-if="checked === 3">
+			<div class="row header">
+				<span class="time">检查时间</span>
+				<span class="person">检查人</span>
+				<span class="result">检查结果</span>
+			</div>
+			<VueSeamlessScroll :data="list4" :class-option="classOption" class="warp">
+				<ul class="item">
+					<li class="row" v-for="(item, index) in list4" :key="index">
+						<span class="time">{{ item[0] }}</span>
+						<span class="person ellipsis">{{ item[1] }}</span>
+						<span class="result ellipsis">{{ item[2] }}</span>
+					</li>
+				</ul>
+			</VueSeamlessScroll>
+		</div>
+	</div>
 </template>
 <script>
 import VueSeamlessScroll from "vue-seamless-scroll";
@@ -112,7 +95,6 @@ export default {
   data() {
     return {
        ZjglList:[],
-        qxs: "万州区",
       search: "",
       options: [
         {
@@ -144,6 +126,9 @@ export default {
       checked: 0,
     };
   },
+  props: {
+    qx: String
+  },
   components: {
     VueSeamlessScroll,
   },
@@ -154,6 +139,11 @@ export default {
       };
     },
   },
+  watch: {
+    qx() {
+      this.getZjglList()
+    }
+  },
   methods: {
     colos(){
       this.search=''
@@ -176,7 +166,7 @@ export default {
     const params={
       pageSize: 100,
         pageNum: 1,
-        qx:this.qxs,
+        qx: this.qx === '重庆市' ? "" : this.qx,
         glzthztjzd:this.search,
         xfaqglxs:this.value
     }
@@ -192,169 +182,179 @@ export default {
 </script>
 
 <style scoped lang="less">
-.maintenance-supervision {
-  // padding: 10px 10px 0px 20px;
-  ::v-deep(.el-input__inner) {
-    border: none;
-    background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
-    color: #fff;
-  }
-  ::v-deep(.el-button) {
-    border: none;
-    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
-    color: #fff;
-  }
-  .maintenance-supervision_header {
-    display: flex;
-    justify-content: space-around;
-    border-bottom: 1px solid #154956;
-    padding-bottom: 2px;
-    margin-top: 15px;
-    font-size: 12px;
-    color: rgb(79, 149, 186);
-  }
-  .warp {
-    height: 520px;
-    margin: 0 auto;
-    overflow: hidden;
-    .item {
-      list-style: none;
-      padding: 0;
-      margin: 0 auto;
-      cursor: pointer;
-    }
-  }
+	.maintenance-supervision {
 
-  .header {
-    color: #fff;
-    height: 33px !important;
-    line-height: 33px !important;
-    background-color: rgba(0, 163, 255, 0.3) !important;
-    color: #61dbff;
-    margin-top: 15px;
-    margin-bottom: 6px;
-  }
+		// padding: 10px 10px 0px 20px;
+		::v-deep(.el-input__inner) {
+			border: none;
+			background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
+			color: #fff;
+		}
 
- 
-  .row,
-  li,
-  a {
-    display: block;
-    height: 39px;
-    line-height: 39px;
-    margin-bottom: 4px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 16px;
-    background-color: rgba(0, 0, 0, 0.2);
-    .time,
-    .num,
-    .person,
-    .result {
-      flex: 0.33;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      // 超出隐藏
-      display: inline-block;
-      overflow: hidden ;
-      text-overflow: ellipsis ;
-      white-space:nowrap;
-    }
+		::v-deep(.el-button) {
+			border: none;
+			background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+			color: #fff;
+		}
 
-    .num {
-      flex: 0.15;
-    }
-  }
-}
+		.maintenance-supervision_header {
+			display: flex;
+			justify-content: space-around;
+			border-bottom: 1px solid #154956;
+			padding-bottom: 2px;
+			margin-top: 15px;
+			font-size: 12px;
+			color: rgb(79, 149, 186);
+		}
+
+		.warp {
+			height: 520px;
+			margin: 0 auto;
+			overflow: hidden;
+
+			.item {
+				list-style: none;
+				padding: 0;
+				margin: 0 auto;
+				cursor: pointer;
+			}
+		}
 
+		.header {
+			color: #fff;
+			height: 33px !important;
+			line-height: 33px !important;
+			background-color: rgba(0, 163, 255, 0.3) !important;
+			color: #61dbff;
+			margin-top: 15px;
+			margin-bottom: 6px;
+		}
 
 
-/deep/.el-input__inner {
-  background-color: #184254;
-  width: 120px;
-  height: 30px;
-  margin-bottom: 5px;
-}
-/deep/.el-button {
-  width: 80px;
-  height: 32px;
-  font-size: 14px;
-  line-height: 2px;
-  background: #184254;
-  margin: 0 5px 0 30px;
-  color: #fff;
-  border-radius: 5px;
-  border: none;
-}
-// /deep/.el-select-dropdown{
+		.row,
+		li,
+		a {
+			display: block;
+			height: 39px;
+			line-height: 39px;
+			margin-bottom: 4px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 16px;
+			background-color: rgba(0, 0, 0, 0.2);
 
-//     background-color:#184254 !important;
-//     position: fixed;
+			.time,
+			.num,
+			.person,
+			.result {
+				flex: 0.33;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				// 超出隐藏
+				display: inline-block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 
-//   }
-/deep/.select_btn {
-  position: absolute;
-  top: 225px;
-  right: 320px;
-  //下拉框
-}
-// /deep/.el-select-dropdown{
-//      border: none;
-//      background-color: #184254 ;
-//  }
-//输入框
-//  /deep/.el-input__inner{
-//      color:#eee;
-//      border-color: #00fff6;
-//      background-color: rgba(1, 28, 82, 0.8);
-//  }
-//  //聚焦时的样式
-//  /deep/.el-select .el-input.is-focus .el-input__inner{
-//      border-color: #0B61AA;
-//      background-color: rgba(1, 28, 82, 0.8);
-//      color:#00D3E9;
-//  }
-//  //下拉框选中
-//  /deep/.el-select-dropdown__item{
-//      color: #eee;
-//  }
-//  //鼠标经过下拉框
-//  /deep/.el-select-dropdown__item.hover,
-//  /deep/.el-select-dropdown__item:hover{
-//      color:#00D3E9;
-//      background-color: #0F3360;
-//  }
+			.num {
+				flex: 0.15;
+			}
+		}
+	}
+
+
+
+	/deep/.el-input__inner {
+		background-color: #184254;
+		width: 120px;
+		height: 30px;
+		margin-bottom: 5px;
+	}
+
+	/deep/.el-button {
+		width: 80px;
+		height: 32px;
+		font-size: 14px;
+		line-height: 2px;
+		background: #184254;
+		margin: 0 5px 0 30px;
+		color: #fff;
+		border-radius: 5px;
+		border: none;
+	}
+
+	// /deep/.el-select-dropdown{
+
+	//     background-color:#184254 !important;
+	//     position: fixed;
+
+	//   }
+	/deep/.select_btn {
+		position: absolute;
+		top: 225px;
+		right: 320px;
+		//下拉框
+	}
+
+	// /deep/.el-select-dropdown{
+	//      border: none;
+	//      background-color: #184254 ;
+	//  }
+	//输入框
+	//  /deep/.el-input__inner{
+	//      color:#eee;
+	//      border-color: #00fff6;
+	//      background-color: rgba(1, 28, 82, 0.8);
+	//  }
+	//  //聚焦时的样式
+	//  /deep/.el-select .el-input.is-focus .el-input__inner{
+	//      border-color: #0B61AA;
+	//      background-color: rgba(1, 28, 82, 0.8);
+	//      color:#00D3E9;
+	//  }
+	//  //下拉框选中
+	//  /deep/.el-select-dropdown__item{
+	//      color: #eee;
+	//  }
+	//  //鼠标经过下拉框
+	//  /deep/.el-select-dropdown__item.hover,
+	//  /deep/.el-select-dropdown__item:hover{
+	//      color:#00D3E9;
+	//      background-color: #0F3360;
+	//  }
 </style>
 
 
 <style>
+	.el-select-dropdown.el-popper {
+		background-color: #4167a0;
+		color: #fff;
+	}
+
+	.el-popper[x-placement^=bottom] .popper__arrow::after {
+		border-bottom-color: #4167a0 !important;
+	}
 
-.el-select-dropdown.el-popper {
-  background-color: #4167a0;
-  color: #fff;
-}
-.el-popper[x-placement^=bottom] .popper__arrow::after  {
-  border-bottom-color: #4167a0 !important;
-}
-.el-select-dropdown.el-popper {
-  border: 1px solid rgba(0, 213, 255, 0.6) !important;
-}
-.el-select-dropdown.el-popper li.el-select-dropdown__item span {
-  color: #fff;
-}
-.el-select-dropdown.el-popper
-  li.el-select-dropdown__item.selected
-  span {
-  color: #2f7df2;
-}
-.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
-  background-color: #2f7df2;
-}
-.el-select-dropdown.el-popper
-  li.el-select-dropdown__item.hover.selected
-  span {
-  color: #fff !important;
-}
+	.el-select-dropdown.el-popper {
+		border: 1px solid rgba(0, 213, 255, 0.6) !important;
+	}
+
+	.el-select-dropdown.el-popper li.el-select-dropdown__item span {
+		color: #fff;
+	}
+
+	.el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
+		color: #2f7df2;
+	}
+
+	.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
+		background-color: #2f7df2;
+	}
+
+	.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
+		color: #fff !important;
+	}
 </style>

app/src/views/Fire/components/higthList.vue

@@ -0,0 +1,459 @@
+<script>
+import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
+import { area } from "@/api/area";
+import punishmentMixin from "@/mixin/unit.js";
+export default {
+  name: "BasicInfoModalContent",
+  mixins: [punishmentMixin],
+  data() {
+    return {
+      options: [],
+      fxdjList: [],
+      tableData: [],
+      unitList: [],
+      value: "全市",
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      total: 0,
+      search: "",
+      showFlag:1
+      // Unittype: "", // 建筑分类
+      // year: "", // 年代
+      // hnum: "", //高度
+      // management: "", //管理形式
+      // subject: "", //管理主体
+      // maintenance: "", //维保形式
+      // risklevel: "", //风险等级
+    };
+  },
+  //   props: {
+  //     qy: String,
+  //   },
+  //   watch: {
+  //     qy: {
+  //       handler(val) {
+  //         this.value = val;
+  //         this.funUnitList();
+  //         this.handUnitList();
+  //       },
+  //       immediate: true,
+  //       deep: true,
+  //     },
+  //   },
+  methods: {
+    rowClickHandler(val) {
+      this.$router.push(`/detail?id=${val.id}`);
+    },
+    funUnitList() {
+      getJdjcUnit({
+        ...this.params,
+        qx: this.value === "重庆市" ? "" : this.value,
+        gcjzmc: this.search,
+      }).then((res) => {
+        this.tableData = res.data.rows;
+        this.total = res.data.total;
+      });
+    },
+    handleSizeChange(val) {
+      this.params.pageSize = val;
+      this.funUnitList();
+    },
+    handleCurrentChange(val) {
+      this.params.pageNum = val;
+      this.funUnitList();
+    },
+    handUnitList() {
+      getGcjztjUnit({
+        ...this.params,
+        qy: this.value === "重庆市" ? "" : this.value,
+      }).then((res) => {
+        const list = res.data.rows[0];
+        this.unitList = [
+          {
+            title: "高层建筑总数(栋)",
+            unitNum: list.ggjz + list.gyjz + list.zzjz,
+          },
+          {
+            title: "超高层建筑总数(栋)",
+            unitNum: list.cggjz,
+          },
+          {
+            title: "老旧高层建筑总数(栋)",
+            unitNum: list.ljzzgc,
+          },
+          {
+            title: "公共建筑总数(栋)",
+            unitNum: list.ggjz,
+          },
+          {
+            title: "住宅建筑总数(栋)",
+            unitNum: list.zzjz,
+          },
+        ];
+      });
+    },
+    resetForm() {
+      this.value = "";
+      this.search = "";
+      (this.params = {
+        pageSize: 10,
+        pageNum: 1,
+      }),
+        // this.params.Unittype = ""; // 建筑分类
+        // this.params.year = ""; // 年代
+        // this.params.hnum = ""; //高度
+        // this.params.management = ""; //管理形式
+        // this.params.subject = ""; //管理主体
+        // this.params.maintenance = ""; //维保形式
+        // this.params.risklevel = ""; //风险等级
+        this.funUnitList();
+    },
+    changeList(val){
+        this.showFlag=val
+    },
+    addClass(i){
+       return this.showFlag===i?'active':'tab-item'
+    }
+  },
+  created() {
+    this.funUnitList();
+    this.handUnitList();
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+  },
+};
+</script>
+
+<template>
+  <div>
+    <!-- 搜索 -->
+    <div class="maintenance-supervision">
+      <div class="tab">
+        <span class="tab-item" @click="changeList(1)" :class="addClass(1)">管理形式</span>
+        <span class="tab-item"  @click="changeList(2)" :class="addClass(2)">维保形式</span>
+        <span class="tab-item" @click="changeList(3)" :class="addClass(3)">管理主体</span>
+      </div>
+      <div class="maintenance-supervision_header">
+        <div class="select-item">
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="btn-item">
+        <el-button @click="funUnitList">搜索</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </div>
+    </div>
+
+    <div v-if="showFlag===3">
+      <basic-table
+        :data="tableData"
+        @row-click="rowClickHandler"
+        style="text-align: center"
+      >
+        <el-table-column type="index" label="序号" width="180">
+        </el-table-column>
+        <el-table-column
+          prop="qx"
+          label="区县"
+          width="180"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="gcjzmc"
+          label="重点单位(家)"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="一般单位(家)"
+          width="180"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <div v-if="showFlag===1">
+      <basic-table
+        :data="tableData"
+        @row-click="rowClickHandler"
+        style="text-align: center"
+      >
+        <el-table-column type="index" label="序号" >
+        </el-table-column>
+        <el-table-column
+          prop="qx"
+          label="区县"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="gcjzmc"
+          label="有管理单位（物业）（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="有管理单位（非物业）（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="居民自主管理（栋）"
+          width="220"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="街道社区代管"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="其他"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="无管理主体"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <div v-if="showFlag===2">
+      <basic-table
+        :data="tableData"
+        @row-click="rowClickHandler"
+        style="text-align: center"
+      >
+        <el-table-column type="index" label="序号" >
+        </el-table-column>
+        <el-table-column
+          prop="qx"
+          label="区县"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="gcjzmc"
+          label="专业维保（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="自主维保（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="无维保（栋）"
+          width="220"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="街道社区代管"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="仅消火栓"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        
+      </basic-table>
+    </div>
+    <br />
+    <basic-pagination
+      layout="->,prev, pager, next, sizes,jumper"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="params.pageSize"
+      :current-page="params.PageNum"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.maintenance-supervision {
+  display: flex;
+  align-items: center;
+  // padding: 10px 10px 0px 20px;
+  ::v-deep(.el-input__inner) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.31) 100%
+    );
+    color: #fff;
+  }
+  ::v-deep(.el-button) {
+    border: none;
+    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+    color: #fff;
+  }
+  .maintenance-supervision_header {
+    display: flex;
+    // flex-wrap: wrap;
+    justify-content: space-around;
+    // border-bottom: 1px solid #154956;
+    padding-bottom: 10px;
+    font-size: 12px;
+    color: rgb(79, 149, 186);
+    // .select-item{
+    //   margin-right: 20px;
+    // }
+  }
+  .btn-item {
+    margin-bottom: 10px;
+  }
+
+  .warp {
+    height: 520px;
+    margin: 0 auto;
+    overflow: hidden;
+    .item {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+  /deep/.el-input__inner {
+    background-color: #184254;
+    width: 150px;
+    height: 30px;
+    margin-bottom: 5px;
+  }
+  /deep/.el-button {
+    width: 100px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 2px;
+    // margin: 0 20px 0 30px;
+    color: #fff;
+    border-radius: 5px;
+    border: none;
+    margin-left: 20px;
+  }
+  /deep/.el-button:hover {
+    color: rgb(80, 147, 224);
+  }
+  /deep/.select_btn {
+    position: absolute;
+    top: 225px;
+    right: 320px;
+    //下拉框
+  }
+  /deep/.el-input {
+    width: 150px;
+    // margin-left: 20px;
+  }
+  .header {
+    color: #fff;
+    height: 33px !important;
+    line-height: 33px !important;
+    background-color: rgba(0, 163, 255, 0.3) !important;
+    color: #61dbff;
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
+
+  .row,
+  li,
+  a {
+    display: block;
+    height: 39px;
+    line-height: 39px;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .num,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .num {
+      flex: 0.15;
+    }
+  }
+  .inp {
+    margin-left: 20px;
+  }
+}
+.unit-bulid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+.unit-num {
+  width: 200px;
+  height: 109px;
+  border: 1px solid #0463a7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+  line-height: 59px;
+}
+.tab {
+  display: flex;
+}
+.active{
+    background: #0463a7 !important;
+}
+.tab-item {
+  display: inline-block;
+  width: 120px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 16px;
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+}
+</style>

app/src/views/Fire/index.vue

@@ -1,20 +1,20 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between; cursor: pointer;">
     <div>
       <border-panel
         height="443px"
         style="margin-bottom: 6px"
         title="高层建筑管理"
       >
-        <Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList" />
+        <Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList"  />
       </border-panel>
       <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
-        <ManagementContent />
+        <ManagementContent :qx="qx" />
       </border-panel>
     </div>
     <div>
       <div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
-        <MapCharts />
+        <MapCharts :qx="qx" @selectArea="area => qx = area" />
       </div>
     </div>
     <div>
@@ -30,9 +30,10 @@
         style="margin-bottom: 6px"
         title="建筑管理单位信息"
       >
-        <UnitInfo />
+        <UnitInfo :qx="qx"/>
       </border-panel>
     </div>
+   
   </div>
 </template>
 <script>
@@ -41,6 +42,7 @@ import UnitInfo from "./components/UnitInfo.vue";
 import Construction from "./components/Construction.vue";
 import ManagementContent from "./components/ManagementContent.vue";
 import MapCharts from "../Home/components/MapCharts.vue";
+
 import {
   getGlzts,
   getWbxxs,
@@ -49,13 +51,14 @@ import {
   getWbdwgljzpm,
 } from "@/api/management.js";
 export default {
-  name: "Fire",
+  name: "FirePage",
   components: {
     Management,
     UnitInfo,
     Construction,
     ManagementContent,
-    MapCharts
+    MapCharts,
+    
   },
   data() {
     return {
@@ -72,13 +75,22 @@ export default {
       },
     };
   },
+  watch: {
+    qx() {
+      this.unitZt();
+      this.getWbxsList();
+      this.getDwfbList();
+      this.getDwpmList();
+      this.getWbdwList()
+    }
+  },
   methods: {
     // 管理主体
     unitZt() {
       getGlzts({
         pageSize: 100,
         pageNum: 1,
-        jzszqx: this.qx,
+        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.glztList = res.data.rows;
       });
@@ -88,7 +100,7 @@ export default {
       getWbxxs({
         pageSize: 100,
         pageNum: 1,
-        qx: this.qx,
+        qx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.wbxsList = res.data.rows;
       });
@@ -98,7 +110,7 @@ export default {
       getGldwgljzpm({
         pageSize: 100,
         pageNum: 1,
-        qx: this.qx,
+        qx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.gldListL = res.data.rows;
       });
@@ -108,7 +120,7 @@ export default {
       getJzrzdwpms({
         pageSize: 100,
         pageNum: 1,
-        jzszqx: this.qx,
+        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.JzrzdList = res.data.rows;
       });
@@ -118,11 +130,12 @@ export default {
 		getWbdwgljzpm({
         pageSize: 100,
         pageNum: 1,
-        qx: this.qx,
+        qx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.wbdwList = res.data.rows;
       });
     },
+  
   },
   created() {
     this.unitZt();

app/src/views/FireCondition/components/FireDistribution.vue

@@ -67,14 +67,17 @@ export default {
     },
     getPercent(bn, tq) {
       if (bn - tq === 0) {
-        return '0%'
+        return '—'
       }
       if (tq === 0) {
-        return '100%'
+        return '—'
       }
       return `${(parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100 ))}%`
     },
     getIcon(bn, tq) {
+      if(tq === 0) {
+        return null;
+      }
       if (bn -tq > 0) {
         return upIcon;
       } else if (bn - tq < 0){

app/src/views/FireCondition/components/KeyIndex/index.vue

@@ -405,7 +405,8 @@ export default {
         pageSize: 12,
         xzqy: this.qx
       }).then(res => {
-        const keys = Object.keys(this.month)
+        const keys = Object.keys(this.month).sort((a,b) => parseInt(a) - parseInt(b))
+        console.log(keys)
         const ret = res.data.rows
         this.data = [
           keys.map(item => {

app/src/views/FireCondition/index.vue

@@ -18,7 +18,7 @@
       <div>
         <div>
           <div style="width: 910px; display: flex; position: relative;">
-            <MapCharts />
+            <MapCharts  :qx="qx" @selectArea="area => qx = area" />
             <div style="position: absolute;width: 500px; left: 10px;top: 10px;">
               <search-box :area.sync="qx"/>
             </div>

app/src/views/H5/index.vue

@@ -2,73 +2,116 @@
 	<div class="h5">
 		<div class="top"></div>
 		<div class="name">
-			<div class="">重庆大剧院</div>
+			<div class="">{{detail.xq || '暂无'}}</div>
 		</div>
-		<div class="content">
+		<div class="content" v-if="detail">
 			<div class="contPlate">
 				<div class="text">区域</div>
-				<div class="txt">重庆市渝北区</div>
+				<div class="txt">{{detail.qx || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">详细地址</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="txt">{{detail.xxdz || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">乡镇街道</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="txt">{{detail.xzjd || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">高度</div>
-				<div class="txt">50m</div>
+				<div class="txt">{{detail.gd || '-'}}m</div>
 			</div>
 			<div class="archText">建筑照片</div>
-			<div class="attImg">
-				<el-image class="img" :src="url" :preview-src-list="srcList">
+			<div class="attImg" v-if="detail">
+				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp1"
+					:preview-src-list="srcList" v-if="detail.jzzp1">
 				</el-image>
-				<el-image class="img" :src="url" :preview-src-list="srcList">
+				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp2"
+					:preview-src-list="srcList" v-if="detail.jzzp2">
 				</el-image>
-				<el-image class="img" :src="url" :preview-src-list="srcList">
+				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp3"
+					:preview-src-list="srcList" v-if="detail.jzzp3">
 				</el-image>
-				<el-image class="img" :src="url" :preview-src-list="srcList">
+				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp4"
+					:preview-src-list="srcList" v-if="detail.jzzp4">
 				</el-image>
-				<el-image class="img" :src="url" :preview-src-list="srcList">
+				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp5"
+					:preview-src-list="srcList" v-if="detail.jzzp5">
 				</el-image>
 			</div>
 			<div class="contPlate">
-				<div class="text">乡镇街道</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="text">建筑面积</div>
+				<div class="txt">{{detail.jzmj  || '-'}}m2</div>
 			</div>
 			<div class="contPlate">
-				<div class="text">乡镇街道</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="text">地上楼层</div>
+				<div class="txt">{{detail.dslc  || '-'}}</div>
 			</div>
 			<div class="contPlate">
-				<div class="text">乡镇街道</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="text">地下楼层</div>
+				<div class="txt">{{detail.dxlc  || '-'}}</div>
 			</div>
 			<div class="contPlate">
-				<div class="text">乡镇街道</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="text">建筑年代</div>
+				<div class="txt">{{detail.jcnd  || '-'}}</div>
 			</div>
 			<div class="contPlate">
-				<div class="text">乡镇街道</div>
-				<div class="txt">重庆市江北区XX路XX号</div>
+				<div class="text">建筑定性</div>
+				<div class="txt">{{detail.jzdx  || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">建筑内使用功能</div>
+				<div class="txt">{{detail.jznsygn  || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">消防安全管理形式</div>
+				<div class="txt">{{detail.xfaqglxs  || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">管理主体</div>
+				<div class="txt">{{detail.glzthztjzd  || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">消防安全管理人</div>
+				<div class="txt">{{detail.xfaqglr  || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">是否有维保单位</div>
+				<div class="txt">{{detail.sfywbdw  || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">维保单位名称</div>
+				<div class="txt">{{detail.wbdwzl || '-'}}</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">灭火和疏散预案</div>
+				<div class="txt">附件下载</div>
+			</div>
+			<div class="contPlate">
+				<div class="text">警示案列和宣传培训资料</div>
+				<div class="txt">附件下载</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script>
+	import {
+		getGcjzjcxx
+	} from '@/api/h5.js'
 	export default {
 		name: "H5",
 		components: {},
 		data() {
 			return {
+				params: {
+					pageSize: 100,
+					pageNum: 1,
+					qy: null,
+					id: null
+				},
+				detail: {},
 				height: 1000,
-				url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-				srcList: [
-					'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-					'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
-				]
+				srcList: [],
 			};
 		},
 		mounted() {
@@ -77,15 +120,48 @@
 			console.log(height);
 			this.height = height;
 			document.title = "建筑信息";
+			// 获取参数
+			const id = this.getQueryString("id");
+			console.log(id);
+			if (!id) {
+				return;
+			}
+
+			this.params.id = id;
+			this.getData();
+			this.srcList = [
+				this.detail.jzzp1,
+				this.detail.jzzp2,
+				this.detail.jzzp3,
+				this.detail.jzzp4,
+				this.detail.jzzp5,
+			];
+		},
+		methods: {
+			getQueryString(name) {
+				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+				var r = window.location.search.substr(1).match(reg);
+				if (r != null) {
+					return unescape(r[2]);
+				}
+				return null;
+			},
+			getData() {
+				const pId = {
+					id: this.params.id
+				}
+				getGcjzjcxx(pId).then((res) => {
+					this.detail = res.data.data;
+				});
+			},
 		},
-		methods: {},
 	};
 </script>
 
 <style scoped lang="less">
 	.h5 {
 		width: 100%;
-		height: 100vh;
+		// height: 100vh;
 		background-color: #f6f5f5;
 
 		.top {
@@ -101,7 +177,7 @@
 			height: 56px;
 			display: flex;
 			justify-content: center;
-			background-image: url(../../assets/images/build.png);
+			background-image: url(../../assets/images/jzimg.png);
 			background-position: 20px center;
 			background-size: 20px;
 			background-repeat: no-repeat;

app/src/views/Home/components/BasicInfoModalContent.vue

@@ -1,24 +1,14 @@
 <script>
 import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
 import { area } from "@/api/area";
+import punishmentMixin from "@/mixin/unit.js";
 export default {
   name: "BasicInfoModalContent",
+  mixins: [punishmentMixin],
   data() {
     return {
-      options: [
-        {
-          value: "1",
-          label: "1111",
-        },
-        {
-          value: "2",
-          label: "2222",
-        },
-        {
-          value: "3",
-          label: "3333",
-        },
-      ],
+      options: [],
+      fxdjList: [],
       tableData: [],
       unitList: [],
       value: "全市",
@@ -28,13 +18,13 @@ export default {
       },
       total: 0,
       search: "",
-      Unittype: "", // 建筑分类
-      year: "", // 年代
-      hnum: "", //高度
-      management: "", //管理形式
-      subject: "", //管理主体
-      maintenance: "", //维保形式
-      risklevel: "", //风险等级
+      // Unittype: "", // 建筑分类
+      // year: "", // 年代
+      // hnum: "", //高度
+      // management: "", //管理形式
+      // subject: "", //管理主体
+      // maintenance: "", //维保形式
+      // risklevel: "", //风险等级
     };
   },
   props: {
@@ -106,6 +96,17 @@ export default {
     resetForm() {
       this.value = "";
       this.search = "";
+      this.params={
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // this.params.Unittype = ""; // 建筑分类
+      // this.params.year = ""; // 年代
+      // this.params.hnum = ""; //高度
+      // this.params.management = ""; //管理形式
+      // this.params.subject = ""; //管理主体
+      // this.params.maintenance = ""; //维保形式
+      // this.params.risklevel = ""; //风险等级
       this.funUnitList();
     },
   },
@@ -152,11 +153,11 @@ export default {
         </div>
         <!-- 建筑分类 -->
         <div>
-          <el-select v-model="Unittype" placeholder="请选择">
+          <el-select v-model="params.jzdx" placeholder="建筑分类">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.label"
+              v-for="(item, index) in TypeList"
               :key="index"
             >
             </el-option>
@@ -164,11 +165,11 @@ export default {
         </div>
         <!-- 年代 -->
         <div>
-          <el-select v-model="year" placeholder="请选择">
+          <el-select v-model="params.jcnd" placeholder="年代">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in yearList"
               :key="index"
             >
             </el-option>
@@ -176,59 +177,59 @@ export default {
         </div>
         <!-- 高度 -->
         <div>
-          <el-select v-model="hnum" placeholder="请选择">
+          <el-select v-model="params.gd" placeholder="高度">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in higthList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 管理形式 -->
-         <div>
-          <el-select v-model="management" placeholder="请选择">
+        <!-- 管理形式 -->
+        <div>
+          <el-select v-model="params.xfaqglxs" placeholder="管理形式">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in mentList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 管理主体 -->
-         <div>
-          <el-select v-model="subject" placeholder="请选择">
+        <!-- 管理主体 -->
+        <div>
+          <el-select v-model="params.glzthztjzd" placeholder="管理主体">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in glList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 维保形式 -->
-         <div>
-          <el-select v-model="maintenance" placeholder="请选择">
+        <!-- 维保形式 -->
+        <div>
+          <el-select v-model="params.wbxs" placeholder="维保形式">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in wbList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 风险等级 -->
-         <div>
-          <el-select v-model="risklevel" placeholder="请选择">
+        <!-- 风险等级 -->
+        <div>
+          <el-select v-model="params.fxdj" placeholder="风险等级">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in fxdjLlst"
               :key="index"
             >
             </el-option>
@@ -237,21 +238,48 @@ export default {
         <div class="inp">
           <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
         </div>
-       
       </div>
-     <div class="btn-item">
-      <el-button @click="funUnitList">搜索</el-button>
+      <div class="btn-item">
+        <el-button @click="funUnitList">搜索</el-button>
         <el-button @click="resetForm">重置</el-button>
-     </div>
+      </div>
     </div>
 
-    <basic-table :data="tableData" @row-click="rowClickHandler">
+    <basic-table
+      :data="tableData"
+      @row-click="rowClickHandler"
+      style="text-align: center"
+    >
       <el-table-column type="index" label="序号" width="180"> </el-table-column>
-      <el-table-column prop="qx" label="区域" width="180"> </el-table-column>
-      <el-table-column prop="gcjzmc" label="建筑名称"> </el-table-column>
-      <el-table-column prop="xxdz" label="地址"> </el-table-column>
-      <el-table-column prop="jcnd" label="年代"> </el-table-column>
+      <el-table-column prop="qx" label="区域" width="180" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="gcjzmc" label="建筑名称" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="xxdz"
+        label="地址"
+        width="180"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <!-- 新增 -->
+      <el-table-column
+        prop="jzdx"
+        label="建筑分类"
+        width="140"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column prop="jznsygn" label="使用功能" show-overflow-tooltip>
+      </el-table-column>
       <el-table-column prop="gd" label="高度（米）"> </el-table-column>
+      <el-table-column prop="jzmj" label="建筑面积" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="jcnd" label="建筑年代"> </el-table-column>
+      <el-table-column prop="gd" label="隐患数"> </el-table-column>
+      <el-table-column prop="fxdj" label="风险等级" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="jcnd" label="物联网"> </el-table-column>
     </basic-table>
     <br />
     <basic-pagination
@@ -295,7 +323,7 @@ export default {
     //   margin-right: 20px;
     // }
   }
-  .btn-item{
+  .btn-item {
     margin-bottom: 10px;
   }
 
@@ -326,7 +354,7 @@ export default {
     border-radius: 5px;
     border: none;
   }
-  /deep/.el-button:hover{
+  /deep/.el-button:hover {
     color: rgb(80, 147, 224);
   }
   /deep/.select_btn {

app/src/views/Home/components/MapCharts.vue

@@ -8,11 +8,13 @@ import jsonCq from "@/assets/json/cq.json";
 
 export default {
   name: "MapCharts",
+  props: {
+    qx: String
+  },
   data() {
     return {
       timed: null,
       mapName: "chongqing",
-
       mapData: {
         北碚: [106.5, 29.81],
         城口: [108.6520475, 31.90676506],
@@ -47,7 +49,7 @@ export default {
         川东: [107.3488646, 29.68233099],
       },
       activeMap: jsonCq,
-      // mapIcon: require("@/assets/images/map-icon.png"),
+      activeArea: "",
       activeName: "重庆市",
       activeMapData: [],
       heatData: [
@@ -188,22 +190,23 @@ export default {
           value: 145,
         },
         {
-          name: "石柱土家族自治县",
+          name: "石柱县",
           value: 67,
         },
         {
-          name: "秀山土家族苗族自治县",
+          name: "秀山县",
           value: 87,
         },
         {
-          name: "酉阳土家族苗族自治县",
+          name: "酉阳县",
           value: 100,
         },
         {
-          name: "彭水苗族土家族自治县",
+          name: "彭水县",
           value: 123,
         },
       ],
+      mapChart: null
     };
   },
   // props: {
@@ -216,6 +219,7 @@ export default {
   //     required: false,
   //   },
   // },
+  
   watch: {
     heatDataList(val, oldVal) {
       let heatDataList = [
@@ -279,6 +283,12 @@ export default {
         this.drawMap();
       }
     },
+    qx(val) {
+      this.mapChart.dispatchAction({
+        type: "select",
+        name: val
+      })
+    }
   },
   created() {
     const array = [];
@@ -463,78 +473,32 @@ export default {
           trigger: "item",
           // position: "inside",
           position: "top",
-          backgroundColor: "rgba(51,204,204,0)",
-          // backgroundColor: "rgba(51,204,204,0.3)",
-          // formatter: function (params) {
-          //   // let res = params.name + "<br/>";
-          //   // let res = 666 + "<br/>";
-          //   let res = "";
-          //   // res +=
-          //   //   "<img style='width:85px;height:100px; margin-top:-50px' src='" +
-          //   //   mapIcon +
-          //   //   "'/>";
-          //   res +=
-          //     "<img style='width:85px;height:100px;margin-bottom:-50px' src='" +
-          //     mapIcon +
-          //     "'/>";
-          //   return res;
-          // },
+          // backgroundColor: "rgba(51,204,204,0)",
+          backgroundColor: "rgba(51,204,204,0.8)",
+          formatter: function (params) {
+            let res = params.name + "<br/>";
+            // let res = 666 + "<br/>";
+            // let res = "";
+            res += `隐患<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+            return res;
+          },
           textStyle: {
             color: "#fff",
           },
         },
-        // visualMap: {
-        //   show: false,
-        //   min: 0,
-        //   max: 10,
-        //   pieces: [
-        //     {
-        //       min: 10,
-        //     },
-        //     {
-        //       min: 5,
-        //       max: 10,
-        //     },
-        //     {
-        //       min: 1,
-        //       max: 5,
-        //     },
-        //     {
-        //       max: 1,
-        //     },
-        //   ],
-        //   inRange: {
-        //     color: ["#ffff00", "#ff0000"],
-        //   },
-
-        //   textStyle: {
-        //     color: "#fff",
-        //   },
-        // },
         visualMap: {
           show: false,
           bottom: 20,
           left: 10,
-          // color: ["#b5f8ff", "#235d99"],
-          // min: 1000,
-          // max: 38000000,
           inRange: {
             color: [
-              // '#313695',
-              // '#4575b4',
-              // '#74add1',
-              // '#abd9e9',
-              // '#e0f3f8',
-              // '#ffffbf',
-              // '#fee090',
-              "#fdae61",
-              "#f46d43",
-              "#d73027",
-              "#a50026",
+              '#313695',
+              '#4575b4',
+              '#74add1',
+              '#abd9e9',
+              '#e0f3f8'
             ],
           },
-          // min: 0,
-          // max: maxMap > 0 ? maxMap : 1,
           calculable: true,
           textStyle: {
             color: "#fff",
@@ -543,6 +507,7 @@ export default {
         },
         series: [
           {
+            name: "总览",
             type: "map",
             label: {
               position: [0, 0],
@@ -622,85 +587,29 @@ export default {
           },
         ],
       };
-      const chart = echarts.init(mapChart, "light");
-      chart.setOption(option);
-      // chart.on('click',res=>{
-      //     return fn(res);
-      // });
+      this.mapChart = echarts.init(mapChart, "light");
+      this.mapChart.setOption(option);
       // 图表对象响应式设置
       window.addEventListener("resize", () => {
-        chart.resize();
+        this.mapChart.resize();
+      });
+      // 图表点击事件
+      this.mapChart.on("click", (params) => {
+        if(params.seriesType === 'map'){
+          if (params.name !== this.activeArea) {
+            this.activeArea = params.name
+            this.$emit('selectArea', params.name)
+          } else {
+            if (this.activeArea === "") {
+            this.activeArea = params.name
+            this.$emit('selectArea', params.name)
+            } else {
+              this.activeArea = ""
+              this.$emit('selectArea', "重庆市")
+            }
+          }
+        }
       });
-
-      // const myChart = this.$initCharts(mapChart, option);
-      // this.charts.setOption(option);
-      // myChart.on("click", (params) => {});
-
-      // let _this = this;
-      // let current = 0;
-      // clearInterval(_this.timed);
-
-      // _this.timed = setInterval(() => {
-      //   current++;
-      //   if (current == _this.activeMapData.length) {
-      //     current = 0;
-      //   }
-
-      //   // 取消高亮
-      //   myChart.dispatchAction({
-      //     type: "downplay",
-      //     seriesIndex: 0,
-      //   });
-      //   myChart.dispatchAction({
-      //     type: "hideTip",
-      //     seriesIndex: 0,
-      //   });
-      //   // 高亮
-      //   myChart.dispatchAction({
-      //     type: "highlight",
-      //     seriesIndex: 0,
-      //     dataIndex: current,
-      //   });
-      //   myChart.dispatchAction({
-      //     type: "showTip",
-      //     seriesIndex: 0,
-      //     dataIndex: current,
-      //   });
-      // }, 2000);
-
-      // myChart.on("mouseover", function () {
-      //   clearInterval(_this.timed);
-      // });
-      // myChart.on("mouseout", function () {
-      //   clearInterval(_this.timed);
-      //   _this.timed = setInterval(() => {
-      //     current++;
-      //     if (current == _this.activeMapData.length) {
-      //       current = 0;
-      //     }
-
-      //     // 取消高亮
-      //     myChart.dispatchAction({
-      //       type: "downplay",
-      //       seriesIndex: 0,
-      //     });
-      //     myChart.dispatchAction({
-      //       type: "hideTip",
-      //       seriesIndex: 0,
-      //     });
-      //     // 高亮
-      //     myChart.dispatchAction({
-      //       type: "highlight",
-      //       seriesIndex: 0,
-      //       dataIndex: current,
-      //     });
-      //     myChart.dispatchAction({
-      //       type: "showTip",
-      //       seriesIndex: 0,
-      //       dataIndex: current,
-      //     });
-      //   }, 2000);
-      // });
     },
   },
 };

app/src/views/Home/index.vue

@@ -18,7 +18,7 @@
     </div>
     <div class="display: flex;">
       <div class="map" style="position: relative;">
-        <MapCharts />
+        <MapCharts :qx="qy" @selectArea="area => qy = area" />
         <div style="position: absolute; top:10px; width: 500px;">
           <SearchBox :area.sync="qy"/>
         </div>
@@ -49,7 +49,7 @@
         </template>
       </border-panel>
     </div>
-    <basic-modal top="120px" ref="basicInfoModal" title="基本信息">
+    <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
       <BasicInfoModalContent :qy="qy" />
     </basic-modal>
   </div>

app/src/views/Iot/index.vue

@@ -29,7 +29,7 @@
       </border-panel>
     </div>
     <div class="map-container cover">
-      <MapCharts />
+      <MapCharts  :qx="qx" @selectArea="area => qx = area" />
       <div style="position: absolute;width: 500px; left:90px; top: 10px;">
         <SearchBox :area.sync="qx" />
       </div>

app/src/views/PoliceSituation/components/Alarm.vue

@@ -10,7 +10,7 @@
 				<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
 				</el-option>
 			</el-select>
-			<el-button style="width: 100px; margin: 0;" @click="getZjglList">搜索</el-button>
+			<el-button style="width: 100px; margin: 0;" @click="searchTab">搜索</el-button>
 		</div>
 		<div>
 			<div class="row header">
@@ -23,16 +23,24 @@
 			<!-- <VueSeamlessScroll :data="list" :class-option="classOption" class="warp" hoverStop> -->
 			<div class="" style="height: 100vh;overflow: auto;">
 				<ul class="item">
-					<li class="row" v-for="(item, index) in list" :key="index" @click="tab(item.id)"
-						:class="item.id === id ? 'selected' : ''">
-						<span class="time" style="width: 110px;overflow: hidden;height: 40px;">{{item.zqlx}}</span>
-						<span class="person" style="width: 110px;overflow: hidden;height: 40px;">{{item.ddmc}}</span>
-						<span class="result" style="width: 110px;overflow: hidden;height: 40px;">{{item.sszhid }}</span>
-						<span class="result1"
-							style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.ajzt}}</span>
-						<span class="result2"
-							style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.lasj}}</span>
-					</li>
+					<div v-for="(item, index) in czztList" :key="index">
+						<li class="row" @click="tab(item.id)" :class="item.id === id ? 'selected' : ''">
+							<span class="time" style="width: 110px;overflow: hidden;height: 40px;">{{item.zqlx}}</span>
+							<span class="person"
+								style="width: 110px;overflow: hidden;height: 40px;">{{item.ddmc}}</span>
+							<span class="result"
+								style="width: 110px;overflow: hidden;height: 40px;">{{item.sszhid }}</span>
+							<span class="result1"
+								style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.ajzt}}</span>
+							<span class="result2"
+								style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.lasj}}</span>
+						</li>
+						<div class="bjxxBack" v-if="item.id === id ">
+							<div class="bjTetx">报警电话：{{item.bjrlxdh || '-'}}</div>
+							<div class="bjTetx">人员被困情况：{{item.bjrsfbk ||'-'}}</div>
+							<div class="bjTetx">有无明火：{{item.jqJyqk || '-'}}</div>
+						</div>
+					</div>
 				</ul>
 			</div>
 			<!-- </VueSeamlessScroll> -->
@@ -41,13 +49,17 @@
 </template>
 <script>
 	import VueSeamlessScroll from "vue-seamless-scroll";
-
+	import {
+		getBjxx
+	} from '@/api/jqdt.js'
 	export default {
 		name: "MaintenanceSupervision",
 		data() {
 			return {
+				value: "",
+				value1: "",
+				search: '',
 				id: null,
-				search: "",
 				options: [{
 						value: '火灾扑救',
 						label: '火灾扑救'
@@ -142,9 +154,9 @@
 						label: '其他'
 					}
 				],
-				value: "",
-				value1: "",
-				checked: 0
+				checked: 0,
+				newList: "",
+				czztList: []
 			};
 		},
 		components: {
@@ -159,11 +171,23 @@
 		},
 		props: ['list', 'pId'],
 		methods: {
+			searchTab() {
+				const params = {
+					pageSize: 100,
+					pageNum: 1,
+					ddmc: this.search,
+					zqlx: this.value,
+					ajzt: this.value1
+				}
+				getBjxx(params).then(res => {
+					console.log(res, '报警信息');
+					this.czztList = res.data.rows
+				})
+			},
 			tab(id) {
 				this.id = id;
 				this.$emit('callback', id);
 			},
-			getZjglList() {}
 		},
 		created() {
 			// 如果pTd存在 就选中pID
@@ -174,6 +198,7 @@
 			else {
 				this.tab(this.list[0].id)
 			}
+			this.searchTab()
 		}
 	};
 </script>
@@ -247,6 +272,22 @@
 			box-sizing: border-box;
 		}
 
+		.bjxxBack {
+			padding: 8px 13px;
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: 50px;
+			background: url(../../../assets/images/bjxxImg.png) center no-repeat;
+			background-size: 100% 50px;
+			margin-top: -10px;
+
+			.bjTetx {
+				flex-grow: 1;
+			}
+		}
+
 		li,
 		a {
 			height: 39px;

app/src/views/PoliceSituation/components/MobilizeStrength.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="maintenance-supervision">
 		<div class="plate">
-			<div>{{zlxx || ''}}</div>
+			<div>{{zlxx}}</div>
 		</div>
 		<div>
 			<div class="row header">

app/src/views/Risk/components/Investigation.vue

@@ -24,55 +24,48 @@
         </div>
         <ul class="item">
             <li class="row" >
-              <span class="time">{{ generalSituation.name }}</span>
-              <span class="person">{{ generalSituation.normalNum  }}</span>
-              <span class="result">{{ generalSituation.errorNum  }}</span>
+              <span class="time">整体情况</span>
+              <span class="person">{{ totalNumber.zcs  }}</span>
+              <span class="result">{{ totalNumber.ycs  }}</span>
             </li>
         </ul>
         <VueSeamlessScroll
-          :data="list"
+          :data="list[checked]"
           :class-option="classOption"
           class="warp"
+          v-if="reload"
         >
           <ul class="item">
-            <li class="row" v-for="(item, index) in list" :key="index">
-                <span class="time">{{ item[0] }}</span>
-                <span class="person">{{ item[1] }}</span>
-                <span class="result"
-                  :style="{
-                    color: resultType(item[2])
-                  }"
-                  >{{ item[2] }}</span
+            <li class="row" v-for="(item, index) in list[checked]" :key="index">
+                <span class="time">{{ item.yhxmxl }}</span>
+                <span class="person">{{ item.zcs }}</span>
+                <span class="result" >{{ item.ycs }}</span
                 >
               </li>
             </ul>
           </VueSeamlessScroll>
       </div>
-      
     </div>
   </template>
   <script>
   import VueSeamlessScroll from "vue-seamless-scroll";
+  import { pctj } from '@/api/risk'
   
   export default {
     name: 'MaintenanceSupervision',
+    props: {
+      qx: String
+    },
     data() {
       return {
         list: [
-          ["防火卷帘", 41, 4],
-          ["室内消火栓系统", 106, 22],
-          ["机械防、排烟系统", 365, 65],
-          ["火灾自动报警系统", 365, 65],
-          ["室内消火栓系统", 365, 65],
-          ["室内消火栓系统", 365, 65],
-          ["室内消火栓系统", 365, 65],
+          [],
+          [],
+          [],
+          []
         ],
-        generalSituation: {
-          name: '整体情况',
-          normalNum: 3700,
-          errorNum: 653,
-        },
         checked: 0,
+        reload: true
       }
     },
     components: {
@@ -81,22 +74,51 @@
     computed: {
       classOption() {
         return {
-          singleHeight: 36,
+          singleHeight: 36
         };
       },
+      totalNumber() {
+        const data = this.list[this.checked]
+        return data.reduce((item, cur) => {
+          return {
+            zcs: item.zcs + cur.zcs,
+            ycs: item.ycs + cur.ycs
+          }
+        }, {zcs: 0, ycs: 0})
+      }
+    },
+    watch: {
+      qx:{
+        handler(){
+          this.loadData()
+        },
+        immediate: true
+      }
     },
     methods: {
       change(idx) {
+        this.reload = false
         this.checked = idx
-        console.log("切换索引", idx)
+        setTimeout(() => {
+          this.reload = true
+        }, 200)
       },
-      resultType(text) {
-        return {
-          "合格": "#23f59d",
-          "不合格": "#df575b",
-          "是": "#23f59d",
-          "否": "#df575b"
-        }[text]
+      loadData() {
+        this.reload = false
+        pctj({
+          pageNum: 1,
+          pageSize: 100,
+          qx: (this.qx === "重庆市" ? "" : this.qx)
+        }).then(res => {
+          const temp = res.data.rows
+          this.list = [
+            temp.filter(item => item.yhxmdl === '消防设施'),
+            temp.filter(item => item.yhxmdl === '生命通道'),
+            temp.filter(item => item.yhxmdl === '用电用气'),
+            temp.filter(item => item.yhxmdl === '消防管理')
+          ]
+            this.reload = true
+        })
       }
     }
   }
@@ -154,6 +176,12 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      text-align: center;
+      // 超出隐藏
+      display: inline-block;
+      overflow: hidden ;
+      text-overflow: ellipsis ;
+      white-space:nowrap;
     }
 
     .result {

app/src/views/Risk/index.vue

@@ -23,7 +23,7 @@
           </div>
         <div>
           <div style="width: 950px; height: 1000px; display: flex; padding-top: 150px;position: relative;">
-            <MapCharts />
+            <MapCharts :qx="qx" @selectArea="area => qx = area" />
             <div style="position: absolute;width: 500px; left: 0px;top: 10px;">
               <search-box :area.sync="qx"/>
             </div>

components/BasicModal/index.vue

@@ -19,6 +19,10 @@ export default {
     width: {
       type: String,
       default: "1456px",
+    }, 
+    name: {
+      type: String,
+      default: "",
     },
     appendToBody: {
       type: Boolean,
@@ -42,6 +46,7 @@ export default {
     :modal-append-to-body="false"
     :visible.sync="visible"
     :top="top"
+    :title="name"
     :width="width"
     v-bind="$attrs"
     v-on="$listeners"