chore: 代码格式修改

app/src/App.vue

@@ -5,7 +5,7 @@ import ScaleBox from "vue2-scale-box";
 <template>
   <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
     <router-view />
-  </ScaleBox >
+  </ScaleBox>
 </template>
 
 <style scoped>
@@ -13,7 +13,7 @@ import ScaleBox from "vue2-scale-box";
   width: 100%;
   height: 100%;
 }
-*{
+* {
   margin: 0;
   padding: 0;
 }

app/src/components/BasicTotal.vue

@@ -1,59 +1,58 @@
 <script>
 export default {
-  name: 'BasicTotal',
+  name: "BasicTotal",
   props: {
     number: {
       type: String,
-      default: ''
+      default: "",
     },
     label: {
       type: String,
-      default: ''
+      default: "",
     },
     unit: {
       type: String,
-      default: ''
-    }
-  }
-}
+      default: "",
+    },
+  },
+};
 </script>
 
-<template >
+<template>
   <div class="layer">
     <slot name="label" v-if="$slots.label"></slot>
     <span v-else>
-    {{ label }}
+      {{ label }}
+    </span>
+
+    <span>
+      <span class="num">
+        <linear-text :text="number" fontSize="16px"></linear-text> </span
+      >{{ unit }}
     </span>
-    
-   <span>
-    <span class="num">
-      <linear-text :text="number" fontSize="16px" ></linear-text>
-    </span>{{ unit }}
-   </span>
   </div>
 </template>
 
-<style scoped lang='less'>
-
+<style scoped lang="less">
 // 渐变色
-.layer{
+.layer {
   display: flex;
   align-items: center;
   height: 31px;
-  background: rgba(0, 213, 255, .13);
+  background: rgba(0, 213, 255, 0.13);
   line-height: 31px;
   color: #fff;
   padding: 3px 5px;
   justify-content: space-between;
 }
 // 渐变
-.num{
+.num {
   display: inline-block;
   margin: 0 8px;
-  background: rgba(0, 213, 255, .33);
+  background: rgba(0, 213, 255, 0.33);
   padding: 0px 5px;
   width: 51px;
   text-align: center;
-  border: 1px solid rgb(0, 106, 255, .54);
+  border: 1px solid rgb(0, 106, 255, 0.54);
 }
 </style>

app/src/components/Headers.vue

@@ -2,14 +2,17 @@
   <div>
     <div class="header">
       <div class="title-card">
-        <li class="bg-img" @click="ConfirmBtn({ id: 1, url: '/home' })" :class="getClass(1)">
+        <li
+          class="bg-img"
+          @click="ConfirmBtn({ id: 1, url: '/home' })"
+          :class="getClass(1)"
+        >
           <img src="../assets/images/Vector.png" alt="" />
           <linear-text
             text="总览"
             startColor="#95CCFF"
             endColor="#fff"
             fontSize="20px"
-            
           />
         </li>
         <ul v-for="(item, index) in titleList" :key="index">
@@ -70,12 +73,12 @@ export default {
         {
           name: "基础信息",
           id: 2,
-          url: '/basic'
+          url: "/basic",
         },
         {
           name: "消防管理",
           id: 3,
-          url:'/fire'
+          url: "/fire",
         },
         {
           name: "风险预警",
@@ -106,10 +109,10 @@ export default {
   methods: {
     ConfirmBtn(item) {
       if (item.url && this.$route.path !== item.url) {
-        this.flag = item.id
-        this.$router.push(item.url)
+        this.flag = item.id;
+        this.$router.push(item.url);
       } else if (this.$route.path !== item.url) {
-        alert("【" + item.name + "】模块开发中...")
+        alert("【" + item.name + "】模块开发中...");
       }
     },
     getClass(v) {
@@ -122,12 +125,12 @@ export default {
   watch: {
     $route: {
       handler(route) {
-        this.flag = route.meta.id
+        this.flag = route.meta.id;
       },
       immediate: true,
-      deep: true
-    }
-  }
+      deep: true,
+    },
+  },
 };
 </script>
 

app/src/components/HiddenDangerTotal.vue

@@ -1,37 +1,44 @@
 <script>
-
 export default {
-  name: 'HiddenDangerTotal',
+  name: "HiddenDangerTotal",
   props: {
     number: {
       type: String,
-      default: ''
+      default: "",
     },
     label: {
       type: String,
-      default: ''
+      default: "",
     },
     unit: {
       type: String,
-      default: ''
-    }
-  }
-}
+      default: "",
+    },
+  },
+};
 </script>
 
-<template >
+<template>
   <div class="hidden-danger-total">
     <div class="hidden-danger-total__number">
-      <linear-text :text="number" fontSize="22px" ></linear-text>
-      <linear-text :text="label" fontSize="12px" style="font-family: 'YouSheBiaoTiHei';" ></linear-text>
+      <linear-text :text="number" fontSize="22px"></linear-text>
+      <linear-text
+        :text="label"
+        fontSize="12px"
+        style="font-family: 'YouSheBiaoTiHei'"
+      ></linear-text>
     </div>
-    <linear-text :text="unit" fontSize="12px" style="font-family: 'YouSheBiaoTiHei';" ></linear-text>
+    <linear-text
+      :text="unit"
+      fontSize="12px"
+      style="font-family: 'YouSheBiaoTiHei'"
+    ></linear-text>
   </div>
 </template>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .hidden-danger-total {
-  background: url('../assets/images/bg003.svg') center no-repeat;
+  background: url("../assets/images/bg003.svg") center no-repeat;
   width: 166px;
   height: 35px;
   display: flex;

app/src/components/Maintenance3D.vue

@@ -330,15 +330,17 @@ function getPie3D(pieData, internalDiameterRatio) {
       min: -1,
       max: "dataMax",
     },
-    title:[{
-        text: '单位：栋',
+    title: [
+      {
+        text: "单位：栋",
         top: 8,
         left: 10,
         textStyle: {
-            fontSize: 12,
-            color:'#5ed3f8',
-        }
-    }],
+          fontSize: 12,
+          color: "#5ed3f8",
+        },
+      },
+    ],
     grid3D: {
       show: false,
       boxHeight: 16,

app/src/components/Monitor3D.vue

@@ -22,7 +22,7 @@ onMounted(() => {
       {
         name: "水压检测点位",
         value: 130,
-      }
+      },
     ],
     0
   );
@@ -135,12 +135,12 @@ onMounted(() => {
 defineExpose({
   legendToggleSelect(name) {
     chart.dispatchAction({
-        type: 'legendToggleSelect',
-        // 图例名称
-        name: name
-    })
-  }
-})
+      type: "legendToggleSelect",
+      // 图例名称
+      name: name,
+    });
+  },
+});
 
 // 生成扇形的曲面参数方程
 function getParametricEquation(
@@ -245,7 +245,8 @@ function getPie3D(pieData, internalDiameterRatio) {
     sumValue += pieData[i].value;
     // console.log(pieData[i].name);
     const seriesItem = {
-      name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+      name:
+        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
       type: "surface",
       parametric: true,
       wireframe: {
@@ -291,7 +292,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   }
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
-    color: [ "#D5C307", "#01ADEF", "#12A647"],
+    color: ["#D5C307", "#01ADEF", "#12A647"],
     legend: {
       top: "200%",
     },

app/src/components/Overhaul3D.vue

@@ -314,15 +314,17 @@ function getPie3D(pieData, internalDiameterRatio) {
         return "";
       },
     },
-    title:[{
-        text: '单位：栋',
+    title: [
+      {
+        text: "单位：栋",
         top: 8,
         left: 10,
         textStyle: {
-            fontSize: 12,
-            color:'#5ed3f8',
-        }
-    }],
+          fontSize: 12,
+          color: "#5ed3f8",
+        },
+      },
+    ],
     xAxis3D: {
       min: -1,
       max: 1,

app/src/components/PieChart3D.vue

@@ -330,15 +330,17 @@ function getPie3D(pieData, internalDiameterRatio) {
         return "";
       },
     },
-    title:[{
-        text: '单位：栋',
+    title: [
+      {
+        text: "单位：栋",
         top: 8,
         left: 10,
         textStyle: {
-            fontSize: 12,
-            color:'#5ed3f8',
-        }
-    }],
+          fontSize: 12,
+          color: "#5ed3f8",
+        },
+      },
+    ],
     xAxis3D: {
       min: -1,
       max: 1,

app/src/components/RiskWarning.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <div ref="chart" class="item" style="width: 175px; height: 231px;" />
+      <div ref="chart" class="item" style="width: 175px; height: 231px" />
     </div>
   </div>
 </template>
@@ -60,7 +60,7 @@ export default {
             avoidLabelOverlap: false,
             label: {
               normal: {
-                color: '#fff',
+                color: "#fff",
                 show: true,
                 position: "outside",
                 formatter: (params) => {
@@ -86,7 +86,7 @@ export default {
                 show: false,
                 textStyle: {
                   fontSize: 14,
-                  color: "#fff"
+                  color: "#fff",
                 },
               },
             },

app/src/components/rate3D.vue

@@ -1,259 +1,267 @@
 <template>
-    <div ref="chart" class="item" style="width: 96px; height:138px" />
-  </template>
-  
-  <script>
-  import * as echarts from "echarts";
-  export default {
-    props: {
-        data: Number,
-        text: String,
-        title: String
-    },
-    data() {
-      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',
-        }
-    }, {
-        text: this.text,
-        x: 'center',
-        top: '42%',
-        textStyle: {
-            fontSize: '12',
-            color: '#fdf914',
-            fontFamily: 'Lato',
-            // foontWeight: '600',
+  <div ref="chart" class="item" style="width: 96px; height: 138px" ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    data: Number,
+    text: String,
+    title: String,
+  },
+  data() {
+    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,
+            },
+          },
+          {
+            text: this.text,
+            x: "center",
+            top: "42%",
+            textStyle: {
+              fontSize: "12",
+              color: "#fdf914",
+              fontFamily: "Lato",
+            },
+          },
+        ],
+        polar: {
+          radius: ["74%", "53%"],
+          center: ["50%", "50%"],
         },
-    }],
-    polar: {
-        radius: ['74%', '53%'],
-        center: ['50%', '50%'],
-    },
-    angleAxis: {
-        max: 100,
-        show: false,
-    },
-    radiusAxis: {
-        type: 'category',
-        show: true,
-        axisLabel: {
-            show: false,
+        angleAxis: {
+          max: 100,
+          show: false,
         },
-        axisLine: {
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
             show: false,
-
-        },
-        axisTick: {
-            show: false
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
         },
-    },
-    series: [
-        {
-            name: '',
-            type: 'bar',
+        series: [
+          {
+            name: "",
+            type: "bar",
             roundCap: true,
             barWidth: 60,
             showBackground: true,
             backgroundStyle: {
-                color: 'rgba(66, 66, 66, .3)',
+              color: "rgba(66, 66, 66, .3)",
             },
             data: [this.data],
-            coordinateSystem: 'polar',
+            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%'],
+              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
+              show: false,
             },
             title: {
-                show: false
+              show: false,
             },
             detail: {
-                show: false
+              show: false,
             },
-            data: [{
+            data: [
+              {
                 value: 95,
-                name: ''
-            }],
+                name: "",
+              },
+            ],
             axisLine: {
-                lineStyle: {
-                    width: 20,
-                    opacity: 0
-                }
+              lineStyle: {
+                width: 20,
+                opacity: 0,
+              },
             },
             axisTick: {
-                show: false
+              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
+              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",
                     },
-                    width: 1,
-                    type: 'solid',
+                  ],
+                  globalCoord: false,
                 },
+                width: 1,
+                type: "solid",
+              },
             },
             axisLabel: {
-                show: false
-            }
-        },
-        {
-            name: '',
-            type: 'pie',
+              show: false,
+            },
+          },
+          {
+            name: "",
+            type: "pie",
             startAngle: 90,
-            radius: ['100%', '82%'],
+            radius: ["100%", "82%"],
             hoverAnimation: false,
-            center: ['50%', '50%'],
+            center: ["50%", "50%"],
             itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
-                    },
-                    color: 'rgba(66, 66, 66, .4)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(66, 66, 66, .4)",
+                shadowBlur: 10,
+                shadowColor: "rgba(253, 249, 20, .3)",
+              },
             },
-            data: [{
+            data: [
+              {
                 value: 100,
-
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "pie",
             startAngle: 90,
-            radius: ['62.5%', '64%'],
+            radius: ["62.5%", "64%"],
             hoverAnimation: false,
-            center: ['50%', '50%'],
+            center: ["50%", "50%"],
             itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
-                    },
-                    color: 'rgba(66, 66, 66, .3)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(66, 66, 66, .3)",
+                shadowBlur: 10,
+                shadowColor: "rgba(253, 249, 20, .3)",
+              },
             },
-            data: [{
+            data: [
+              {
                 value: 100,
-
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "pie",
             startAngle: 90,
-            radius: ['64.5%', '65.8%'],
+            radius: ["64.5%", "65.8%"],
             hoverAnimation: false,
-            center: ['50%', '50%'],
+            center: ["50%", "50%"],
             itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
-                    },
-                    color: 'rgba(66, 66, 66, .2)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(66, 66, 66, .2)",
+                shadowBlur: 10,
+                shadowColor: "rgba(253, 249, 20, .3)",
+              },
             },
-            data: [{
+            data: [
+              {
                 value: 100,
-
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "pie",
             startAngle: 90,
-            radius: ['66.5%', '67.5%'],
+            radius: ["66.5%", "67.5%"],
             hoverAnimation: false,
-            center: ['50%', '50%'],
+            center: ["50%", "50%"],
             itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
-                    },
-                    color: 'rgba(66, 66, 66, .1)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(66, 66, 66, .1)",
+                shadowBlur: 10,
+                shadowColor: "rgba(253, 249, 20, .3)",
+              },
             },
-            data: [{
+            data: [
+              {
                 value: 100,
-
-            }]
-        },
-    ]
+              },
+            ],
+          },
+        ],
+      };
+      this.chart.setOption(option);
+      //自适应图表
+      window.onresize = this.chart.resize;
+    },
+    numb() {
+      // myChart.setOption(option, true);
+    },
+  },
 };
-        this.chart.setOption(option);
-        //自适应图表
-        window.onresize = this.chart.resize;
-      },
-       numb(){
-    
-    myChart.setOption(option, true)
-},
+</script>
 
-    }
-    
-  };
-  </script>
-  
-  <style scoped></style>
-  
+<style scoped></style>

app/src/components/unit3D.vue

@@ -330,15 +330,17 @@ function getPie3D(pieData, internalDiameterRatio) {
         return "";
       },
     },
-    title:[{
-        text: '单位：栋',
+    title: [
+      {
+        text: "单位：栋",
         top: -4,
         right: 30,
         textStyle: {
-            fontSize: 12,
-            color:'#5ed3f8',
-        }
-    }],
+          fontSize: 12,
+          color: "#5ed3f8",
+        },
+      },
+    ],
     xAxis3D: {
       min: -1,
       max: 1,
@@ -409,7 +411,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   background-size: 100% 100%;
   left: calc(50% - 145px);
   bottom: 9%;
-  left:30px;
+  left: 30px;
 }
 
 .container::before {

app/src/layouts/BasicLayout.vue

@@ -1,21 +1,21 @@
 <script>
 import Headers from "@/components/Headers.vue";
 export default {
-  name: 'BasicLayout',
+  name: "BasicLayout",
   components: {
-    Headers
-  }
-}
+    Headers,
+  },
+};
 </script>
 
-<template >
+<template>
   <div class="basic-layout">
     <Headers />
     <router-view />
   </div>
 </template>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .basic-layout {
   background: url("@/assets/images/homebg.png") center no-repeat;
   background-size: 100% 100%;

app/src/main.js

@@ -3,8 +3,8 @@ import { createPinia, PiniaVuePlugin } from "pinia";
 import DataVComponent from "@zhgkpt/components";
 import App from "./App.vue";
 import router from "./router";
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 import "./assets/css/main.css";
 
 Vue.use(ElementUI);

app/src/router/index.js

@@ -1,10 +1,10 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import BasicLayout from '@/layouts/BasicLayout.vue'
+import BasicLayout from "@/layouts/BasicLayout.vue";
 import HomePage from "../views/Home/index.vue";
 import DetailPage from "../views/Detail/index.vue";
-import Basic from '../views/Basic/index.vue'
-import Fire from '../views/Fire/index.vue'
+import Basic from "../views/Basic/index.vue";
+import Fire from "../views/Fire/index.vue";
 Vue.use(VueRouter);
 
 const router = new VueRouter({
@@ -15,43 +15,42 @@ const router = new VueRouter({
       path: "/",
       name: "basic-layout",
       component: BasicLayout,
-      redirect: '/detail',
+      redirect: "/detail",
       children: [
         {
-          path: '/home',
-          name: 'home-page',
+          path: "/home",
+          name: "home-page",
           component: HomePage,
           meta: {
             id: 1,
-          }
+          },
         },
         {
-          path: '/detail',
-          name: 'detail-page',
+          path: "/detail",
+          name: "detail-page",
           component: DetailPage,
           meta: {
             id: -1,
-          }
+          },
         },
         {
-          path: '/basic',
-          name: 'basic',
+          path: "/basic",
+          name: "basic",
           component: Basic,
           meta: {
             id: 2,
-          }
+          },
         },
         {
-          path: '/fire',
-          name: 'fire',
+          path: "/fire",
+          name: "fire",
           component: Fire,
           meta: {
             id: 3,
-          }
-        }
-
-      ]
-    }
+          },
+        },
+      ],
+    },
   ],
 });
 

app/src/views/Basic/components/BuildNum.vue

@@ -1,84 +1,84 @@
 <template>
-    <div>
-        <div class="list">
-            <ul class="img"  v-for="(item,index) in list" :key="index">
-                <li class="img-box">
-                    <span class="text">{{ item.val }}</span>
-                </li>
-                <div>{{ item.name }}</div>
-            </ul>
-        </div>
+  <div>
+    <div class="list">
+      <ul class="img" v-for="(item, index) in list" :key="index">
+        <li class="img-box">
+          <span class="text">{{ item.val }}</span>
+        </li>
+        <div>{{ item.name }}</div>
+      </ul>
     </div>
+  </div>
 </template>
 
-<script >
-export default{
-data(){
-    return{
-        list:[
-            {
-                name:'高层建筑',
-                val:1885,
-            },
-            {
-                name:'超高层建筑',
-                val:1885,
-            },
-            {
-                name:'高层公共建筑',
-                val:1885,
-            },
-            {
-                name:'高层住宅建筑',
-                val:1885,
-            },
-            {
-                name:'一类高层公共建筑',
-                val:1885,
-            },
-            {
-                name:'二类高层公共建筑',
-                val:1885,
-            },
-            {
-                name:'一类高层住宅建筑',
-                val:1885,
-            },
-            {
-                name:'二类高层住宅建筑',
-                val:1885,
-            },
-        ]
-    }
-}
-}
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          name: "高层建筑",
+          val: 1885,
+        },
+        {
+          name: "超高层建筑",
+          val: 1885,
+        },
+        {
+          name: "高层公共建筑",
+          val: 1885,
+        },
+        {
+          name: "高层住宅建筑",
+          val: 1885,
+        },
+        {
+          name: "一类高层公共建筑",
+          val: 1885,
+        },
+        {
+          name: "二类高层公共建筑",
+          val: 1885,
+        },
+        {
+          name: "一类高层住宅建筑",
+          val: 1885,
+        },
+        {
+          name: "二类高层住宅建筑",
+          val: 1885,
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.list{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    text-align: center;
-    align-items: center;
-    // line-height: 10px;
-    margin: 26px 0;
-    .img{
-        width:110px;
-        height: 124px;
-        margin-top: 6px;
-        .img-box{
-            width: 80px;
-            height: 50px;
-            background: url('../../../assets/images/build.png') no-repeat;
-            margin-left: 10px;
-            margin-bottom: 6px;
-        }
-        .text{
-            font-size: 22px;
-            text-align: center;
-            margin-left: 17px;
-        }
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  // line-height: 10px;
+  margin: 26px 0;
+  .img {
+    width: 110px;
+    height: 124px;
+    margin-top: 6px;
+    .img-box {
+      width: 80px;
+      height: 50px;
+      background: url("../../../assets/images/build.png") no-repeat;
+      margin-left: 10px;
+      margin-bottom: 6px;
+    }
+    .text {
+      font-size: 22px;
+      text-align: center;
+      margin-left: 17px;
     }
+  }
 }
-</style>
+</style>

app/src/views/Basic/components/BuildingStatistics.vue

@@ -1,172 +1,131 @@
 <template>
-    <div>
-      <div class="row header">
-          <span class="type">序号</span>
-          <span class="count">建筑名称</span>
-          <span class="time">建筑高度
-            <img src="../../../assets/images/Group 1321314644.png" alt="">
-          </span>
-          <span class="unit">建筑面积
-            <img src="../../../assets/images/Group 1321314644.png" alt="">
-          </span>
-        </div>
-        <VueSeamlessScroll
-          :data="list"
-          :class-option="classOption"
-          class="warp"
-        >
-          <ul class="item">
-          <li class="row" v-for="(item, index) in list" :key="index">
-              <span class="type">{{ index+1 }}</span>
-              <span class="count">{{ item[0] }}</span>
-              <span class="time">{{ item[1] }}</span>
-              <span class="unit">{{ item[2] }}</span>
-            </li>
-          </ul>
-        </VueSeamlessScroll>
+  <div>
+    <div class="row header">
+      <span class="type">序号</span>
+      <span class="count">建筑名称</span>
+      <span class="time"
+        >建筑高度
+        <img src="../../../assets/images/Group 1321314644.png" alt="" />
+      </span>
+      <span class="unit"
+        >建筑面积
+        <img src="../../../assets/images/Group 1321314644.png" alt="" />
+      </span>
     </div>
-    </template>
-    
-    <script>
-    import VueSeamlessScroll from "vue-seamless-scroll";
-    export default {
-      name: "BuildingStatistics",
-      components: {
-        VueSeamlessScroll,
-      },
-      data() {
-        return {
-          list: [
-            [
-              "国泰艺术中心",
-              "59m",
-              "200m",
-            ],
-            [
-            "人民大礼堂",
-              "59m",
-              "200m",
-            ],
-            [
-            "重庆大剧院",
-              "59m",
-              "200m",
-            ],
-            [
-            "环球艺术中心",
-              "59m",
-              "200m",
-            ],
-            [
-            "重庆大剧院",
-              "59m",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "59m",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "59m",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "59m",
-              "200m",
-            ],
-            [
-            "国泰艺术中心",
-              "59m",
-              "200m",
-            ],
-          ],
-        };
-      },
-      computed: {
-        classOption() {
-          return {
-            singleHeight: 51,
-          };
-        },
-      }
+    <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+      <ul class="item">
+        <li class="row" v-for="(item, index) in list" :key="index">
+          <span class="type">{{ index + 1 }}</span>
+          <span class="count">{{ item[0] }}</span>
+          <span class="time">{{ item[1] }}</span>
+          <span class="unit">{{ item[2] }}</span>
+        </li>
+      </ul>
+    </VueSeamlessScroll>
+  </div>
+</template>
+
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "BuildingStatistics",
+  components: {
+    VueSeamlessScroll,
+  },
+  data() {
+    return {
+      list: [
+        ["国泰艺术中心", "59m", "200m"],
+        ["人民大礼堂", "59m", "200m"],
+        ["重庆大剧院", "59m", "200m"],
+        ["环球艺术中心", "59m", "200m"],
+        ["重庆大剧院", "59m", "200m"],
+        ["国泰艺术中心", "59m", "200m"],
+        ["国泰艺术中心", "59m", "200m"],
+        ["国泰艺术中心", "59m", "200m"],
+        ["国泰艺术中心", "59m", "200m"],
+      ],
     };
-    </script>
-    <style scoped lang='less'>
-    .warp {
-    height: 521px;
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 51,
+      };
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.warp {
+  height: 521px;
+  margin: 0 auto;
+  overflow: hidden;
+  .item {
+    list-style: none;
+    padding: 0;
     margin: 0 auto;
-    overflow: hidden;
-      .item {
-        list-style: none;
-        padding: 0;
-        margin: 0 auto;
-        cursor: pointer;
-      }
-    }
-  
-  .header {
-    color: #fff !important;
-    height: 38px !important;
-    background-color: rgba(0, 163, 255, 0.3) !important;
-    margin-top: 2px;
-    letter-spacing: 1px;
-    .is_notice {
-      line-height: 19px;
-      font-size: 10px;
-    }
+    cursor: pointer;
   }
-  
-  li.row > span {
-    text-align: center;
-    font-size: 14x;
-    position: relative;
-    display: inline-block;
+}
+
+.header {
+  color: #61DBFF !important;
+  height: 38px !important;
+  background-color: rgba(0, 163, 255, 0.3) !important;
+  margin-top: 2px;
+  letter-spacing: 1px;
+  .is_notice {
+    line-height: 19px;
+    font-size: 10px;
   }
-  
-  li.row {
+}
+
+li.row > span {
+  text-align: center;
+  font-size: 14x;
+  position: relative;
+  display: inline-block;
+}
+
+li.row {
   //   border-bottom: 1px dotted #1d525f;
-    box-sizing: border-box;
-  }
-  
-  .row,
-  li,
-  a {
-    display: block;
-    height: 46px;
-    line-height: 46px;
+  box-sizing: border-box;
+}
+
+.row,
+li,
+a {
+  display: block;
+  height: 46px;
+  line-height: 46px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin-top: 5px;
+  .time,
+  .type,
+  .count,
+  .unit {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    font-size: 14px;
-    background-color: rgba(0, 0, 0, 0.2);
-    color: #44F1FF;
-    margin-top: 5px;
-    .time,
-    .type,
-    .count,
-    .unit {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  
-    .time {
-      flex: 0.2;
-    }
-    .type {
-      flex: 0.12;
-    }
-    .count {
-      flex: 0.2;
-    }
-    .unit {
-      flex: 0.35;
-    }
-  
   }
-    </style>
-    
-    
+
+  .time {
+    flex: 0.2;
+  }
+  .type {
+    flex: 0.12;
+  }
+  .count {
+    flex: 0.2;
+  }
+  .unit {
+    flex: 0.35;
+  }
+}
+</style>

app/src/views/Basic/components/ChronologicDistributionStatistics.vue

@@ -1,14 +1,14 @@
-<template >
-  <div style="height: 260px;" ref="chronologicDistributionChart"></div>
+<template>
+  <div style="height: 260px" ref="chronologicDistributionChart"></div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 
 export default {
   name: "ChronologicDistributionStatistics",
   mounted() {
-    const chart = echarts.init(this.$refs.chronologicDistributionChart)
+    const chart = echarts.init(this.$refs.chronologicDistributionChart);
     let data = [
       [new Date(`1990-01-01 00:00:00`), 801],
       [new Date(`1991-01-01 00:00:00`), 756],
@@ -53,111 +53,116 @@ export default {
     ];
     chart.setOption({
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         position: function (pt) {
-          return [pt[0], '30%'];
+          return [pt[0], "30%"];
         },
         formatter(value) {
-          console.log(value)
-          return `<span style="color:#fff;">${new Date(value[0].axisValueLabel).getFullYear()}年<br/>
-          ${value[0].marker} ${value[0].seriesName} <span style='color:#FAFF12;font-size:18px;font-weight:bold;'>${value[0].data[1]}</span> 栋<span>`
+          console.log(value);
+          return `<span style="color:#fff;">${new Date(
+            value[0].axisValueLabel
+          ).getFullYear()}年<br/>
+          ${value[0].marker} ${
+            value[0].seriesName
+          } <span style='color:#FAFF12;font-size:18px;font-weight:bold;'>${
+            value[0].data[1]
+          }</span> 栋<span>`;
         },
-        backgroundColor: 'rgba(0,224,255,0.46)',
-        borderColor: 'rgba(0,213,255, .6)',
-        extraCssText: 'z-index: 1000;',
-        confine: true
+        backgroundColor: "rgba(0,224,255,0.46)",
+        borderColor: "rgba(0,213,255, .6)",
+        extraCssText: "z-index: 1000;",
+        confine: true,
       },
       grid: {
-        right: '10px',
+        right: "10px",
         // top: '10px',
-        bottom: '20px'
+        bottom: "20px",
       },
-      
-      title:{
-          top:'5%',
-          right:'2%',
-          text:'单位：栋',
-          textStyle: {
-          align: 'center',
-          color: '#fff',
-          fontSize: 12
+
+      title: {
+        top: "5%",
+        right: "2%",
+        text: "单位：栋",
+        textStyle: {
+          align: "center",
+          color: "#fff",
+          fontSize: 12,
+        },
       },
-    },
       xAxis: [
         {
-          type: 'time',
+          type: "time",
           gridIndex: 0,
           splitNumber: data.length / 10,
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#35709caa'
-            }
+              color: "#35709caa",
+            },
           },
           axisLabel: {
-            color: '#fff',
+            color: "#fff",
             show: true,
             formatter: function (value) {
-                return new Date(value).getFullYear() + '年';
+              return new Date(value).getFullYear() + "年";
             },
-            interval: 9
+            interval: 9,
           },
           axisTick: {
-            show: false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: '#35709caa'
-            }
-          }
-        }
+              color: "#35709caa",
+            },
+          },
+        },
       ],
       yAxis: {
-        type: 'value',
-        boundaryGap:[0,'20%'],
+        type: "value",
+        boundaryGap: [0, "20%"],
         splitLine: {
           show: true,
           lineStyle: {
-            color: '#35709caa',
-            type: 'dashed'
-          }
+            color: "#35709caa",
+            type: "dashed",
+          },
         },
         axisLabel: {
-          color: '#fff'
-        }
+          color: "#fff",
+        },
       },
       series: [
         {
-          name: '高层建筑数量',
-          type: 'line',
+          name: "高层建筑数量",
+          type: "line",
           // smooth: true,
-          symbol: 'circle',
+          symbol: "circle",
           itemStyle: {
-            color: '#0770FF'
+            color: "#0770FF",
           },
-          stack: 'a',
+          stack: "a",
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: 'rgba(58,77,233,0.8)'
+                color: "rgba(58,77,233,0.8)",
               },
               {
                 offset: 1,
-                color: 'rgba(58,77,233,0.3)'
-              }
-            ])
+                color: "rgba(58,77,233,0.3)",
+              },
+            ]),
           },
-          data: data
-        }
-      ]
-    })
-  }
-}
+          data: data,
+        },
+      ],
+    });
+  },
+};
 </script>
 
-
-<style scoped lang='less'>
+<style scoped lang="less">
 .unit {
   padding: 10px;
   font-size: 12px;

app/src/views/Basic/components/HeightDistribution.vue

@@ -1,173 +1,193 @@
 <template>
+  <div>
     <div>
-      <div>
-        <div ref="chart" class="item" style="height: 300px" />
-      </div>
+      <div ref="chart" class="item" style="height: 300px" />
     </div>
-  </template>
-  
-  <script>
-  import * as echarts from "echarts";
-  export default {
-    data() {
-      return {
-        chart: null,
-        timer: "",
-      }
-    },
-    mounted() {
-      // 初始化图表实例
-      const chartDom = this.$refs.chart;
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      timer: "",
+    };
+  },
+  mounted() {
+    // 初始化图表实例
+    const chartDom = this.$refs.chart;
     //   // 初始化图表实例
-      this.chart = echarts.init(chartDom);
-      this.initChart();
-      
-    },
-    methods: {
-      initChart(data) {
-        const datalsit = [220, 182, 191, 234, 290, 330, 310]
-        const sideData = datalsit.map(item => item + 4.5)
-        const option = {
-            backgroundColor: "#041730",
-            tooltip: {
-        trigger: 'axis',
-        formatter: "{b} : {c}",
-        axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+    this.chart = echarts.init(chartDom);
+    this.initChart();
+  },
+  methods: {
+    initChart(data) {
+      const datalsit = [220, 182, 191, 234, 290, 330, 310];
+      const sideData = datalsit.map((item) => item + 4.5);
+      const option = {
+        backgroundColor: "#041730",
+        tooltip: {
+          trigger: "axis",
+          formatter: "{b} : {c}",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        
-         },
-         title:{
-            top:'5%',
-            right:'2%',
-            text:'单位：栋',
-            textStyle: {
-            align: 'center',
-            color: '#fff',
-            fontSize: 12
-        }
+        title: {
+          top: "5%",
+          right: "2%",
+          text: "单位：栋",
+          textStyle: {
+            align: "center",
+            color: "#fff",
+            fontSize: 12,
+          },
         },
-        
-      grid: {
-        right: '10px',
-      },
-    xAxis: {
-        data: ['30m以下', '30~50m', '50~80m', '80~100m', '100m以上'],
-        //坐标轴
-        axisLine: {
-            lineStyle: {
-                color: '#3eb2e8'
-            }
+
+        grid: {
+          right: "10px",
         },
-        //坐标值标注
-        axisLabel: {
+        xAxis: {
+          data: ["30m以下", "30~50m", "50~80m", "80~100m", "100m以上"],
+          //坐标轴
+          axisLine: {
+            lineStyle: {
+              color: "#3eb2e8"
+            },
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          //坐标值标注
+          axisLabel: {
             show: true,
             textStyle: {
-                color: '#fff',
-            }
-        }
-    },
-    yAxis: {
-      
-        //坐标轴
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            //y轴刻度线
-            show: false
+              color: "#fff",
+            },
           },
+        },
+        yAxis: {
+          //坐标轴
           axisLine: {
-            //y轴
-            show: false
+            show: false,
           },
-        //坐标值标注
-        axisLabel: {
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          //坐标值标注
+          axisLabel: {
             show: true,
             textStyle: {
-                color: '#fff',
-            }
-        },
-        //分格线
-        splitLine: {
+              color: "#fff",
+            },
+          },
+          //分格线
+          splitLine: {
             lineStyle: {
-                color: '#4784e8'
-            }
-        }
-    },
-  
-    series: [{
-       
-        tooltip: {
-            show: false
-            
-        },
-        type: 'bar',
-        barWidth:6,
-        itemStyle: {
-            normal: {
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                    offset: 0,
-                    color: "#0B4EC3" // 0% 处的颜色
-                }, {
-                    offset: 0.6,
-                    color: "#138CEB" // 60% 处的颜色
-                }, {
-                    offset: 1,
-                    color: "#17AAFE" // 100% 处的颜色
-                }], false)
-            }
-        },
-        data: data,
-        barGap: 0
-    }, {
-        type: 'bar',
-        barWidth: 20,
-        itemStyle: {
-            normal: {
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                    offset: 0,
-                    color: "#09337C" // 0% 处的颜色
-                }, {
-                    offset: 0.6,
-                    color: "#0761C0" // 60% 处的颜色
-                }, {
-                    offset: 1,
-                    color: "#0575DE" // 100% 处的颜色
-                }], false)
-            }
-        },
-        barGap: 0,
-        data: sideData
-    }, {
-        name: 'b',
-        tooltip: {
-            show: false
-        },
-        type: 'pictorialBar',
-        itemStyle: {
-            borderWidth: 1,
-            borderColor: '#0571D5',
-            color: '#1779E0'
+              color: "#4784e8",
+              type: 'dashed'
+            },
+          },
         },
-        symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
-        symbolSize: ['30', '12'],
-        symbolOffset: ['0', '-11'],
-        //symbolRotate: -5,
-        symbolPosition: 'end',
-        data: data,
-        z: 3
-    }]
-        };
-  
-        this.chart.setOption(option);
-        //自适应图表
-        window.onresize = this.chart.resize;
-      },
-   
+        series: [
+          {
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 6,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#0B4EC3", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#138CEB", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#17AAFE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: data,
+            barGap: 0,
+          },
+          {
+            type: "bar",
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+          },
+          {
+            name: "b",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#1779E0",
+            },
+            symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
+            symbolSize: ["30", "12"],
+            symbolOffset: ["0", "-11"],
+            //symbolRotate: -5,
+            symbolPosition: "end",
+            data: data,
+            z: 3,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+      //自适应图表
+      window.onresize = this.chart.resize;
     },
-  };
-  </script>
-  
-  <style scoped></style>
-  
+  },
+};
+</script>
+
+<style scoped></style>

app/src/views/Basic/components/Regional.vue

@@ -1,121 +1,72 @@
 <template>
   <div>
     <div class="row header">
-        <span class="type">序号</span>
-        <span class="count">区域</span>
-        <span class="time">总数(栋)</span>
-        <span class="unit">有无物联网</span>
-        <span class="is_notice" >占比%</span>
-      </div>
-      <VueSeamlessScroll
-        :data="list"
-        :class-option="classOption"
-        class="warp"
-      >
-        <ul class="item">
+      <span class="type">序号</span>
+      <span class="count">区域</span>
+      <span class="time">总数(栋)</span>
+      <span class="unit">有物联网(栋)</span>
+      <span class="is_notice">占比%</span>
+    </div>
+    <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+      <ul class="item">
         <li class="row" v-for="(item, index) in list" :key="index">
-            <span class="type">{{ index+1 }}</span>
-            <span class="count">{{ item[0] }}</span>
-            <span class="time">{{ item[1] }}</span>
-            <span class="unit">{{ item[2] }}</span>
-            <span class="is_notice">{{ item[3] }}</span>
-          </li>
-        </ul>
-      </VueSeamlessScroll>
+          <span class="type">{{ index + 1 }}</span>
+          <span class="count">{{ item[0] }}</span>
+          <span class="time">{{ item[1] }}</span>
+          <span class="unit">{{ item[2] }}</span>
+          <span class="is_notice">{{ item[3] }}</span>
+        </li>
+      </ul>
+    </VueSeamlessScroll>
   </div>
-  </template>
-  
-  <script>
-  import VueSeamlessScroll from "vue-seamless-scroll";
-  export default {
-    name: "RegionalComp",
-    components: {
-      VueSeamlessScroll,
-    },
-    data() {
+</template>
+
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "RegionalComp",
+  components: {
+    VueSeamlessScroll,
+  },
+  data() {
+    return {
+      list: [
+        ["万州区", "1200", "123", "23%"],
+        ["九龙坡起", "1598", "47", "35%"],
+        ["南川区", "1290", "38", "12%"],
+        ["璧山区", "1198", "200", "8%"],
+        ["渝北区", "6573", "89", "48%"],
+        ["渝北区", "6573", "120", "48%"],
+        ["渝北区", "6573", "134", "48%"],
+        ["渝北区", "6573", "145", "48%"],
+        ["渝北区", "6573", "190", "48%"],
+      ],
+    };
+  },
+  computed: {
+    classOption() {
       return {
-        list: [
-          [
-            "万州区",
-            "1200",
-            "有",
-            "23%",
-          ],
-          [
-          "九龙坡起",
-            "1598",
-            "有",
-            "35%",
-          ],
-          [
-          "南川区",
-            "1290",
-            "有",
-            "12%",
-          ],
-          [
-          "璧山区",
-            "1198",
-            "有",
-            "8%",
-          ],
-          [
-          "渝北区",
-            "6573",
-            "有",
-            "48%",
-          ],
-          [
-          "渝北区",
-            "6573",
-            "有",
-            "48%",
-          ],
-          [
-          "渝北区",
-            "6573",
-            "有",
-            "48%",
-          ],
-          [
-          "渝北区",
-            "6573",
-            "有",
-            "48%",
-          ],
-          [
-          "渝北区",
-            "6573",
-            "有",
-            "48%",
-          ],
-        ],
+        singleHeight: 51,
       };
     },
-    computed: {
-      classOption() {
-        return {
-          singleHeight: 51,
-        };
-      },
-    },
-  };
-  </script>
-  <style scoped lang='less'>
-  .warp {
+  },
+};
+</script>
+<style scoped lang="less">
+.warp {
   height: 521px;
   margin: 0 auto;
   overflow: hidden;
-    .item {
-      list-style: none;
-      padding: 0;
-      margin: 0 auto;
-      cursor: pointer;
-    }
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
   }
+}
 
 .header {
-  color: #fff !important;
+  color: #61DBFF !important;
   height: 38px !important;
   background-color: rgba(0, 163, 255, 0.3) !important;
   margin-top: 2px;
@@ -134,7 +85,7 @@ li.row > span {
 }
 
 li.row {
-//   border-bottom: 1px dotted #1d525f;
+  //   border-bottom: 1px dotted #1d525f;
   box-sizing: border-box;
 }
 
@@ -149,7 +100,7 @@ a {
   align-items: center;
   font-size: 14px;
   background-color: rgba(0, 0, 0, 0.2);
-  color: #44F1FF;
+  color: #fff;
   margin-top: 5px;
   .time,
   .type,
@@ -171,13 +122,11 @@ a {
     flex: 0.2;
   }
   .unit {
+    color: #61DBFF;
     flex: 0.35;
   }
   .is_notice {
     flex: 0.15;
   }
-
 }
-  </style>
-  
-  
+</style>

app/src/views/Basic/index.vue

@@ -1,56 +1,50 @@
-
-<template >
-    <div style="padding: 0px 35px; display: flex; justify-content: space-between"
-        >
-        <div>
-            <border-panel
-              height="310px"
-              style="margin-bottom: 6px"
-              title="高层建筑统计"
-            >
-            <BuildNum/>
-            </border-panel>
-            <border-panel
-              height="320px"
-              style="margin-bottom: 6px"
-              title="年代分布统计"
-            >
-            <ChronologicDistributionStatistics />
-            </border-panel>
-            <border-panel height="310px" title="高度分布统计">
-            <HeightDistribution/>
-            </border-panel>
-          </div>
-        <div>
-          <border-panel
-              height="521px"
-              style="margin-bottom: 6px"
-              title="区域分布"
-            > 
-            <Regional/>
-            </border-panel>
-            <border-panel
-              height="421px"
-              style="margin-bottom: 6px"
-              title="建筑统计"
-            >
-          <BuildingStatistics/>
-            </border-panel>
-        </div>
+<template>
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+    <div>
+      <border-panel
+        height="310px"
+        style="margin-bottom: 6px"
+        title="高层建筑统计"
+      >
+        <BuildNum />
+      </border-panel>
+      <border-panel
+        height="320px"
+        style="margin-bottom: 6px"
+        title="年代分布统计"
+      >
+        <ChronologicDistributionStatistics />
+      </border-panel>
+      <border-panel height="310px" title="高度分布统计">
+        <HeightDistribution />
+      </border-panel>
+    </div>
+    <div>
+      <border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
+        <Regional />
+      </border-panel>
+      <border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
+        <BuildingStatistics />
+      </border-panel>
     </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';
-  export default {
-    name: 'BasicPage',
-    components:{BuildNum,Regional,BuildingStatistics,HeightDistribution,ChronologicDistributionStatistics}
-  }
-  </script>
-  
-  <style scoped lang='less'>
-  </style>
-  
+  </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";
+export default {
+  name: "BasicPage",
+  components: {
+    BuildNum,
+    Regional,
+    BuildingStatistics,
+    HeightDistribution,
+    ChronologicDistributionStatistics,
+  },
+};
+</script>
+
+<style scoped lang="less"></style>

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

@@ -1,133 +1,130 @@
 <template>
-    <div class="building">
-        <div >
-            <div class="building-info">
-                <ul>
-                    <li>
-                        <span>建筑名称：</span>
-                        <p>重庆大剧院</p>
-                    </li>
-                    <li>
-                        <span>详细地址：</span>
-                        <p>江北区文华街东路2号</p>
-                    </li>
-                    <li>
-                        <span>建成年代：</span>
-                        <p>2009年</p>
-                    </li>
-                    <li>
-                        <span>消防安全管理形式：</span>
-                        <p>xxx</p>
-                    </li>
-                    <li>
-                        <span>管理主体：</span>
-                        <p>重庆大剧院管理有限公司</p>
-                    </li>
-                  
-                </ul>
-                <ul>
-                    <li>
-                        <span>建筑楼层：</span>
-                        <p>地上7层</p>
-                    </li>
-                    <li>
-                        <span>使用功能：</span>
-                        <p>公共建筑</p>
-                    </li>
-                    <li>
-                        <span>建筑面积：</span>
-                        <p>103307.10m²</p>
-                    </li>
-                    <li>
-                        <span>管理人联系：</span>
-                        <p>张三 13999999999</p>
-                    </li>
-                    <li>
-                        <span>是否有维保：</span>
-                        <p>是</p>
-                    </li>
-                </ul>
-            </div>
-            <div class="maintenance">
-              <span class="unit-info">维保单位：</span>
-              <p class="unit">张恒峰建筑消防维保有限公司</p>
-             </div>
-        </div>
-        <div class="unit-img">
-            <div>建筑附件：</div>
-            <div class="accessory-img">
-                <img src="../../../assets/images/Rectangle 3726.png" alt="">
-                <img src="../../../assets/images/Rectangle 3728.png" alt="">
-                <img src="../../../assets/images/Rectangle 3726.png" alt="">
-                <img src="../../../assets/images/Rectangle 3728.png" alt="">
-                <img src="../../../assets/images/Rectangle 3728.png" alt="">
-            </div>
-        </div>
+  <div class="building">
+    <div>
+      <div class="building-info">
+        <ul>
+          <li>
+            <span>建筑名称：</span>
+            <p>重庆大剧院</p>
+          </li>
+          <li>
+            <span>详细地址：</span>
+            <p>江北区文华街东路2号</p>
+          </li>
+          <li>
+            <span>建成年代：</span>
+            <p>2009年</p>
+          </li>
+          <li>
+            <span>消防安全管理形式：</span>
+            <p>xxx</p>
+          </li>
+          <li>
+            <span>管理主体：</span>
+            <p>重庆大剧院管理有限公司</p>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <span>建筑楼层：</span>
+            <p>地上7层</p>
+          </li>
+          <li>
+            <span>使用功能：</span>
+            <p>公共建筑</p>
+          </li>
+          <li>
+            <span>建筑面积：</span>
+            <p>103307.10m²</p>
+          </li>
+          <li>
+            <span>管理人联系：</span>
+            <p>张三 13999999999</p>
+          </li>
+          <li>
+            <span>是否有维保：</span>
+            <p>是</p>
+          </li>
+        </ul>
+      </div>
+      <div class="maintenance">
+        <span class="unit-info">维保单位：</span>
+        <p class="unit">张恒峰建筑消防维保有限公司</p>
+      </div>
     </div>
+    <div class="unit-img">
+      <div>建筑附件：</div>
+      <div class="accessory-img">
+        <img src="../../../assets/images/Rectangle 3726.png" alt="" />
+        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
+        <img src="../../../assets/images/Rectangle 3726.png" alt="" />
+        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
+        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default{
-    methods:{}
-}
+export default {
+  methods: {},
+};
 </script>
 
 <style lang="less" scoped>
-.building{
-    padding: 20px 12px;
-    font-size: 14px;
+.building {
+  padding: 20px 12px;
+  font-size: 14px;
 }
-.building-info{
-    display: flex;
-    // letter-spacing: 1px;
-    line-height: 31px;
-   
-    ul:first-child{
-        flex: 1;
-    }
-    ul:last-child{
-        width: 190px;
-    }
-    li{
-        overflow: hidden;
-    }
-    p{
-        display: inline-block;
-    }
-    span{
-        color: #78C3CD;
-        font-size: 12px;
-    }
-  
+.building-info {
+  display: flex;
+  // letter-spacing: 1px;
+  line-height: 31px;
+
+  ul:first-child {
+    flex: 1;
+  }
+  ul:last-child {
+    width: 190px;
+  }
+  li {
+    overflow: hidden;
+  }
+  p {
+    display: inline-block;
+  }
+  span {
+    color: #78c3cd;
+    font-size: 12px;
+  }
 }
-.maintenance{
-    display: flex;
-    margin-top: 10px;
+.maintenance {
+  display: flex;
+  margin-top: 10px;
 }
-.unit{
-       
-        font-size: 14px;
-        width: 200px;
-    }
-    .unit-info{
-        color: #78C3CD;
-        font-size: 12px;
-    }
-.unit-img{
-    display: flex;
-    flex-direction: column;
-    margin-top: 10px;
-    font-size: 12px;
-    color: #78C3CD;
-    img{
-        display: inline-block;
-        margin: 10px 5px;
-        width: 75px;
-        height: 57px;
-    }
- .accessory-img{
+.unit {
+  font-size: 14px;
+  width: 200px;
+}
+.unit-info {
+  color: #78c3cd;
+  font-size: 12px;
+}
+.unit-img {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  font-size: 12px;
+  color: #78c3cd;
+  img {
+    display: inline-block;
+    margin: 10px 5px;
+    width: 75px;
+    height: 57px;
+  }
+  .accessory-img {
     display: flex;
     overflow-x: scroll;
- }
+  }
 }
-</style>
+</style>

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

@@ -1,71 +1,71 @@
 <template>
-    <div class="unit">
-        <!-- 管理单位 -->
-        <div>
-            <div class="building-info">
-                <ul>
-                    <li>
-                        <span>管理形式：</span>
-                        <p>有管理单位（非物业）</p>
-                    </li>
-                    <li>
-                        <span>所属管理：</span>
-                        <p>重庆大剧院管理有限公司</p>
-                    </li>
-                    <li>
-                        <span>消防安全联系人：</span>
-                        <p>王武</p>
-                    </li>
-                </ul>
-                <ul>
-                    <li>
-                        <span>消防安全责任人：</span>
-                        <p>李四</p>
-                    </li>
-                    <li>
-                        <span>消防安全管理人：</span>
-                        <p>王五</p>
-                    </li>
-                    <li>
-                        <span>联系方式：</span>
-                        <p>13556723998</p>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <div>
-            <div class="title">入住单位列表</div>
-            <div>
-                <div class="row header">
-                    <span class="idx">序号</span>
-                    <span class="in_unit">入住单位</span>
-                    <span class="person">责任人</span>
-                    <span class="manage">管理人</span>
-                </div>
-                <VueSeamlessScroll
-                    :data="list"
-                    :class-option="classOption"
-                    class="warp"
-                >
-                    <ul class="item">
-                    <li class="row" v-for="(item, index) in list" :key="index">
-                        <span class="idx">{{ index + 1 }}</span>
-                        <span class="in_unit">{{ item[0] }}</span>
-                        <span class="person">{{ item[1] }}</span>
-                        <span class="manage">{{ item[2] }}</span>
-                    </li>
-                    </ul>
-                </VueSeamlessScroll>
-            </div>
+  <div class="unit">
+    <!-- 管理单位 -->
+    <div>
+      <div class="building-info">
+        <ul>
+          <li>
+            <span>管理形式：</span>
+            <p>有管理单位（非物业）</p>
+          </li>
+          <li>
+            <span>所属管理：</span>
+            <p>重庆大剧院管理有限公司</p>
+          </li>
+          <li>
+            <span>消防安全联系人：</span>
+            <p>王武</p>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <span>消防安全责任人：</span>
+            <p>李四</p>
+          </li>
+          <li>
+            <span>消防安全管理人：</span>
+            <p>王五</p>
+          </li>
+          <li>
+            <span>联系方式：</span>
+            <p>13556723998</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div>
+      <div class="title">入住单位列表</div>
+      <div>
+        <div class="row header">
+          <span class="idx">序号</span>
+          <span class="in_unit">入住单位</span>
+          <span class="person">责任人</span>
+          <span class="manage">管理人</span>
         </div>
+        <VueSeamlessScroll
+          :data="list"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list" :key="index">
+              <span class="idx">{{ index + 1 }}</span>
+              <span class="in_unit">{{ item[0] }}</span>
+              <span class="person">{{ item[1] }}</span>
+              <span class="manage">{{ item[2] }}</span>
+            </li>
+          </ul>
+        </VueSeamlessScroll>
+      </div>
     </div>
+  </div>
 </template>
 
-<script >
+<script>
 import VueSeamlessScroll from "vue-seamless-scroll";
 
 export default {
-  name: 'GementUnit',
+  name: "GementUnit",
   data() {
     return {
       list: [
@@ -77,11 +77,11 @@ export default {
         ["人民大礼堂", "王五", "赵六"],
         ["人民大礼堂", "王五", "赵六"],
         ["人民大礼堂", "王五", "赵六"],
-      ]
-    }
+      ],
+    };
   },
   components: {
-    VueSeamlessScroll
+    VueSeamlessScroll,
   },
   computed: {
     classOption() {
@@ -90,35 +90,35 @@ export default {
       };
     },
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
-.unit{
-   padding: 10px 10px;
-.building-info{
+.unit {
+  padding: 10px 10px;
+  .building-info {
     display: flex;
     // letter-spacing: 1px;
     line-height: 31px;
-   
-    ul:first-child{
-        flex: 1;
+
+    ul:first-child {
+      flex: 1;
     }
-    ul:last-child{
-        width: 190px;                          
+    ul:last-child {
+      width: 190px;
     }
-    li{
-        overflow: hidden;
+    li {
+      overflow: hidden;
     }
-    p{
-        font-size: 14px;
-        display: inline-block;
+    p {
+      font-size: 14px;
+      display: inline-block;
     }
-    span{
-        color: #78C3CD;
-        font-size: 12px;
+    span {
+      color: #78c3cd;
+      font-size: 12px;
     }
-}
+  }
 }
 
 .title {
@@ -133,16 +133,16 @@ export default {
   height: 85px;
   margin: 0 auto;
   overflow: hidden;
-    .item {
-      list-style: none;
-      padding: 0;
-      margin: 0 auto;
-      cursor: pointer;
-    }
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
   }
+}
 
 .header {
-  color: #98DFE9 !important;
+  color: #98dfe9 !important;
   height: 30px !important;
   line-height: 30px !important;
   background-color: rgba(7, 188, 223, 0.8) !important;
@@ -155,7 +155,8 @@ li.row {
   box-sizing: border-box;
 }
 
-.row,li.row {
+.row,
+li.row {
   display: block;
   height: 29px;
   line-height: 29px;

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

@@ -1,27 +1,23 @@
-<template >
+<template>
   <div>
     <div class="row header">
-        <span class="type">隐患类型</span>
-        <span class="count">隐患数量</span>
-        <span class="time">整改期限</span>
-        <span class="unit">管理单位</span>
-        <span class="is_notice" >是否提示<br/>管理单位</span>
-      </div>
-      <VueSeamlessScroll
-        :data="list"
-        :class-option="classOption"
-        class="warp"
-      >
-        <ul class="item">
+      <span class="type">隐患类型</span>
+      <span class="count">隐患数量</span>
+      <span class="time">整改期限</span>
+      <span class="unit">管理单位</span>
+      <span class="is_notice">是否提示<br />管理单位</span>
+    </div>
+    <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+      <ul class="item">
         <li class="row" v-for="(item, index) in list" :key="index">
-            <span class="type">{{ item[0] }}</span>
-            <span class="count">{{ item[1] }}</span>
-            <span class="time">{{ item[2] }}</span>
-            <span class="unit">{{ item[3] }}</span>
-            <span class="is_notice">{{ item[4] }}</span>
-          </li>
-        </ul>
-      </VueSeamlessScroll>
+          <span class="type">{{ item[0] }}</span>
+          <span class="count">{{ item[1] }}</span>
+          <span class="time">{{ item[2] }}</span>
+          <span class="unit">{{ item[3] }}</span>
+          <span class="is_notice">{{ item[4] }}</span>
+        </li>
+      </ul>
+    </VueSeamlessScroll>
   </div>
 </template>
 
@@ -29,7 +25,7 @@
 import VueSeamlessScroll from "vue-seamless-scroll";
 
 export default {
-  name: 'HiddenDanger',
+  name: "HiddenDanger",
   data() {
     return {
       list: [
@@ -39,11 +35,11 @@ export default {
         ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
         ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
         ["安全出口堵塞", "48", "15日", "重庆大剧院管理有限公司", "是"],
-      ]
-    }
+      ],
+    };
   },
   components: {
-    VueSeamlessScroll
+    VueSeamlessScroll,
   },
   computed: {
     classOption() {
@@ -52,21 +48,21 @@ export default {
       };
     },
   },
-}
+};
 </script>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .warp {
   height: 258px;
   margin: 0 auto;
   overflow: hidden;
-    .item {
-      list-style: none;
-      padding: 0;
-      margin: 0 auto;
-      cursor: pointer;
-    }
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
   }
+}
 
 .header {
   color: #fff !important;
@@ -118,7 +114,7 @@ a {
   align-items: center;
   font-size: 14px;
   background-color: rgba(0, 0, 0, 0.2);
-  color: #44F1FF;
+  color: #44f1ff;
   .time,
   .type,
   .count,
@@ -144,6 +140,5 @@ a {
   .is_notice {
     flex: 0.15;
   }
-
 }
 </style>

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

@@ -1,26 +1,19 @@
-<template >
+<template>
   <div>
     <div class="row header">
-        <span class="time">起火时间</span>
-        <span class="person">人员伤亡数量</span>
-        <span class="money">财产损失</span>
-      </div>
-      <VueSeamlessScroll
-        :data="list"
-        :class-option="classOption"
-        class="warp"
-      >
-        <ul class="item">
+      <span class="time">起火时间</span>
+      <span class="person">人员伤亡数量</span>
+      <span class="money">财产损失</span>
+    </div>
+    <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+      <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="money"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
+          <span class="time">{{ item[0] }}</span>
+          <span class="person">{{ item[1] }}</span>
+          <span class="money">{{ item[2] }}</span>
+        </li>
+      </ul>
+    </VueSeamlessScroll>
   </div>
 </template>
 
@@ -28,7 +21,7 @@
 import VueSeamlessScroll from "vue-seamless-scroll";
 
 export default {
-  name: 'HistoricalFire',
+  name: "HistoricalFire",
   data() {
     return {
       list: [
@@ -39,11 +32,11 @@ export default {
         ["09:23 05-14", "2", "2万元"],
         ["09:23 05-14", "4", "5万元"],
         ["09:23 05-14", "6", "8万元"],
-      ]
-    }
+      ],
+    };
   },
   components: {
-    VueSeamlessScroll
+    VueSeamlessScroll,
   },
   computed: {
     classOption() {
@@ -52,21 +45,21 @@ export default {
       };
     },
   },
-}
+};
 </script>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .warp {
   height: 258px;
   margin: 0 auto;
   overflow: hidden;
-    .item {
-      list-style: none;
-      padding: 0;
-      margin: 0 auto;
-      cursor: pointer;
-    }
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
   }
+}
 
 .header {
   color: #fff !important;
@@ -116,7 +109,7 @@ a {
   align-items: center;
   font-size: 14px;
   background-color: rgba(0, 0, 0, 0.2);
-  color: #44F1FF;
+  color: #44f1ff;
   .time,
   .person,
   .money {

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

@@ -1,19 +1,11 @@
-<template >
+<template>
   <div class="maintenance-supervision">
     <div class="maintenance-supervision_header">
       <button-group @change="change">
-        <button-group-item >
-          自查情况
-        </button-group-item>
-        <button-group-item >
-          监督检查
-        </button-group-item>
-        <button-group-item >
-          网络排查
-        </button-group-item>
-        <button-group-item >
-          维保概况
-        </button-group-item>
+        <button-group-item> 自查情况 </button-group-item>
+        <button-group-item> 监督检查 </button-group-item>
+        <button-group-item> 网络排查 </button-group-item>
+        <button-group-item> 维保概况 </button-group-item>
       </button-group>
     </div>
     <div v-if="checked === 0">
@@ -22,50 +14,44 @@
         <span class="person">排查人员</span>
         <span class="result">排查结果</span>
       </div>
-      <VueSeamlessScroll
-        :data="list1"
-        :class-option="classOption"
-        class="warp"
-      >
+      <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
         <ul class="item">
           <li class="row" v-for="(item, index) in list1" :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>
+            <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 === 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"
-      >
+      <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>
+            <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">
@@ -73,24 +59,21 @@
         <span class="person">排查人员</span>
         <span class="result">是否存在隐患</span>
       </div>
-      <VueSeamlessScroll
-        :data="list3"
-        :class-option="classOption"
-        class="warp"
-      >
+      <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>
+            <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">
@@ -98,24 +81,21 @@
         <span class="person">检查人</span>
         <span class="result">检查结果</span>
       </div>
-      <VueSeamlessScroll
-        :data="list4"
-        :class-option="classOption"
-        class="warp"
-      >
+      <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">{{ item[1] }}</span>
-              <span class="result"
-                :style="{
-                  color: resultType(item[2])
-                }"
-                >{{ item[2] }}</span
-              >
-            </li>
-          </ul>
-        </VueSeamlessScroll>
+            <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>
 </template>
@@ -123,7 +103,7 @@
 import VueSeamlessScroll from "vue-seamless-scroll";
 
 export default {
-  name: 'MaintenanceSupervision',
+  name: "MaintenanceSupervision",
   data() {
     return {
       list1: [
@@ -134,7 +114,7 @@ export default {
         ["09:23 05-14", "张三", "合格"],
         ["09:23 05-14", "张三", "合格"],
         ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "王小强", "不合格"]
+        ["09:23 05-14", "王小强", "不合格"],
       ],
       list2: [
         ["09:23 05-14", "沙坪坝支队", "合格"],
@@ -144,7 +124,7 @@ export default {
         ["09:23 05-14", "城口大队", "合格"],
         ["09:23 05-14", "永川支队", "合格"],
         ["09:23 05-14", "永川支队", "不合格"],
-        ["09:23 05-14", "永川支队", "不合格"]
+        ["09:23 05-14", "永川支队", "不合格"],
       ],
       list3: [
         ["09:23 05-14", "张三", "是"],
@@ -154,7 +134,7 @@ export default {
         ["09:23 05-14", "张三", "是"],
         ["09:23 05-14", "张三", "是"],
         ["09:23 05-14", "王小强", "否"],
-        ["09:23 05-14", "王小强", "否"]
+        ["09:23 05-14", "王小强", "否"],
       ],
       list4: [
         ["09:23 05-14", "张三", "合格"],
@@ -164,13 +144,13 @@ export default {
         ["09:23 05-14", "张三", "合格"],
         ["09:23 05-14", "张三", "合格"],
         ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "王小强", "不合格"]
+        ["09:23 05-14", "王小强", "不合格"],
       ],
       checked: 0,
-    }
+    };
   },
   components: {
-    VueSeamlessScroll
+    VueSeamlessScroll,
   },
   computed: {
     classOption() {
@@ -181,22 +161,22 @@ export default {
   },
   methods: {
     change(idx) {
-      this.checked = idx
-      console.log("切换索引", idx)
+      this.checked = idx;
+      console.log("切换索引", idx);
     },
     resultType(text) {
       return {
-        "合格": "#23f59d",
-        "不合格": "#df575b",
-        "是": "#23f59d",
-        "否": "#df575b"
-      }[text]
-    }
-  }
-}
+        合格: "#23f59d",
+        不合格: "#df575b",
+        是: "#23f59d",
+        否: "#df575b",
+      }[text];
+    },
+  },
+};
 </script>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .maintenance-supervision {
   padding: 10px 10px 0px 10px;
   .maintenance-supervision_header {
@@ -204,9 +184,9 @@ export default {
     padding-bottom: 2px;
   }
   .warp {
-  height: 258px;
-  margin: 0 auto;
-  overflow: hidden;
+    height: 258px;
+    margin: 0 auto;
+    overflow: hidden;
     .item {
       list-style: none;
       padding: 0;
@@ -215,36 +195,36 @@ export default {
     }
   }
 
-.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;
-}
+  .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,
-  .person,
-  .result {
-    flex: 0.33;
+  .row,
+  li,
+  a {
+    display: block;
+    height: 39px;
+    line-height: 39px;
+    margin-bottom: 4px;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
+    font-size: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
-}
 </style>

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

@@ -1,123 +1,121 @@
 <template>
-    <div class="level">
+  <div class="level">
     <!-- 风险等级 -->
-    <div style="font-size: 18px;">主要风险点</div>
+    <div style="font-size: 18px">主要风险点</div>
     <div class="level-btn">
-        <span>疏通管道拥堵</span>
-        <span>火灾隐患</span>
+      <span>疏通管道拥堵</span>
+      <span>火灾隐患</span>
     </div>
     <div class="level_bottom">
-        <div class="code">
-            <img src="../../../assets/images/image 13.png" alt="">
-        </div>
-        <div class="info">
-            <div class="title">提示管理单位</div>
-            <ul>
-                <li>
-                    <span>1</span>
-                    <span>中海管理有限公司</span>
-                    <span class="error">未提示 <span class="action">提示</span></span>
-                </li>
-                <li>
-                    <span>2</span>
-                    <span>渝中区七星岗街道</span>
-                    <span>已提示</span>
-                </li>
-            </ul>
-        </div>
-    </div>
+      <div class="code">
+        <img src="../../../assets/images/image 13.png" alt="" />
+      </div>
+      <div class="info">
+        <div class="title">提示管理单位</div>
+        <ul>
+          <li>
+            <span>1</span>
+            <span>中海管理有限公司</span>
+            <span class="error">未提示 <span class="action">提示</span></span>
+          </li>
+          <li>
+            <span>2</span>
+            <span>渝中区七星岗街道</span>
+            <span>已提示</span>
+          </li>
+        </ul>
+      </div>
     </div>
+  </div>
 </template>
 
-<script >
-
-</script>
+<script></script>
 
 <style lang="less" scoped>
-.level{
-    padding: 12px 10px;
-    .level-btn{
-        margin-top: 12px;
-        span{
-            display: inline-block;
-            width: 90px;
-            height: 25px;
-            background:#F18787 ;
-            font-size: 14px;
-            color: #fff;
-            line-height: 25px;
-            text-align: center;
-            margin-right: 10px;
-            border-radius: 2px;
-        }
+.level {
+  padding: 12px 10px;
+  .level-btn {
+    margin-top: 12px;
+    span {
+      display: inline-block;
+      width: 90px;
+      height: 25px;
+      background: #f18787;
+      font-size: 14px;
+      color: #fff;
+      line-height: 25px;
+      text-align: center;
+      margin-right: 10px;
+      border-radius: 2px;
     }
-    img{
-        display: inline-block;
-        width: 131px;
-        height: 131px;
-        margin-top: 10px;
+  }
+  img {
+    display: inline-block;
+    width: 131px;
+    height: 131px;
+    margin-top: 10px;
+  }
+  .level_bottom {
+    display: flex;
+    align-items: start;
+
+    .code {
+      flex: 0.35;
     }
-    .level_bottom {
+    .info {
+      flex: 0.65;
+      padding-top: 10px;
+      .title {
+        height: 30px;
+        font-size: 14px;
         display: flex;
-        align-items: start;
-        
-        .code {
-            flex: .35;
-        }
-        .info {
-            flex: .65;
-            padding-top: 10px;
-            .title {
-                height: 30px;
-                font-size: 14px;
-                display: flex;
-                align-items: center;
-                padding-left: 10px;
-                background-color: rgba(0, 163, 255, 0.3) !important;
+        align-items: center;
+        padding-left: 10px;
+        background-color: rgba(0, 163, 255, 0.3) !important;
+      }
+
+      ul {
+        border: 1px dotted #1d525f;
+        box-sizing: border-box;
+        li {
+          border-bottom: 1px dotted #1d525f;
+          box-sizing: border-box;
+          padding: 2px 4px;
+          height: 24px;
+          line-height: 24px;
+          display: flex;
+          &:nth-last-child(1) {
+            border-bottom: 0px;
+          }
+          span {
+            font-size: 12px;
+            &:nth-child(1) {
+              flex: 0.1;
+            }
+            &:nth-child(2) {
+              text-align: left;
+              flex: 0.5;
             }
+            &:nth-child(3) {
+              flex: 0.4;
+            }
+          }
 
-            ul {
-              border: 1px dotted #1d525f;
-              box-sizing: border-box;
-              li {
-                border-bottom: 1px dotted #1d525f;
-                box-sizing: border-box;
-                padding: 2px 4px;
-                height: 24px;
-                line-height: 24px;
-                display: flex;
-                &:nth-last-child(1) {
-                    border-bottom: 0px
-                }
-               span {
-                    font-size: 12px;
-                    &:nth-child(1) {
-                      flex: .1;
-                    }
-                    &:nth-child(2) {
-                        text-align: left;
-                      flex: .5;
-                    }
-                    &:nth-child(3) {
-                      flex: .4;
-                    }
-                }
-                
-                .error {
-                    display: inline-block;
-                    color: #e84c4c;
-                    .action {
-                        display: inline-block;
-                        padding-left: 20px;
-                        text-decoration: underline;
-                        color: #44F1FF;
-                        cursor: pointer;
-                        font-size: 12px;
-                    }
-                }
-              }
+          .error {
+            display: inline-block;
+            color: #e84c4c;
+            .action {
+              display: inline-block;
+              padding-left: 20px;
+              text-decoration: underline;
+              color: #44f1ff;
+              cursor: pointer;
+              font-size: 12px;
             }
+          }
         }
+      }
     }
+  }
 }
 </style>

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

@@ -1,172 +1,175 @@
 <template>
-    <div class="video-list">
-        <!-- 视频 -->
+  <div class="video-list">
+    <!-- 视频 -->
+    <div>
+      <img src="../../../assets/images/Group 1321314647.png" alt="" />
+      <img src="../../../assets/images/Group 1321314649.png" alt="" />
+      <img src="../../../assets/images/Group 1321314650.png" alt="" />
+      <img src="../../../assets/images/Group 1321314651.png" alt="" />
+    </div>
+    <Monitor3D ref="monitor" />
+    <div class="info">
+      <div class="bg-num" @click="clickItem(1)">
+        <div class="line-box">
+          <span
+            :class="{
+              line: true,
+              active: pieActive1,
+            }"
+          ></span>
+          <span>生命通道监控点位</span>
+        </div>
+        <div>
+          <!-- 在线 -->
+          <div class="dis-online">
+            <div>
+              <span class="online"></span>
+              <span>1234个</span>
+            </div>
+            <div>
+              <span class="off-line"> </span>
+              <span>1234个</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-num" @click="clickItem(2)">
+        <div class="line-box">
+          <span
+            :class="{
+              line: true,
+              'line-b': true,
+              active: pieActive2,
+            }"
+          ></span>
+          <span>电气火灾监测点位</span>
+        </div>
         <div>
-            <img src="../../../assets/images/Group 1321314647.png" alt="">
-            <img src="../../../assets/images/Group 1321314649.png" alt="">
-            <img src="../../../assets/images/Group 1321314650.png" alt="">
-            <img src="../../../assets/images/Group 1321314651.png" alt="">
+          <!-- 在线 -->
+          <div class="dis-online">
+            <div>
+              <span class="online"></span>
+              <span>1234个</span>
+            </div>
+            <div>
+              <span class="off-line"> </span>
+              <span>1234个</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-num" @click="clickItem(3)">
+        <div class="line-box">
+          <span
+            :class="{
+              line: true,
+              active: pieActive3,
+              'line-g': true,
+            }"
+          ></span>
+          <span>水压检测点位</span>
         </div>
-            <Monitor3D ref="monitor"/>
-            <div class="info">
-                <div class="bg-num" @click="clickItem(1)">
-                    <div class="line-box">
-                        <span :class="{
-                            line: true,
-                            active: pieActive1
-                        }"></span>
-                    <span>生命通道监控点位</span>
-                    </div>
-                   <div> 
-                    <!-- 在线 -->
-                    <div class="dis-online">
-                        <div >
-                    <span class="online"></span>
-                    <span>1234个</span>
-                   </div>
-                   <div>
-                    <span class="off-line"> </span>
-                    <span>1234个</span>
-                   </div>
-                    </div>
-                   
-                </div>
-                </div>
-                <div class="bg-num" @click="clickItem(2)">
-                    <div class="line-box">
-                        <span :class="{
-                            line: true,
-                            'line-b': true,
-                            active: pieActive2
-                        }"></span>
-                        <span>电气火灾监测点位</span>
-                    </div>
-                   <div> 
-                    <!-- 在线 -->
-                    <div class="dis-online">
-                        <div >
-                    <span class="online"></span>
-                    <span>1234个</span>
-                   </div>
-                   <div>
-                    <span class="off-line"> </span>
-                    <span>1234个</span>
-                   </div>
-                    </div>
-                   
-                </div>
-                </div>
-                <div class="bg-num" @click="clickItem(3)">
-                    <div class="line-box">
-                        <span :class="{
-                            line: true,
-                            active: pieActive3,
-                            'line-g': true
-                        }"></span>
-                    <span>水压检测点位</span>
-                    </div>
-                   <div> 
-                    <!-- 在线 -->
-                    <div class="dis-online">
-                        <div >
-                    <span class="online"></span>
-                    <span>1234个</span>
-                   </div>
-                   <div>
-                    <span class="off-line"> </span>
-                    <span>1234个</span>
-                   </div>
-                    </div>
-                   
-                </div>
-                </div>
+        <div>
+          <!-- 在线 -->
+          <div class="dis-online">
+            <div>
+              <span class="online"></span>
+              <span>1234个</span>
+            </div>
+            <div>
+              <span class="off-line"> </span>
+              <span>1234个</span>
             </div>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
-<script >
-import Monitor3D from '@/components/Monitor3D.vue'
-export default{
-components:{Monitor3D},
-data() {
+<script>
+import Monitor3D from "@/components/Monitor3D.vue";
+export default {
+  components: { Monitor3D },
+  data() {
     return {
-        pieActive1: true,
-        pieActive2: true,
-        pieActive3: true,
-        ctx: ['生命通道监控点位', '电气火灾监测点位', '水压检测点位']
-    }
-},
-methods: {
+      pieActive1: true,
+      pieActive2: true,
+      pieActive3: true,
+      ctx: ["生命通道监控点位", "电气火灾监测点位", "水压检测点位"],
+    };
+  },
+  methods: {
     clickItem(idx) {
-        this[`pieActive${idx}`] = !this[`pieActive${idx}`]
-        this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1])
-    }
-}
-}
+      this[`pieActive${idx}`] = !this[`pieActive${idx}`];
+      this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.info{
+.info {
+  display: flex;
+  justify-content: space-between;
+  .online {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #15ff2d;
+    border-radius: 50%;
+    margin-right: 2px;
+  }
+  .off-line {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #f06040;
+    border-radius: 50%;
+    margin-right: 2px;
+  }
+  .dis-online {
     display: flex;
-    justify-content: space-between;
-        .online{
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            background: #15FF2D;
-            border-radius: 50%;
-            margin-right: 2px;
-        }
-        .off-line{
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            background: #F06040;
-            border-radius: 50%;
-            margin-right: 2px;
-        }
-        .dis-online{
-            display: flex;
-            // justify-content: space-between;
-            gap:20px;
-            margin-top: 12px;
-        }
+    // justify-content: space-between;
+    gap: 20px;
+    margin-top: 12px;
+  }
 }
-.video-list{
-    padding: 10px 10px;
-    font-size: 13px;
-    // 渐变
-    .bg-num{
-        width: 125px;
-        height: 50px;
-        background: rgba(0, 213, 255, .18);
-        padding: 5px 5px;
-        cursor: pointer;
-    }
-    .line-box{
-        display: flex;
-        align-items: center;
-        margin-top: 7px;
-    }
-    .line{
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        background:#d3d3d3 ;
-        margin-right: 5px;
-        &.active {
-            background: #D5C307
-        }
+.video-list {
+  padding: 10px 10px;
+  font-size: 13px;
+  // 渐变
+  .bg-num {
+    width: 125px;
+    height: 50px;
+    background: rgba(0, 213, 255, 0.18);
+    padding: 5px 5px;
+    cursor: pointer;
+  }
+  .line-box {
+    display: flex;
+    align-items: center;
+    margin-top: 7px;
+  }
+  .line {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background: #d3d3d3;
+    margin-right: 5px;
+    &.active {
+      background: #d5c307;
     }
-    .line-g{
-        &.active {
-            background: #12A647
-        }
+  }
+  .line-g {
+    &.active {
+      background: #12a647;
     }
-    .line-b{
-        &.active {
-            background: #01ADEF
-        }
+  }
+  .line-b {
+    &.active {
+      background: #01adef;
     }
+  }
 }
 </style>

app/src/views/Detail/index.vue

@@ -1,83 +1,68 @@
-
-<template >
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between"
-      >
-      <div>
-          <border-panel
-            height="360px"
-            style="margin-bottom: 6px"
-            title="建筑信息"
-          >
-          <BuildingInfo/>
-          </border-panel>
-          <border-panel
-            height="310px"
-            style="margin-bottom: 6px"
-            title="管理单位"
-          >
-          <GementUnit/>
-          </border-panel>
-          <border-panel height="270px" title="风险等级">
-            <!-- 风险等级 -->
-            <Risklevel/>
-          </border-panel>
-        </div>
-      <div style="display: flex; flex-direction: column;">
-        <div style="height: 682px;"></div>
-        <div style="display: flex; justify-content: space-between;">
-          <border-panel
-            height="270px"
-            width="468px"
-            title="历史火灾"
-            :headerType="2"
-            style="margin-right: 8px;"
-          >
+<template>
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+    <div>
+      <border-panel height="360px" style="margin-bottom: 6px" title="建筑信息">
+        <BuildingInfo />
+      </border-panel>
+      <border-panel height="310px" style="margin-bottom: 6px" title="管理单位">
+        <GementUnit />
+      </border-panel>
+      <border-panel height="270px" title="风险等级">
+        <!-- 风险等级 -->
+        <Risklevel />
+      </border-panel>
+    </div>
+    <div style="display: flex; flex-direction: column">
+      <div style="height: 682px"></div>
+      <div style="display: flex; justify-content: space-between">
+        <border-panel
+          height="270px"
+          width="468px"
+          title="历史火灾"
+          :headerType="2"
+          style="margin-right: 8px"
+        >
           <historical-fire />
-          </border-panel>
-          <border-panel
-            height="270px"
-            width="468px"
-            title="隐患"
-            :headerType="2"
-          >
+        </border-panel>
+        <border-panel height="270px" width="468px" title="隐患" :headerType="2">
           <hidden-danger />
-          </border-panel>
-        </div>
-      </div>
-      <div>
-        <border-panel
-            height="521px"
-            style="margin-bottom: 6px"
-            title="智慧消防"
-          >
-          <VideoInfo/>
-          </border-panel>
-          <border-panel
-            height="421px"
-            style="margin-bottom: 6px"
-            title="自查、监督、维保"
-          >
-          <maintenance-supervision />
-          </border-panel>
+        </border-panel>
       </div>
+    </div>
+    <div>
+      <border-panel height="521px" style="margin-bottom: 6px" title="智慧消防">
+        <VideoInfo />
+      </border-panel>
+      <border-panel
+        height="421px"
+        style="margin-bottom: 6px"
+        title="自查、监督、维保"
+      >
+        <maintenance-supervision />
+      </border-panel>
+    </div>
   </div>
 </template>
 <script>
-import BuildingInfo from './components/BuildingInfo.vue'
-import VideoInfo from './components/VideoInfo.vue'
-import GementUnit from './components/GementUnit.vue'
-import Risklevel from './components/Risklevel.vue'
-import MaintenanceSupervision from './components/MaintenanceSupervision.vue'
-import HistoricalFire from './components/HistoricalFire.vue';
-import HiddenDanger from './components/HiddenDanger.vue';
+import BuildingInfo from "./components/BuildingInfo.vue";
+import VideoInfo from "./components/VideoInfo.vue";
+import GementUnit from "./components/GementUnit.vue";
+import Risklevel from "./components/Risklevel.vue";
+import MaintenanceSupervision from "./components/MaintenanceSupervision.vue";
+import HistoricalFire from "./components/HistoricalFire.vue";
+import HiddenDanger from "./components/HiddenDanger.vue";
 export default {
-  name: 'BasicInfoPage',
-  components: {BuildingInfo,VideoInfo,GementUnit,Risklevel, 
+  name: "BasicInfoPage",
+  components: {
+    BuildingInfo,
+    VideoInfo,
+    GementUnit,
+    Risklevel,
     MaintenanceSupervision,
     HistoricalFire,
-    HiddenDanger}
-}
+    HiddenDanger,
+  },
+};
 </script>
 
-<style scoped lang='less'>
-</style>
+<style scoped lang="less"></style>

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

@@ -1,98 +1,123 @@
 <template>
-    <div>
-
-<div class="unit-echats">
-    <div class="unit-g ">
+  <div>
+    <div class="unit-echats">
+      <div class="unit-g">
         管理形式
-        <unit3D/>
+        <unit3D />
+      </div>
     </div>
-        
-</div>
-<div class="unit maintenance">
-    <span class="unit-c">管理主体</span>
-    <div class="unit-num">
-        <div><span class="num">1223</span>
-        <span>家</span></div>
+    <div class="unit maintenance">
+      <span class="unit-c">管理主体</span>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="1223"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
         <div>一般单位</div>
-    </div>
-    <div class="unit-num">
-        <div><span class="num">1223</span>
-        <span>家</span></div>
+      </div>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="1223"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
         <div>一般单位</div>
+      </div>
     </div>
-   
-</div>
-<div class="unit ">
-    <span class="  unit-w">维保形式</span>
-    <div class="unit-num ">
-        <div><span class="num">123</span>
-        <span>家</span></div>
+    <div class="unit">
+      <span class="unit-w">维保形式</span>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="123"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
         <div>专业维保</div>
-    </div>
-    <div class="unit-num">
-        <div><span class="num">323</span>
-        <span>家</span></div>
+      </div>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="323"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
         <div>自主维护</div>
-    </div>
-    <div class="unit-num">
-        <div><span class="num">323</span>
-        <span>家</span></div>
+      </div>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="323"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
         <div>无维保</div>
+      </div>
     </div>
-   
-</div>
-    </div>
+  </div>
 </template>
 
-<script >
-import unit3D from '@/components/unit3D.vue'
+<script>
+import unit3D from "@/components/unit3D.vue";
 export default {
-    components:{unit3D}
-}
+  components: { unit3D },
+};
 </script>
 
 <style lang="less" scoped>
-.unit{
-    display: flex;
-    margin: 5px 0 10px 10px;
-    font-size: 18px;
-    .unit-c{
-display: inline-block;
-margin: 25px 18px 0 0;
-    }
-    .unit-num{
-        width: 146px;
-        height: 72px;
-        margin: 10px 10px;
-        letter-spacing: 1px;
-        padding: 5px 0 0 0;
-        background-color: rgba(0, 163, 255, 0.3)  ;
-        color: #fff;
-        text-align: center;
-        font-size: 16px;
-        line-height: 30px;
-        // 渐变
-        .num{
-            font-size: 32px;
-            margin-right: 4px;
-            font-weight: 600;
-            color: rgb(105, 193, 208);    
-        }
-
+.unit {
+  display: flex;
+  margin: 5px 0 10px 10px;
+  font-size: 18px;
+  .unit-c {
+    display: inline-block;
+    margin: 25px 18px 0 0;
+  }
+  .unit-num {
+    width: 146px;
+    height: 72px;
+    margin: 10px 10px;
+    letter-spacing: 1px;
+    padding: 5px 0 0 0;
+    background-color: rgba(0, 163, 255, 0.3);
+    color: #fff;
+    text-align: center;
+    font-size: 16px;
+    line-height: 30px;
+    padding-top: 10px;
+    // 渐变
+    .num {
+      font-size: 32px;
+      font-weight: 600;
+      color: rgb(105, 193, 208);
     }
+  }
 }
-.unit-echats{
-    height: 150px;
+.unit-echats {
+  height: 150px;
 }
-.unit-w{
-    width: 136px;
+.unit-w {
+  width: 136px;
 }
-.unit-g{
-    font-size:18px;
-    margin-left: 10px; 
-   padding-top: 10px;
+.unit-g {
+  font-size: 18px;
+  margin-left: 10px;
+  padding-top: 10px;
 }
-.maintenance{
-    margin-top: 30px;
+.maintenance {
+  margin-top: 30px;
 }
-</style>
+</style>

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

@@ -1,99 +1,87 @@
-<template >
-    <div class="maintenance-supervision">
-      <div class="maintenance-supervision_header">
-        <button-group @change="change">
-          <button-group-item  style="width: 152px; padding: 7px 1px; ">
-            管理单位管理建筑排名
-          </button-group-item >
-          <button-group-item   style="width: 152px; padding:  7px 1px;">
-            维保单位管理建筑排名
-          </button-group-item>
-          <button-group-item  style="width: 147px; padding:  7px 1px;">
-            建筑入住单位数排名
-          </button-group-item>
-          
-        </button-group>
+<template>
+  <div class="maintenance-supervision">
+    <div class="maintenance-supervision_header">
+      <button-group @change="change">
+        <button-group-item style="width: 152px; padding: 7px 1px">
+          管理单位管理建筑排名
+        </button-group-item>
+        <button-group-item style="width: 152px; padding: 7px 1px">
+          维保单位管理建筑排名
+        </button-group-item>
+        <button-group-item style="width: 147px; padding: 7px 1px">
+          建筑入住单位数排名
+        </button-group-item>
+      </button-group>
+    </div>
+    <div v-if="checked === 0">
+      <div class="row header">
+        <span class="num">序号</span>
+        <span class="time">管理单位名称</span>
+        <span class="result">管理建筑数</span>
       </div>
-      <div v-if="checked === 0">
-        <div class="row header">                                         
-            <span class="num">序号</span>
-          <span class="time">管理单位名称</span>
-          <span class="result">管理建筑数</span>
-        </div>
-        <VueSeamlessScroll
-          :data="list1"
-          :class-option="classOption"
-          class="warp"
-        >
-          <ul class="item">
-            <li class="row" v-for="(item, index) in list1" :key="index">
-                <span class="num">{{ index+1 }}</span>
-                <span class="time">{{ item[0] }}</span>
-                <span class="person">{{ item[1] }}</span>
-                <!-- <span class="result"
+      <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list1" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <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>
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+
+    <div v-if="checked === 1">
+      <div class="row header">
+        <span class="num">序号</span>
+        <span class="time">维保单位名称</span>
+        <span class="person">维保建筑数</span>
       </div>
-      
-      <div v-if="checked === 1">
-        <div class="row header">
-          <span class="num">序号</span>
-          <span class="time">维保单位名称</span>
-          <span class="person">维保建筑数</span>
-        </div>
-        <VueSeamlessScroll
-          :data="list2"
-          :class-option="classOption"
-          class="warp"
-        >
+      <VueSeamlessScroll :data="list2" :class-option="classOption" class="warp">
         <ul class="item">
-            <li class="row" v-for="(item, index) in list1" :key="index">
-                <span class="num">{{ index+1 }}</span>
-                <span class="time">{{ item[0] }}</span>
-                <span class="person">{{ item[1] }}</span>
-                <!-- <span class="result"
+          <li class="row" v-for="(item, index) in list1" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <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="num">序号</span>
-          <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="num">{{ index+1 }}</span>
-                <span class="time">{{ item[0] }}</span>
-                <span  class="person"
-                  :style="{
-                    color: resultType(item[1])
-                  }"
-                  >{{ item[1] }}</span
-                >
-              </li>
-            </ul>
-          </VueSeamlessScroll>
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+    <div v-if="checked === 2">
+      <div class="row header">
+        <span class="num">序号</span>
+        <span class="time">登记事件</span>
+        <span class="person">排查人员</span>
+        <!-- <span class="result">是否存在隐患</span> -->
       </div>
-      <!-- <div v-if="checked === 3">
+      <VueSeamlessScroll :data="list3" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list3" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <span class="time">{{ item[0] }}</span>
+            <span
+              class="person"
+              :style="{
+                color: resultType(item[1]),
+              }"
+              >{{ item[1] }}</span
+            >
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+    <!-- <div v-if="checked === 3">
         <div class="row header">
           <span class="time">序号</span>
           <span class="person">建筑名称</span>
@@ -115,112 +103,111 @@
                   }"
                   >{{ item[2] }}</span
                 > -->
-              <!-- </li>
+    <!-- </li>
             </ul>
           </VueSeamlessScroll>
       </div> -->
-    </div>
-  </template>
-  <script>
-  import VueSeamlessScroll from "vue-seamless-scroll";
-  
-  export default {
-    name: 'MaintenanceSupervision',
-    data() {
-      return {
-        list1: [
-          ["环球金融大厦",  "40"],
-          ["天祥广场",  "35"],
-          ["经济科技大厦", "23"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
+  </div>
+</template>
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
 
-        ],
-        list2: [
-          ["沙坪坝支队", "合格"],
-          ["两江支队", "不合格"],
-          ["城口大队", "合格"],
-          ["永川支队", "不合格"],
-          ["城口大队", "合格"],
-          [ "永川支队", "合格"],
-          ["永川支队", "不合格"],
-          [ "永川支队", "不合格"]
-        ],
-        list3: [
-        ["环球金融大厦",  "40"],
-          ["天祥广场",  "35"],
-          ["经济科技大厦", "23"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-          ["环球金融大厦",  "40"],
-        ],
-        checked: 0,
-      }
+export default {
+  name: "MaintenanceSupervision",
+  data() {
+    return {
+      list1: [
+        ["环球金融大厦", "40"],
+        ["天祥广场", "35"],
+        ["经济科技大厦", "23"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+      ],
+      list2: [
+        ["沙坪坝支队", "合格"],
+        ["两江支队", "不合格"],
+        ["城口大队", "合格"],
+        ["永川支队", "不合格"],
+        ["城口大队", "合格"],
+        ["永川支队", "合格"],
+        ["永川支队", "不合格"],
+        ["永川支队", "不合格"],
+      ],
+      list3: [
+        ["环球金融大厦", "40"],
+        ["天祥广场", "35"],
+        ["经济科技大厦", "23"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+      ],
+      checked: 0,
+    };
+  },
+  components: {
+    VueSeamlessScroll,
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
     },
-    components: {
-      VueSeamlessScroll
+  },
+  methods: {
+    change(idx) {
+      this.checked = idx;
+      console.log("切换索引", idx);
     },
-    computed: {
-      classOption() {
-        return {
-          singleHeight: 43,
-        };
-      },
+    resultType(text) {
+      return {
+        合格: "#23f59d",
+        不合格: "#df575b",
+        是: "#23f59d",
+        否: "#df575b",
+      }[text];
     },
-    methods: {
-      change(idx) {
-        this.checked = idx
-        console.log("切换索引", idx)
-      },
-      resultType(text) {
-        return {
-          "合格": "#23f59d",
-          "不合格": "#df575b",
-          "是": "#23f59d",
-          "否": "#df575b"
-        }[text]
-      }
-    }
-  }
-  </script>
-  
-  <style scoped lang='less'>
-  .maintenance-supervision {
-    // padding: 10px 10px 0px 20px;
-    .maintenance-supervision_header {
-      border-bottom: 1px solid #154956;
-      padding-bottom: 2px;
-      margin-top: 15px;
+  },
+};
+</script>
+
+<style scoped lang="less">
+.maintenance-supervision {
+  // padding: 10px 10px 0px 20px;
+  .maintenance-supervision_header {
+    border-bottom: 1px solid #154956;
+    padding-bottom: 2px;
+    margin-top: 15px;
     font-size: 12px;
     color: rgb(79, 149, 186);
-    }
-    .warp {
+  }
+  .warp {
     height: 520px;
     margin: 0 auto;
     overflow: hidden;
-      .item {
-        list-style: none;
-        padding: 0;
-        margin: 0 auto;
-        cursor: pointer;
-      }
+    .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;
+    color: #61dbff;
     margin-top: 15px;
     margin-bottom: 6px;
   }
-  
+
   .row,
   li,
   a {
@@ -242,16 +229,15 @@
       justify-content: center;
       align-items: center;
     }
-    .num{
-        flex: 0.15;
+    .num {
+      flex: 0.15;
     }
-    .time{
+    .time {
       flex: 1;
     }
-    .result{
+    .result {
       flex: 0.35;
     }
   }
-  }
-  </style>
-  
+}
+</style>

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

@@ -1,84 +1,80 @@
 <template>
-    <div class="dle">
-        <div v-for="(item,index) in list" :key="index" class="dle-ve">
-            <rate3D :data="item.val" :text="item.text" :title="item.title" ></rate3D>
-            
-        </div>
-
+  <div class="dle">
+    <div v-for="(item, index) in list" :key="index" class="dle-ve">
+      <rate3D :data="item.val" :text="item.text" :title="item.title"></rate3D>
     </div>
+  </div>
 </template>
 
-<script >
-import rate3D from '../../../components/rate3D.vue';
+<script>
+import rate3D from "../../../components/rate3D.vue";
 export default {
-    components:{rate3D},
-    data(){
-        return{
-            list:[
-                {
-                    title:'交接班记录/日',
-                    text:'55%',
-                    val:55,
-                },
-                {
-                    title:'巡查记录/日',
-                    text:'75%',
-                    val:75,
-                },
-                {
-                    title:'安全培训/年',
-                    text:'55%',
-                    val:55,
-                },
-                {
-                    title:'消防预案',
-                    text:'87%',
-                    val:87,
-                },
-                {
-                    title:'演练记录/年',
-                    text:'55%',
-                    val:55,
-                },
-                {
-                    title:'评估报告/年',
-                    text:'100%',
-                    val:100,
-                },
-                {
-                    title:'维保记录/月',
-                    text:'15%',
-                    val:15,
-                },
-                {
-                    title:'安全制度',
-                    text:'35%',
-                    val:35,
-                },
-                
-            ]
-        }
-    }
-}
+  components: { rate3D },
+  data() {
+    return {
+      list: [
+        {
+          title: "交接班记录/日",
+          text: "55%",
+          val: 55,
+        },
+        {
+          title: "巡查记录/日",
+          text: "75%",
+          val: 75,
+        },
+        {
+          title: "安全培训/年",
+          text: "55%",
+          val: 55,
+        },
+        {
+          title: "消防预案",
+          text: "87%",
+          val: 87,
+        },
+        {
+          title: "演练记录/年",
+          text: "55%",
+          val: 55,
+        },
+        {
+          title: "评估报告/年",
+          text: "100%",
+          val: 100,
+        },
+        {
+          title: "维保记录/月",
+          text: "15%",
+          val: 15,
+        },
+        {
+          title: "安全制度",
+          text: "35%",
+          val: 35,
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.dle{
-    display: flex;
-    flex-wrap: wrap;
-//   justify-content: space-between;
-    // margin: 20px 0px 20px 20px;
-    margin: 0px 40px;
-    row-gap: 10px;
-    column-gap: 35px;
-    
+.dle {
+  display: flex;
+  flex-wrap: wrap;
+  //   justify-content: space-between;
+  // margin: 20px 0px 20px 20px;
+  margin: 0px 40px;
+  row-gap: 5px;
+  column-gap: 35px;
 
- .dle-ve{
+  .dle-ve {
     // margin-right: 30px;
- }
+  }
 }
-.dle::after{
-    content: '';
-  flex: auto;  
+.dle::after {
+  content: "";
+  flex: auto;
 }
-</style>
+</style>

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

@@ -1,212 +1,216 @@
-<template >
-    <div class="maintenance-supervision">
-      <div class="maintenance-supervision_header">
-        <el-input v-model="seach" placeholder="请输入建筑名称"></el-input>
-        <div>
-          <el-select  v-model="value" placeholder="请选择管理形式">
+<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>
-          
-   
-  <el-button>搜索</el-button>
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
       </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="list1"
-          :class-option="classOption"
-          class="warp"
-        >
-          <ul class="item">
-            <li class="row" v-for="(item, index) in list1" :key="index">
-                <span class="num">{{ index+1 }}</span>
-                <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>
+
+      <el-button>搜索</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>
-      
-      <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>
+      <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list1" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <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 === 1">
+      <div class="row header">
+        <span class="time">检查结束事件</span>
+        <span class="person">执法机构</span>
+        <span class="result">检查结果</span>
       </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>
+      <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>
-      <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">{{ item[1] }}</span>
-                <span class="result"
-                  :style="{
-                    color: resultType(item[2])
-                  }"
-                  >{{ item[2] }}</span
-                >
-              </li>
-            </ul>
-          </VueSeamlessScroll>
+      <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">{{ item[1] }}</span>
+            <span class="result">{{ item[2] }}</span>
+          </li>
+        </ul>
+      </VueSeamlessScroll>
     </div>
-  </template>
-  <script>
-  import VueSeamlessScroll from "vue-seamless-scroll";
-  
-  export default {
-    name: 'MaintenanceSupervision',
-    data() {
-      return {
-        seach:'',
-        options:[],
-        list1: [
-          ["环球金融大厦", "独有", "中海物业"],
-          ["天祥广场", "独有", "中海物业"],
-          ["经济科技大厦", "独有", "中海物业"],
-          ["环球金融大厦", "独有", "中海物业"],
-          ["环球金融大厦", "独有", "中海物业"],
-          ["环球金融大厦", "独有", "中海物业"],
-          ["环球金融大厦", "独有", "中海物业"],
-          ["环球金融大厦", "独有", "中海物业"],
+  </div>
+</template>
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
 
-        ],
-        value: '',
-      
-        checked: 0,
-      }
+export default {
+  name: "MaintenanceSupervision",
+  data() {
+    return {
+      search: "",
+      options: [
+        {
+          value: '1',
+          label: '1111'
+        },
+        {
+          value: '2',
+          label: '2222'
+        },
+        {
+          value: '3',
+          label: '3333'
+        }
+      ],
+      list1: [
+        ["环球金融大厦", "独有", "中海物业"],
+        ["天祥广场", "独有", "中海物业"],
+        ["经济科技大厦", "独有", "中海物业"],
+        ["环球金融大厦", "独有", "中海物业"],
+        ["环球金融大厦", "独有", "中海物业"],
+        ["环球金融大厦", "独有", "中海物业"],
+        ["环球金融大厦", "独有", "中海物业"],
+        ["环球金融大厦", "独有", "中海物业"],
+      ],
+      value: "",
+
+      checked: 0,
+    };
+  },
+  components: {
+    VueSeamlessScroll,
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
     },
-    components: {
-      VueSeamlessScroll
+  },
+  methods: {
+    change(idx) {
+      this.checked = idx;
+      console.log("切换索引", idx);
     },
-    computed: {
-      classOption() {
-        return {
-          singleHeight: 43,
-        };
-      },
+    resultType(text) {
+      return {
+        合格: "#23f59d",
+        不合格: "#df575b",
+        是: "#23f59d",
+        否: "#df575b",
+      }[text];
     },
-    methods: {
-      change(idx) {
-        this.checked = idx
-        console.log("切换索引", idx)
-      },
-      resultType(text) {
-        return {
-          "合格": "#23f59d",
-          "不合格": "#df575b",
-          "是": "#23f59d",
-          "否": "#df575b"
-        }[text]
-      }
-    }
+  },
+};
+</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;
   }
-  </script>
-  
-  <style scoped lang='less'>
-  .maintenance-supervision {
-    // padding: 10px 10px 0px 20px;
-    .maintenance-supervision_header {
-      display: flex;
-      justify-content: space-around;
-      border-bottom: 1px solid #154956;
-      padding-bottom: 2px;
-      margin-top: 15px;
+  ::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 {
+  }
+  .warp {
     height: 520px;
     margin: 0 auto;
     overflow: hidden;
-      .item {
-        list-style: none;
-        padding: 0;
-        margin: 0 auto;
-        cursor: pointer;
-      }
+    .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;
+    color: #61dbff;
     margin-top: 15px;
     margin-bottom: 6px;
   }
-  
+
   .row,
   li,
   a {
@@ -228,66 +232,96 @@
       justify-content: center;
       align-items: center;
     }
-    .num{
-        flex: 0.15;
+    .num {
+      flex: 0.15;
     }
   }
-  }
-  /deep/.el-input__inner{
-    background-color:#184254 ;
-    width: 150px;
-    height: 30px;
-    margin-bottom: 5px;
-  }
-  /deep/.el-button{
-    width: 160px;
-    height: 32px;
-    font-size: 14px;
-    line-height: 2px;
-    background: #184254;
-    margin:0 20px 0 30px;
-    color: #fff;
-    border-radius: 5px;
-    border: none;
-  } 
+}
+
+
+/deep/.el-input__inner {
+  background-color: #184254;
+  width: 150px;
+  height: 30px;
+  margin-bottom: 5px;
+}
+/deep/.el-button {
+  width: 160px;
+  height: 32px;
+  font-size: 14px;
+  line-height: 2px;
+  background: #184254;
+  margin: 0 20px 0 30px;
+  color: #fff;
+  border-radius: 5px;
+  border: none;
+}
 // /deep/.el-select-dropdown{
 
 //     background-color:#184254 !important;
 //     position: fixed;
 
 //   }
-  /deep/.select_btn{
+/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;
-  //  }
+  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>
 
-  </style>
-  
+.el-select-dropdown.el-popper {
+  background-color: #4167a0;
+}
+.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;
+}
+</style>

app/src/views/Fire/index.vue

@@ -1,54 +1,45 @@
+<template>
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+    <div>
+      <border-panel
+        height="443px"
+        style="margin-bottom: 6px"
+        title="高层建筑管理"
+      >
+        <Construction />
+      </border-panel>
+      <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
+        <ManagementContent />
+      </border-panel>
+    </div>
 
-<template >
-    <div style="padding: 0px 35px; display: flex; justify-content: space-between"
-        >
-        <div>
-            <border-panel
-              height="443px"
-              style="margin-bottom: 6px"
-              title="高层建筑管理"
-            >
-            <Construction/>
-            </border-panel>
-            <border-panel
-              height="500px"
-              style="margin-bottom: 6px"
-              title="管理内容"
-            >
-            <ManagementContent/>
-            </border-panel>
-          
-          </div>
-       
-        <div>
-          <border-panel
-              height="521px"
-              style="margin-bottom: 6px"
-              title="建筑管理单位分布"
-            > 
-          <Management/>
-            </border-panel>
-            <border-panel
-              height="421px"
-              style="margin-bottom: 6px"
-              title="建筑管理单位信息"
-            >
-            <UnitInfo/>
-            </border-panel>
-        </div>
+    <div>
+      <border-panel
+        height="521px"
+        style="margin-bottom: 6px"
+        title="建筑管理单位分布"
+      >
+        <Management />
+      </border-panel>
+      <border-panel
+        height="421px"
+        style="margin-bottom: 6px"
+        title="建筑管理单位信息"
+      >
+        <UnitInfo />
+      </border-panel>
     </div>
-  </template>
-  <script>
-import Management from './components/Management.vue';
-import UnitInfo from './components/UnitInfo.vue'
-import Construction from './components/Construction.vue'
-import ManagementContent from './components/ManagementContent.vue'
-  export default {
-    name: 'Fire',
-    components:{Management,UnitInfo,Construction,ManagementContent}
-  }
-  </script>
-  
-  <style scoped lang='less'>
-  </style>
-  
+  </div>
+</template>
+<script>
+import Management from "./components/Management.vue";
+import UnitInfo from "./components/UnitInfo.vue";
+import Construction from "./components/Construction.vue";
+import ManagementContent from "./components/ManagementContent.vue";
+export default {
+  name: "Fire",
+  components: { Management, UnitInfo, Construction, ManagementContent },
+};
+</script>
+
+<style scoped lang="less"></style>

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

@@ -26,10 +26,7 @@
           <span class="name">{{ item[2] }}</span>
           <span class="type">{{ item[3] }}</span>
           <span class="org">{{ item[4] }}</span>
-          <span
-            class="state"
-            >{{ item[5] }}</span
-          >
+          <span class="state">{{ item[5] }}</span>
           <span
             class="level"
             :style="{

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

@@ -1,24 +1,24 @@
 <script>
 import PieChart3D from "@/components/PieChart3D.vue";
-import Maintenance3D from '@/components/Maintenance3D.vue'
-import Overhaul3D from '@/components/Overhaul3D.vue'
+import Maintenance3D from "@/components/Maintenance3D.vue";
+import Overhaul3D from "@/components/Overhaul3D.vue";
 export default {
   name: "AutonomousManagement",
   components: {
     PieChart3D,
     Maintenance3D,
-    Overhaul3D
+    Overhaul3D,
   },
-  data(){
-    return{
-      flag:0
-    }
+  data() {
+    return {
+      flag: 0,
+    };
+  },
+  methods: {
+    change(index) {
+      this.flag = index;
+    },
   },
-  methods:{
-    change(index){
-      this.flag=index
-    }
-  }
 };
 </script>
 
@@ -26,19 +26,15 @@ export default {
   <div class="autonomous-management">
     <div class="autonomous-management_header">
       <button-group @change="change">
-        <button-group-item >
-          管理形式
-        </button-group-item>
-        <button-group-item >
-          维护形式
-        </button-group-item>
-        <button-group-item >大修基金</button-group-item>
+        <button-group-item> 管理形式 </button-group-item>
+        <button-group-item> 维护形式 </button-group-item>
+        <button-group-item>大修基金</button-group-item>
       </button-group>
     </div>
     <div>
-      <PieChart3D v-if="flag==0"/>
-      <Maintenance3D v-if="flag==1"/>
-      <Overhaul3D v-if="flag==2"/>
+      <PieChart3D v-if="flag == 0" />
+      <Maintenance3D v-if="flag == 1" />
+      <Overhaul3D v-if="flag == 2" />
     </div>
   </div>
 </template>

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

@@ -1,52 +1,68 @@
 <script>
-import FirstHight from './FirstHight.vue';
-import BasicTotal from '@/components/BasicTotal.vue';
+import FirstHight from "./FirstHight.vue";
+import BasicTotal from "@/components/BasicTotal.vue";
 
 export default {
-  name: 'BasicInfo',
+  name: "BasicInfo",
   components: {
     FirstHight,
-    BasicTotal
-  }
-}
+    BasicTotal,
+  },
+};
 </script>
 
-<template >
+<template>
   <div class="basic-info">
-      <div class="__left">
-        <FirstHight />
-      </div>
-      <div class="__right">
-        <linear-text startColor="#00FFE0" endColor="#00D1FF" text="治理重点" fontSize="16px" />
-        <div class="basic-total">
-          <BasicTotal style="width: 187px;" number="1326" label="超高层建筑" unit="栋"/>
-          <BasicTotal style="width: 187px;" number="926" label="" unit="栋">
-            <template #label>
-              <span class="label">
-                <span class="sub-label">2000年前底</span>
-                老旧住宅建筑
-              </span>
-            </template>
-          </BasicTotal>
-          <BasicTotal style="width: 187px;" number="1273" label="老旧商业混合体" unit="栋">
-            <template #label>
-              <span class="label">
-                <span class="sub-label">2000年前底</span>
-                老旧住宅建筑
-              </span>
-            </template>
-          </BasicTotal>
-        </div>
+    <div class="__left">
+      <FirstHight />
+    </div>
+    <div class="__right">
+      <linear-text
+        startColor="#00FFE0"
+        endColor="#00D1FF"
+        text="治理重点"
+        fontSize="16px"
+      />
+      <div class="basic-total">
+        <BasicTotal
+          style="width: 187px"
+          number="1326"
+          label="超高层建筑"
+          unit="栋"
+        />
+        <BasicTotal style="width: 187px" number="926" label="" unit="栋">
+          <template #label>
+            <span class="label">
+              <span class="sub-label">2000年前底</span>
+              老旧住宅建筑
+            </span>
+          </template>
+        </BasicTotal>
+        <BasicTotal
+          style="width: 187px"
+          number="1273"
+          label="老旧商业混合体"
+          unit="栋"
+        >
+          <template #label>
+            <span class="label">
+              <span class="sub-label">2000年前底</span>
+              老旧住宅建筑
+            </span>
+          </template>
+        </BasicTotal>
       </div>
     </div>
+  </div>
 </template>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 .basic-info {
   padding: 4px;
   display: flex;
   .__left {
-    display: flex; justify-content: space-around;
+    display: flex;
+    justify-content: space-around;
   }
   .__right {
     margin-top: 20px;

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

@@ -1,74 +1,54 @@
-<script >
-
+<script>
 export default {
-  name: 'BasicInfoModalContent',
+  name: "BasicInfoModalContent",
   data() {
     return {
-      tableData: [{
-        idx: 1,
-        area: '江北区',
-        name: '大剧院',
-        address: '江北区xxx街道x路x号',
-        year: '2000年',
-        height: 50
-      },
-      {
-        idx: 2,
-        area: '渝北区',
-        name: '科技园',
-        address: '渝北区xxx街道x路x号',
-        year: '2000年',
-        height: 30
-      }
-    ],
-    }
+      tableData: [
+        {
+          idx: 1,
+          area: "江北区",
+          name: "大剧院",
+          address: "江北区xxx街道x路x号",
+          year: "2000年",
+          height: 50,
+        },
+        {
+          idx: 2,
+          area: "渝北区",
+          name: "科技园",
+          address: "渝北区xxx街道x路x号",
+          year: "2000年",
+          height: 30,
+        },
+      ],
+    };
   },
   methods: {
     rowClickHandler() {
-      this.$router.push('/detail')
-    }
-  }
-}
+      this.$router.push("/detail");
+    },
+  },
+};
 </script>
 
-<template >
+<template>
   <div>
     <basic-table :data="tableData" @row-click="rowClickHandler">
-      <el-table-column
-        prop="idx"
-        label="序号"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="area"
-        label="区域"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="建筑名称">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="地址">
-      </el-table-column>
-      <el-table-column
-        prop="year"
-        label="年代">
-      </el-table-column>
-      <el-table-column
-        prop="height"
-        label="高度（米）">
-      </el-table-column>
+      <el-table-column prop="idx" label="序号" width="180"> </el-table-column>
+      <el-table-column prop="area" label="区域" width="180"> </el-table-column>
+      <el-table-column prop="name" label="建筑名称"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="year" label="年代"> </el-table-column>
+      <el-table-column prop="height" label="高度（米）"> </el-table-column>
     </basic-table>
-      <br/>
-      <basic-pagination
+    <br />
+    <basic-pagination
       layout="->,prev, pager, next, sizes,jumper"
       :page-size="10"
       :page-sizes="[10, 20, 30, 40, 50, 100]"
-      :total="1000"/>
+      :total="1000"
+    />
   </div>
 </template>
 
-<style scoped lang='less'>
-</style>
+<style scoped lang="less"></style>

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

@@ -10,7 +10,7 @@
         <div>火灾总数</div>
       </div>
       <div>
-        <img src="../../../assets/images/Vector (1).png" alt="">
+        <img src="../../../assets/images/Vector (1).png" alt="" />
         <span class="num">15%</span>
       </div>
     </div>
@@ -24,7 +24,7 @@
         <div>亡人</div>
       </div>
       <div>
-        <img src="../../../assets/images/Vector (2).png" alt="">
+        <img src="../../../assets/images/Vector (2).png" alt="" />
         <span class="num">15%</span>
       </div>
     </div>
@@ -38,7 +38,7 @@
         <div>伤人</div>
       </div>
       <div>
-        <img src="../../../assets/images/Vector (1).png" alt="">
+        <img src="../../../assets/images/Vector (1).png" alt="" />
         <span class="num">10%</span>
       </div>
     </div>
@@ -48,8 +48,8 @@
         <div>
           <span class="fire-num">6</span>
           <span class="money">万元</span>
-          <img src="../../../assets/images/Vector (1).png" alt="">
-        <span class="num">15%</span>
+          <img src="../../../assets/images/Vector (1).png" alt="" />
+          <span class="num">15%</span>
         </div>
         <div class="manoue">直接经济损失</div>
       </div>
@@ -64,14 +64,14 @@
 <script></script>
 
 <style lang="less" scoped>
-.fire-list{
+.fire-list {
   display: flex;
   justify-content: space-around;
   margin: 14px 2px 10px 5px;
   letter-spacing: 1px;
 }
 // 渐变
-.fire{
+.fire {
   width: 105px;
   height: 40px;
   background: #2b3739;
@@ -81,26 +81,25 @@
   align-items: center;
   padding: 3px 0;
   border-radius: 2px;
-  .fire-num{
-    color: #FFBF1A;
+  .fire-num {
+    color: #ffbf1a;
     font-size: 20px;
-    
   }
-  .num{
-    color: #FB3636;
-    font-size: 16px
+  .num {
+    color: #fb3636;
+    font-size: 16px;
   }
 }
-img{
+img {
   display: inline-block;
   width: 10px;
   height: 20px;
 }
-.manoue{
+.manoue {
   font-size: 12px !important;
   margin-right: 10px;
 }
-.money{
+.money {
   margin-right: 5px;
 }
 </style>

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

@@ -1,14 +1,14 @@
 <script>
 import HiddenDangerTotal from "@/components/HiddenDangerTotal.vue";
-import RiskWarning from '@/components/RiskWarning.vue'
-import Rectification from './Rectification.vue'
+import RiskWarning from "@/components/RiskWarning.vue";
+import Rectification from "./Rectification.vue";
 export default {
   name: "HiddenDangerDetection",
   components: {
     HiddenDangerTotal,
     RiskWarning,
-    Rectification
-  }
+    Rectification,
+  },
 };
 </script>
 
@@ -17,8 +17,8 @@ export default {
     <div class="hidden-danger-detection_top">
       <div>按排查进度分：</div>
       <div class="hidden-danger-detection_top_inner">
-        <hidden-danger-total number="1302/23768" label="总条数" unit="栋/次"/>
-        <hidden-danger-total number="987/8768" label="隐患数" unit="栋/条"/>
+        <hidden-danger-total number="1302/23768" label="总条数" unit="栋/次" />
+        <hidden-danger-total number="987/8768" label="隐患数" unit="栋/条" />
       </div>
     </div>
     <div class="hidden-danger-detection_bottom">
@@ -26,8 +26,8 @@ export default {
         <RiskWarning />
       </div>
       <div class="item">
-        <Rectification/>
-        </div>
+        <Rectification />
+      </div>
     </div>
   </div>
 </template>
@@ -35,29 +35,28 @@ export default {
 <style scoped lang="less">
 .hidden-danger-detection_top {
   margin: 5px 4px;
-  background-color: rgba(0, 213, 255, .12);
+  background-color: rgba(0, 213, 255, 0.12);
   padding: 8px;
   display: flex;
   align-items: center;
   .hidden-danger-detection_top_inner {
     display: flex;
   }
-  
 }
 
 .hidden-danger-detection_bottom {
-    display: flex;
-    margin: 0px 4px;
-    gap: 4px;
-    .item {
-      background-color: rgba(0, 213, 255, .12);
-      height: 231px;
-      &:nth-child(1) {
-        width: 175px;
-      }
-      &:nth-child(2) {
-        width: 259px;
-      }
+  display: flex;
+  margin: 0px 4px;
+  gap: 4px;
+  .item {
+    background-color: rgba(0, 213, 255, 0.12);
+    height: 231px;
+    &:nth-child(1) {
+      width: 175px;
+    }
+    &:nth-child(2) {
+      width: 259px;
     }
   }
+}
 </style>

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

@@ -51,159 +51,159 @@ export default {
       activeName: "重庆市",
       activeMapData: [],
       heatData: [
-    {
-        "name": "万州区",
-        "value": 320
-    },
-    {
-        "name": "涪陵区",
-        "value": 21
-    },
-    {
-        "name": "渝中区",
-        "value": 121
-    },
-    {
-        "name": "大渡口区",
-        "value": 21
-    },
-    {
-        "name": "江北区",
-        "value": 32
-    },
-    {
-        "name": "沙坪坝区",
-        "value": 32
-    },
-    {
-        "name": "九龙坡区",
-        "value": 12
-    },
-    {
-        "name": "南岸区",
-        "value": 134
-    },
-    {
-        "name": "北碚区",
-        "value": 11
-    },
-    {
-        "name": "綦江区",
-        "value": 323
-    },
-    {
-        "name": "大足区",
-        "value": 23
-    },
-    {
-        "name": "渝北区",
-        "value": 123
-    },
-    {
-        "name": "巴南区",
-        "value": 89
-    },
-    {
-        "name": "黔江区",
-        "value": 111
-    },
-    {
-        "name": "长寿区",
-        "value": 150
-    },
-    {
-        "name": "江津区",
-        "value": 111
-    },
-    {
-        "name": "合川区",
-        "value": 19
-    },
-    {
-        "name": "永川区",
-        "value": 16
-    },
-    {
-        "name": "南川区",
-        "value": 21
-    },
-    {
-        "name": "璧山区",
-        "value": 32
-    },
-    {
-        "name": "铜梁区",
-        "value": 45
-    },
-    {
-        "name": "潼南区",
-        "value": 121
-    },
-    {
-        "name": "荣昌区",
-        "value": 111
-    },
-    {
-        "name": "开州区",
-        "value": 34
-    },
-    {
-        "name": "梁平区",
-        "value": 56
-    },
-    {
-        "name": "武隆区",
-        "value": 12
-    },
-    {
-        "name": "城口县",
-        "value": 15
-    },
-    {
-        "name": "丰都县",
-        "value": 45
-    },
-    {
-        "name": "垫江县",
-        "value": 32
-    },
-    {
-        "name": "忠县",
-        "value": 40
-    },
-    {
-        "name": "云阳县",
-        "value": 1
-    },
-    {
-        "name": "奉节县",
-        "value": 12
-    },
-    {
-        "name": "巫山县",
-        "value": 65
-    },
-    {
-        "name": "巫溪县",
-        "value": 145
-    },
-    {
-        "name": "石柱土家族自治县",
-        "value": 67
-    },
-    {
-        "name": "秀山土家族苗族自治县",
-        "value": 87
-    },
-    {
-        "name": "酉阳土家族苗族自治县",
-        "value": 100
-    },
-    {
-        "name": "彭水苗族土家族自治县",
-        "value": 123
-    }
-            ],
+        {
+          name: "万州区",
+          value: 320,
+        },
+        {
+          name: "涪陵区",
+          value: 21,
+        },
+        {
+          name: "渝中区",
+          value: 121,
+        },
+        {
+          name: "大渡口区",
+          value: 21,
+        },
+        {
+          name: "江北区",
+          value: 32,
+        },
+        {
+          name: "沙坪坝区",
+          value: 32,
+        },
+        {
+          name: "九龙坡区",
+          value: 12,
+        },
+        {
+          name: "南岸区",
+          value: 134,
+        },
+        {
+          name: "北碚区",
+          value: 11,
+        },
+        {
+          name: "綦江区",
+          value: 323,
+        },
+        {
+          name: "大足区",
+          value: 23,
+        },
+        {
+          name: "渝北区",
+          value: 123,
+        },
+        {
+          name: "巴南区",
+          value: 89,
+        },
+        {
+          name: "黔江区",
+          value: 111,
+        },
+        {
+          name: "长寿区",
+          value: 150,
+        },
+        {
+          name: "江津区",
+          value: 111,
+        },
+        {
+          name: "合川区",
+          value: 19,
+        },
+        {
+          name: "永川区",
+          value: 16,
+        },
+        {
+          name: "南川区",
+          value: 21,
+        },
+        {
+          name: "璧山区",
+          value: 32,
+        },
+        {
+          name: "铜梁区",
+          value: 45,
+        },
+        {
+          name: "潼南区",
+          value: 121,
+        },
+        {
+          name: "荣昌区",
+          value: 111,
+        },
+        {
+          name: "开州区",
+          value: 34,
+        },
+        {
+          name: "梁平区",
+          value: 56,
+        },
+        {
+          name: "武隆区",
+          value: 12,
+        },
+        {
+          name: "城口县",
+          value: 15,
+        },
+        {
+          name: "丰都县",
+          value: 45,
+        },
+        {
+          name: "垫江县",
+          value: 32,
+        },
+        {
+          name: "忠县",
+          value: 40,
+        },
+        {
+          name: "云阳县",
+          value: 1,
+        },
+        {
+          name: "奉节县",
+          value: 12,
+        },
+        {
+          name: "巫山县",
+          value: 65,
+        },
+        {
+          name: "巫溪县",
+          value: 145,
+        },
+        {
+          name: "石柱土家族自治县",
+          value: 67,
+        },
+        {
+          name: "秀山土家族苗族自治县",
+          value: 87,
+        },
+        {
+          name: "酉阳土家族苗族自治县",
+          value: 100,
+        },
+        {
+          name: "彭水苗族土家族自治县",
+          value: 123,
+        },
+      ],
     };
   },
   // props: {
@@ -435,7 +435,7 @@ export default {
                 shadowBlur: 15,
                 areaColor: "#257AB2",
               },
-            }
+            },
           },
           {
             type: "map",
@@ -455,7 +455,7 @@ export default {
                 shadowBlur: 8,
                 areaColor: "#0A2763",
               },
-            }
+            },
           },
         ],
 
@@ -517,22 +517,22 @@ export default {
           left: 10,
           // color: ["#b5f8ff", "#235d99"],
           // min: 1000,
-      // max: 38000000,
-      inRange: {
-        color: [
-          // '#313695',
-          // '#4575b4',
-          // '#74add1',
-          // '#abd9e9',
-          // '#e0f3f8',
-          // '#ffffbf',
-          // '#fee090',
-          '#fdae61',
-          '#f46d43',
-          '#d73027',
-          '#a50026'
-        ]
-      },
+          // max: 38000000,
+          inRange: {
+            color: [
+              // '#313695',
+              // '#4575b4',
+              // '#74add1',
+              // '#abd9e9',
+              // '#e0f3f8',
+              // '#ffffbf',
+              // '#fee090',
+              "#fdae61",
+              "#f46d43",
+              "#d73027",
+              "#a50026",
+            ],
+          },
           // min: 0,
           // max: maxMap > 0 ? maxMap : 1,
           calculable: true,
@@ -561,17 +561,18 @@ export default {
               color: "#fff",
             },
             select: {
-              label:{ // 选中区域的label(文字)样式
-                color: '#fff'
+              label: {
+                // 选中区域的label(文字)样式
+                color: "#fff",
               },
               itemStyle: {
-                areaColor: '#75b9da',
+                areaColor: "#75b9da",
                 borderColor: "#0f417f",
                 shadowColor: "#5a9cdd",
                 shadowBlur: 0,
                 shadowOffsetX: 0,
                 shadowOffsetY: 10,
-              }
+              },
             },
             itemStyle: {
               normal: {
@@ -617,8 +618,8 @@ export default {
             layoutCenter: ["50%", "50%"],
             layoutSize: "100%",
             map: mapName, // 使用
-            data: data
-          }
+            data: data,
+          },
         ],
       };
       const chart = echarts.init(mapChart, "light");

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

@@ -1,99 +1,107 @@
 <template>
-    <div class="gress-box">
-        <div>
-            <div class="gress"> 
-                <span>按整改进度分</span>
-                <span>单位：条</span>
+  <div class="gress-box">
+    <div>
+      <div class="gress">
+        <span>按整改进度分</span>
+        <span>单位：条</span>
+      </div>
+      <div class="num">
+        <span class="gress-num">存在隐患数</span>
+        <linear-text text="3276" fontSize="16px" />
+      </div>
+      <div>
+        <ul>
+          <li class="list-one">
+            <span class="line-list">待计划整改</span>
+            <div class="line">
+              <span
+                class="line-num"
+                :style="{
+                  width: Math.round(80) + '%',
+                }"
+              ></span>
             </div>
-            <div class="num">
-                <span class="gress-num">存在隐患数</span>
-                <linear-text  text="3276" fontSize="16px" />
+          </li>
+          <li class="list-one">
+            <span class="line-list">待计划整改</span>
+            <div class="line">
+              <span
+                class="line-num"
+                :style="{
+                  width: Math.round(80) + '%',
+                }"
+              ></span>
             </div>
-            <div>
-                <ul>
-                    <li class="list-one">
-                        <span class="line-list">待计划整改</span>
-                        <div class="line">
-                            <span class="line-num"  :style="{
-            width: Math.round(80) + '%',
-          }"></span>
-                        </div>
-                    </li>
-                    <li class="list-one">
-                        <span class="line-list">待计划整改</span>
-                        <div class="line">
-                            <span class="line-num"  :style="{
-            width: Math.round(80) + '%',
-          }"></span>
-                        </div>
-                    </li>
-                    <li class="list-one">
-                        <span class="line-list">待计划整改</span>
-                        <div class="line" title="123">
-                            <span class="line-num"  :style="{
-            width: Math.round(80) + '%',
-          }"></span>
-                        </div>
-                    </li>
-                </ul>
+          </li>
+          <li class="list-one">
+            <span class="line-list">待计划整改</span>
+            <div class="line" title="123">
+              <span
+                class="line-num"
+                :style="{
+                  width: Math.round(80) + '%',
+                }"
+              ></span>
             </div>
-        </div>
+          </li>
+        </ul>
+      </div>
     </div>
+  </div>
 </template>
 
-<script >
-
+<script>
 export default {
-   // eslint-disable-next-line vue/multi-word-component-names
-   name: 'Rectification'
-}
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: "Rectification",
+};
 </script>
 
 <style scoped>
-.gress-box{
-    padding: 20px 10px;
+.gress-box {
+  padding: 20px 10px;
 }
-.gress{
-    width: 100%;
-    display: flex;
-    font-size: 12px;
-    justify-content: space-between;
+.gress {
+  width: 100%;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-between;
 }
-.gress-num{
-    color: #00C2FF;
-    margin-right: 18px;
-    font-size: 12px;
+.gress-num {
+  color: #00c2ff;
+  margin-right: 18px;
+  font-size: 12px;
 }
-.num{
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
+.num {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
 }
-.list-one{
-    height: 34px;
-    background-color:rgba(0, 213,255, .12) ;
-    margin-top: 14px;
-    padding: 0 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.list-one {
+  height: 34px;
+  background-color: rgba(0, 213, 255, 0.12);
+  margin-top: 14px;
+  padding: 0 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.line{
-    width: 148px;
-    height: 10px;
-    background:#79A1C7 ;
-    display: inline-block;
-    position: relative;
+.line {
+  width: 148px;
+  height: 10px;
+  background: #79a1c7;
+  display: inline-block;
+  position: relative;
 }
-.line-list{
-    margin-top: 2px;
+.line-list {
+  margin-top: 2px;
 }
-.line-num{
-position: absolute;
-top: 0;
-display: inline-block;
-height: 10px;
-background: linear-gradient(180deg, #00D1FF 0%, rgba(0, 255, 224, .87) 100%);;
-z-index: 1000;
+.line-num {
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  height: 10px;
+  background: linear-gradient(180deg, #00d1ff 0%, rgba(0, 255, 224, 0.87) 100%);
+  z-index: 1000;
 }
 </style>

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

@@ -38,20 +38,20 @@ export default {
           text: "{value|1773}栋\n{name|高层建筑总数}",
           x: "39%",
           y: "center",
-          textAlign: 'center',
+          textAlign: "center",
           textStyle: {
             color: "#fff",
             fontSize: 12,
             rich: {
-                value: {
-                    color: '#fff',
-                    fontSize: 28,
-                    lineHeight: 28,
-                },
-                name: {
-                    color: '#fff',
-                    lineHeight: 12
-                },
+              value: {
+                color: "#fff",
+                fontSize: 28,
+                lineHeight: 28,
+              },
+              name: {
+                color: "#fff",
+                lineHeight: 12,
+              },
             },
           },
         },
@@ -80,7 +80,7 @@ export default {
             avoidLabelOverlap: false,
             label: {
               normal: {
-                color: '#fff',
+                color: "#fff",
                 show: true,
                 position: "outside",
                 formatter: (params) => {
@@ -104,7 +104,7 @@ export default {
                 show: false,
                 textStyle: {
                   fontSize: 14,
-                  color: "#fff"
+                  color: "#fff",
                 },
               },
             },

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

@@ -211,7 +211,7 @@ img {
 .unit {
   margin-right: 12px;
 }
-.build-line{
+.build-line {
   display: inline-block;
   margin-top: 6px;
 }

app/src/views/Home/index.vue

@@ -1,69 +1,55 @@
 <template>
-   <div
-        style="padding: 0px 35px; display: flex; justify-content: space-between"
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+    <div>
+      <border-panel
+        height="302px"
+        style="margin-bottom: 6px; cursor: pointer"
+        title="基础信息"
+        @click="openBasicModal"
       >
-        <div>
-          <border-panel
-            height="302px"
-            style="margin-bottom: 6px; cursor: pointer;"
-            title="基础信息"
-            @click="openBasicModal"
-          >
-            <BasicInfo />
-          </border-panel>
-          <border-panel
-            height="346px"
-            style="margin-bottom: 6px"
-            title="隐患排查"
-          >
-            <HiddenDangerDetection />
-          </border-panel>
-          <border-panel height="296px" title="自主管理">
-            <AutonomousManagement />
-          </border-panel>
-        </div>
-        <div class="display: flex;">
-          <div class="map">
-            <MapCharts />
-          </div>
-          <div>
-            <border-panel
-              title="警情动态"
-              width="938px"
-              height="321px"
-              :header-type="1"
-            >
-              <AlarmingSituationDynamics />
-            </border-panel>
-          </div>
-        </div>
-        <div>
-          <border-panel
-            height="311px"
-            style="margin-bottom: 6px"
-            title="风险预警"
-          >
-            <RiskWarning />
-          </border-panel>
-          <border-panel
-            height="331px"
-            style="margin-bottom: 6px"
-            title="智慧消防"
-          >
-            <WisdomFire />
-          </border-panel>
-          <border-panel height="298px" title="火灾指标">
-         <FireIndex/>
-            <template #ext-header>
-              <!-- TODO  实现火灾指标日期范围切换事件 -->
-              <button-block :items="['月', '年']" />
-            </template>
-          </border-panel>
-        </div>
-        <basic-modal ref="basicInfoModal" title="基本信息" >
-          <BasicInfoModalContent />
-        </basic-modal>
+        <BasicInfo />
+      </border-panel>
+      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
+        <HiddenDangerDetection />
+      </border-panel>
+      <border-panel height="296px" title="自主管理">
+        <AutonomousManagement />
+      </border-panel>
+    </div>
+    <div class="display: flex;">
+      <div class="map">
+        <MapCharts />
       </div>
+      <div>
+        <border-panel
+          title="警情动态"
+          width="938px"
+          height="321px"
+          :header-type="1"
+        >
+          <AlarmingSituationDynamics />
+        </border-panel>
+      </div>
+    </div>
+    <div>
+      <border-panel height="311px" style="margin-bottom: 6px" title="风险预警">
+        <RiskWarning />
+      </border-panel>
+      <border-panel height="331px" style="margin-bottom: 6px" title="智慧消防">
+        <WisdomFire />
+      </border-panel>
+      <border-panel height="298px" title="火灾指标">
+        <FireIndex />
+        <template #ext-header>
+          <!-- TODO  实现火灾指标日期范围切换事件 -->
+          <button-block :items="['月', '年']" />
+        </template>
+      </border-panel>
+    </div>
+    <basic-modal ref="basicInfoModal" title="基本信息">
+      <BasicInfoModalContent />
+    </basic-modal>
+  </div>
 </template>
 <script>
 import BasicInfo from "./components/BasicInfo.vue";
@@ -73,8 +59,8 @@ import HiddenDangerDetection from "./components/HiddenDangerDetection.vue";
 import MapCharts from "./components/MapCharts.vue";
 import RiskWarning from "./components/RiskWarning.vue";
 import WisdomFire from "./components/WisdomFire.vue";
-import FireIndex from './components/FireIndex.vue'
-import BasicInfoModalContent from './components/BasicInfoModalContent.vue'
+import FireIndex from "./components/FireIndex.vue";
+import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
 export default {
   name: "HomePage",
   components: {
@@ -86,13 +72,13 @@ export default {
     AutonomousManagement,
     HiddenDangerDetection,
     FireIndex,
-    BasicInfoModalContent
+    BasicInfoModalContent,
   },
   methods: {
     openBasicModal() {
-      this.showModal("basicInfoModal")
-    }
-  }
+      this.showModal("basicInfoModal");
+    },
+  },
 };
 </script>
 <style scoped>

app/vite.config.js

@@ -17,7 +17,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url))
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
   server: {

components/BasicModal/index.js

@@ -1,26 +1,25 @@
 import BasicModal from "./index.vue";
 
-
 BasicModal.install = function (app) {
   app.component(BasicModal.name, BasicModal);
   app.mixin({
     methods: {
       showModal(ref) {
-        const modal = this.$refs[ref]
-        console.log(modal)
+        const modal = this.$refs[ref];
+        console.log(modal);
         if (modal) {
-          modal.showModal()
+          modal.showModal();
         }
       },
       closeModal(ref) {
-        const modal = this.$refs[ref]
-        console.log(modal)
+        const modal = this.$refs[ref];
+        console.log(modal);
         if (modal) {
-          modal.closeModal()
+          modal.closeModal();
         }
-      }
-    }
-  })
-}
+      },
+    },
+  });
+};
 
 export default BasicModal;

components/BasicModal/index.vue

@@ -1,57 +1,57 @@
 <script>
-import { Dialog as ElDialog } from 'element-ui'
+import { Dialog as ElDialog } from "element-ui";
 
 export default {
-  name: 'BasicModal',
+  name: "BasicModal",
   components: {
-    ElDialog
+    ElDialog,
   },
   data() {
     return {
-      visible: false
-    }
+      visible: false,
+    };
   },
   props: {
     top: {
       type: String,
-      default: "184px"
+      default: "184px",
     },
     width: {
       type: String,
-      default: "1456px"
-    }
+      default: "1456px",
+    },
   },
   methods: {
     showModal() {
-      this.visible = true
+      this.visible = true;
     },
     closeModal() {
-      this.visible = false
-    }
-  }
-}
+      this.visible = false;
+    },
+  },
+};
 </script>
 
-<template >
+<template>
   <el-dialog
-  :append-to-body="false"
-  :modal-append-to-body="false"
-  :visible.sync="visible"
-  :top="top"
-  :width="width"
-  v-bind="$attrs"
-  v-on="$listeners"
->
+    :append-to-body="false"
+    :modal-append-to-body="false"
+    :visible.sync="visible"
+    :top="top"
+    :width="width"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
     <slot />
   </el-dialog>
 </template>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 ::v-deep(.el-dialog) {
   background: none;
   color: #fff;
   .el-dialog__header {
-    background-color: rgba(0, 102, 255, .26);
+    background-color: rgba(0, 102, 255, 0.26);
     color: #fff;
     height: 60px;
     box-sizing: border-box;
@@ -63,20 +63,20 @@ export default {
     .el-dialog__title::before {
       content: "";
       display: inline-block;
-      background: url('../assets/modal_header.svg') no-repeat center center;
+      background: url("../assets/modal_header.svg") no-repeat center center;
       width: 9px;
       height: 14px;
       margin-right: 10px;
     }
-    
+
     .el-dialog__headerbtn .el-dialog__close {
       color: #fff;
     }
   }
-  
+
   .el-dialog__body {
-      color: #fff;
-      background-color: rgba(3, 18, 57, .78);
-    }
+    color: #fff;
+    background-color: rgba(3, 18, 57, 0.78);
+  }
 }
 </style>

components/BasicPagination/index.vue

@@ -1,80 +1,86 @@
 <script>
-import {Pagination as ElPagination } from 'element-ui'
+import { Pagination as ElPagination } from "element-ui";
 
 export default {
-  name: 'BasicPagination',
+  name: "BasicPagination",
   components: {
-    ElPagination
-  }
-}
+    ElPagination,
+  },
+};
 </script>
 
-<template >
+<template>
   <el-pagination
-  background
-  popper-class="page-number"
-  class="basic-pagination"
-  v-bind="$attrs"
-  v-on="$listeners"
+    background
+    popper-class="page-number"
+    class="basic-pagination"
+    v-bind="$attrs"
+    v-on="$listeners"
   >
-</el-pagination>
+  </el-pagination>
 </template>
 
-<style lang='less'>
-
+<style lang="less">
 .basic-pagination.el-pagination.is-background {
-  .el-pagination__jump,.el-pagination__total{
+  .el-pagination__jump,
+  .el-pagination__total {
     color: #fff !important;
   }
-  .el-pagination__jump .el-input__inner{
-    border: 1px solid rgba(0, 213, 255, .60);
-    background-color: #4167A0 !important;
+  .el-pagination__jump .el-input__inner {
+    border: 1px solid rgba(0, 213, 255, 0.6);
+    background-color: #4167a0 !important;
     color: #fff !important;
   }
-  .el-pagination__sizes .el-input__inner{
-    border: 1px solid rgba(0, 213, 255, .60);
-    background-color: #4167A0 !important;
+  .el-pagination__sizes .el-input__inner {
+    border: 1px solid rgba(0, 213, 255, 0.6);
+    background-color: #4167a0 !important;
     color: #fff !important;
   }
   .el-pager li:not(.disabled).active {
-    background-color: #2F7DF2 !important; 
+    background-color: #2f7df2 !important;
     color: #fff !important;
   }
-  .el-pager li.number,li.more {
-    background-color: #4167A0 !important;
-    border: 1px solid rgba(0, 213, 255, .60);
+  .el-pager li.number,
+  li.more {
+    background-color: #4167a0 !important;
+    border: 1px solid rgba(0, 213, 255, 0.6);
     color: #fff !important;
   }
-  .btn-prev,.btn-next {
-    background-color: #4167A0 !important;
-    border: 1px solid rgba(0, 213, 255, .60);
+  .btn-prev,
+  .btn-next {
+    background-color: #4167a0 !important;
+    border: 1px solid rgba(0, 213, 255, 0.6);
   }
-  .btn-prev:not(.disabled),.btn-next:not(.disabled) {
+  .btn-prev:not(.disabled),
+  .btn-next:not(.disabled) {
     color: #fff !important;
-    border: 1px solid rgba(0, 213, 255, .60);
+    border: 1px solid rgba(0, 213, 255, 0.6);
   }
 }
 
-.el-select-dropdown.el-popper.page-number{
-  background-color: #4167A0 ;
+.el-select-dropdown.el-popper.page-number {
+  background-color: #4167a0;
 }
-.el-select-dropdown.el-popper.page-number .popper__arrow::after{
-  border-bottom-color: #4167A0 ;
+.el-select-dropdown.el-popper.page-number .popper__arrow::after {
+  border-bottom-color: #4167a0;
 }
 .el-select-dropdown.el-popper.page-number {
-  border: 1px solid rgba(0, 213, 255, .60) !important;
+  border: 1px solid rgba(0, 213, 255, 0.6) !important;
 }
 .el-select-dropdown.el-popper.page-number li.el-select-dropdown__item span {
-  color: #fff ;
+  color: #fff;
 }
-.el-select-dropdown.el-popper.page-number li.el-select-dropdown__item.selected span {
-  color: #2F7DF2 ;
+.el-select-dropdown.el-popper.page-number
+  li.el-select-dropdown__item.selected
+  span {
+  color: #2f7df2;
 }
 .el-select-dropdown.el-popper.page-number .el-select-dropdown__item.hover {
-  background-color: #2F7DF2;
+  background-color: #2f7df2;
 }
-.el-select-dropdown.el-popper.page-number li.el-select-dropdown__item.hover.selected span {
+.el-select-dropdown.el-popper.page-number
+  li.el-select-dropdown__item.hover.selected
+  span {
   color: #fff !important;
 }
-
 </style>

components/BasicTable/index.vue

@@ -1,41 +1,40 @@
 <script>
-import { Table as ElTable, TableColumn as ElTableColumn} from 'element-ui'
+import { Table as ElTable, TableColumn as ElTableColumn } from "element-ui";
 
 export default {
-  name: 'BasicTable',
+  name: "BasicTable",
   components: {
     ElTable,
-    ElTableColumn
+    ElTableColumn,
   },
   data() {
-    return {
-    }
-  }
-}
+    return {};
+  },
+};
 </script>
 
-<template >
+<template>
   <el-table
-  class="basic-table"
-    style="width: 100%;" 
+    class="basic-table"
+    style="width: 100%"
     header-row-class-name="basic-table-header-row"
     row-class-name="basic-table-row"
     v-bind="$attrs"
     v-on="$listeners"
-    >
+  >
     <slot />
   </el-table>
 </template>
 
-<style lang='less'>
+<style lang="less">
 .basic-table.el-table {
   background: none;
 }
 .basic-table.el-table .basic-table-header-row {
   background-color: transparent;
 }
-.basic-table.el-table .basic-table-header-row  .el-table__cell{
-  background-color: rgba(0, 133, 255, .25);
+.basic-table.el-table .basic-table-header-row .el-table__cell {
+  background-color: rgba(0, 133, 255, 0.25);
   text-align: center;
   color: #fff;
   border-bottom: none;
@@ -46,20 +45,23 @@ export default {
 .basic-table.el-table .basic-table-row:hover {
   cursor: pointer;
 }
-.basic-table.el-table .basic-table-row .el-table__cell{
-  background-color: rgba(7, 61, 100, .35) ;
+.basic-table.el-table .basic-table-row .el-table__cell {
+  background-color: rgba(7, 61, 100, 0.35);
   color: #fff;
-  border-bottom: 1px dashed  #5290a7;
+  border-bottom: 1px dashed #5290a7;
   text-align: center;
 }
 .basic-table.el-table .basic-table-row:nth-last-child(1) .el-table__cell {
   border-bottom: none;
 }
-.basic-table.el-table.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
-  background-color: rgba(0, 213, 255, .20) ;
+.basic-table.el-table.el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background-color: rgba(0, 213, 255, 0.2);
 }
 
-.basic-table.el-table tr  { 
+.basic-table.el-table tr {
   background-color: transparent;
   color: #fff;
 }
@@ -67,8 +69,8 @@ export default {
   width: 100%;
 }
 .basic-table.el-table::before {
-    height: 0px;
- }
+  height: 0px;
+}
 // .basic-table.el-table td.el-table__cell, .basic-table.el-table th.el-table__cell.is-leaf {
 //   background-color: rgba(7, 61, 100, .35) !important;
 //   color: #fff;

components/BorderPanel/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div @click="e => $emit('click', e)" class="border-panel" :style="borderPanelStyle">
+  <div
+    @click="(e) => $emit('click', e)"
+    class="border-panel"
+    :style="borderPanelStyle"
+  >
     <div
       class="border-panel_header"
       :style="{
@@ -62,7 +66,7 @@ export default {
       };
     },
     headerImageBgUrl: function () {
-      console.log(this.headerType)
+      console.log(this.headerType);
       return headerTitleBgs[this.$props.headerType];
     },
   },

components/index.js

@@ -13,7 +13,7 @@ const components = [
   ButtonGroupItem,
   BasicModal,
   BasicPagination,
-  BasicTable
+  BasicTable,
 ];
 
 function install(app) {
@@ -22,8 +22,16 @@ function install(app) {
   });
 }
 
-export { BorderPanel, LinearText, BasicTable, ButtonBlock, ButtonGroup, ButtonGroupItem
-  , BasicModal, BasicPagination};
+export {
+  BorderPanel,
+  LinearText,
+  BasicTable,
+  ButtonBlock,
+  ButtonGroup,
+  ButtonGroupItem,
+  BasicModal,
+  BasicPagination,
+};
 
 export default {
   install,