Merge branch 'master' of http://113.204.105.114:10011/TwoKe/zhgkpt-datav

app/src/components/unit3D.vue

@@ -1,56 +1,57 @@
 <script setup>
-import { onMounted, ref,watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
 import "echarts-gl";
 const props = defineProps({
   fierList: Array,
-})
+});
 let chart, option;
 const pieChart3d = ref();
 const legendItems = ref([
   {
-    name: '有管理单位（物业）',
-    color: '#5ef8c9'
+    name: "有管理单位（物业）",
+    color: "#5ef8c9",
   },
   {
-    name: '有管理单位（非物业）',
-    color: '#5e92f8'
+    name: "有管理单位（非物业）",
+    color: "#5e92f8",
   },
   {
-    name: '居民自主管理',
-    color: '#F4F85E'
+    name: "居民自主管理",
+    color: "#F4F85E",
   },
   {
-    name: '街道社区代管',
-    color: '#FC2626'
+    name: "街道社区代管",
+    color: "#FC2626",
   },
   {
-    name: '其他管理形式',
-    color: '#1162fe'
+    name: "其他管理形式",
+    color: "#1162fe",
   },
   {
-    name: '无管理主体',
-    color: '#FF7A00'
+    name: "无管理主体",
+    color: "#FF7A00",
   },
-])
+]);
 function showValue(name) {
-  return props.fierList.find(item => item.name === name)?.value
+  return props.fierList.find((item) => item.name === name)?.value;
 }
 function initChart() {
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
-  option = getPie3D(props.fierList.map(item => ({
-    ...item,
-    label: {
-      show: true
-    },
-    itemStyle: {
-      color:  (() => {
-      const temp = legendItems.value.find(i => i.name === item.name)
-      return temp.color
-    })()
-    }
-  })),
+  option = getPie3D(
+    props.fierList.map((item) => ({
+      ...item,
+      label: {
+        show: true,
+      },
+      itemStyle: {
+        color: (() => {
+          const temp = legendItems.value.find((i) => i.name === item.name);
+          return temp.color;
+        })(),
+      },
+    })),
     0.75
   );
 
@@ -162,9 +163,12 @@ onMounted(() => {
   initChart();
 });
 
-watch(() => props.fierList, () => {
-  initChart();
-})
+watch(
+  () => props.fierList,
+  () => {
+    initChart();
+  }
+);
 
 // 生成扇形的曲面参数方程
 function getParametricEquation(
@@ -242,10 +246,10 @@ function getParametricEquation(
 
     z(u, v) {
       if (u < -Math.PI * 0.5) {
-          return Math.sin(u);
+        return Math.sin(u);
       }
       if (u > Math.PI * 2.5) {
-          return Math.sin(u);
+        return Math.sin(u);
       }
       return Math.sin(v) > 0 ? 1 : -1;
     },
@@ -395,9 +399,19 @@ function getPie3D(pieData, internalDiameterRatio) {
   <div class="container">
     <div ref="pieChart3d" class="chart"></div>
     <ul class="legend">
-      <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
-        '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
+      <li
+        v-for="(legend, idx) in legendItems"
+        @click="$emit('click-item', legend.name)"
+        :style="{
+          '--bg': legend.color,
+        }"
+        :key="idx"
+      >
+        {{ legend.name }}
+        <span style="color: rgb(68, 241, 255)">{{
+          showValue(legend.name)
+        }}</span>
+      </li>
     </ul>
   </div>
 </template>

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

@@ -40,12 +40,11 @@ export default {
 
   methods: {
     initChart(data) {
-      const x = [];
-      data.forEach((p) => {
-        if (x.indexOf(p.gd) < 0) {
-          x.push(p.gd);
-        }
-      });
+      const x = ["30m及以下",
+            "30~50m(含)",
+            "50~80m(含)",
+            "80~100m(含)",
+            "100m以上"];
       const sideData = [];
       x.forEach((p) => {
         const val = data.find((k) => k.gd === p);

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

@@ -25,12 +25,13 @@
         </li>
       </ul>
       <div
-        style="margin-top: 30px; margin-left: 70px"
+        style="display: flex;margin-top: 60px;width: 100%;justify-content: center;"
         v-show="list&&list.length == 0"
       >
         <img src="../../../assets/images/null2.png" alt="" />
       </div>
     </VueSeamlessScroll>
+   
   </div>
 </template>
 
@@ -75,6 +76,7 @@ export default {
     classOption() {
       return {
         singleHeight: 51,
+        autoPlay:  this.list.length >= 10,
       };
     },
   },

app/src/views/FireCondition/components/FireIndex/Chart.vue

@@ -1,66 +1,83 @@
-<template >
-  <div ref="chart" style="height: 200px;"></div>
+<template>
+  <div>
+    <div
+      ref="chart"
+      style="height: 200px"
+      v-show="items && items.length > 0"
+    ></div>
+    <div
+      style="margin-top: 0px; margin-left: 140px"
+      v-show="items && items.length == 0"
+    >
+      <img
+        src="../../../../assets/images/null2.png"
+        alt=""
+        style="width: 150px; height: 150px"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 export default {
-  name: 'ChartComponent',
+  name: "ChartComponent",
   props: {
     items: Array,
     label: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
     // 初始化表格
-    this.init()
+    this.init();
   },
   watch: {
     items: {
       handler() {
-        this.reload()
+        this.reload();
       },
-      deep: true
+      immediate: true,
+      deep: true,
     },
     label: {
       handler() {
         this.chart.setOption({
           xAxis: {
-            data: this.label
-          }
+            data: this.label,
+          },
         });
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   methods: {
     init() {
-      this.chart = echarts.init(this.$refs.chart)
+      this.chart = echarts.init(this.$refs.chart);
       this.chart.setOption({
-          tooltip: {
-            trigger: "axis",
-            formatter: "{b} : {c}",
-            axisPointer: {
-              // 坐标轴指示器，坐标轴触发有效
-              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-            },
-            confine: true,
-            extraCssText: "z-index: 1000;",
-            backgroundColor: "#02809a",
-            borderColor: "rgba(0,213,255, .6)",
-            textStyle: {
-              color: "#fff",
-            },
+        tooltip: {
+          trigger: "axis",
+          formatter: "{b} : {c}",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
+          textStyle: {
+            color: "#fff",
           },
+        },
         xAxis: {
-          type: 'category',
+          type: "category",
           axisLine: {
             show: false,
           },
@@ -69,19 +86,19 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: '#fff',
-            fontSize: 8
+            color: "#fff",
+            fontSize: 8,
           },
-          data: this.label
+          data: this.label,
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           //坐标轴
           axisLine: {
             show: false,
           },
           axisLabel: {
-            color: '#fff'
+            color: "#fff",
           },
           axisTick: {
             //y轴刻度线
@@ -91,70 +108,71 @@ export default {
           splitLine: {
             lineStyle: {
               color: "#4784e8",
-              type: 'dashed'
+              type: "dashed",
             },
           },
-      },
+        },
         grid: {
-          right: '8px',
-          top: '20px'
+          right: "8px",
+          top: "20px",
         },
         series: [
           {
             data: this.items,
-            type: 'bar',
+            type: "bar",
             barWidth: 10,
             barGap: 20,
             showBackground: true,
             backgroundStyle: {
-              color: 'rgba(180, 180, 180, 0.2)'
+              color: "rgba(180, 180, 180, 0.2)",
             },
             label: {
               show: true,
-              color: '#fff',
-              position: 'top'
+              color: "#fff",
+              position: "top",
             },
             itemStyle: {
               normal: {
-                color: '#0085FF'
+                color: "#0085FF",
               },
               emphasis: {
-                color: '#00E0FF',
+                color: "#00E0FF",
                 borderWidth: 0,
-              }
-            }
-          }
-        ]
-      })
+              },
+            },
+          },
+        ],
+      });
       // if (this.chart && this.chart.clearLoop) {
       //   this.chart.clearLoop();
       // }
       // this.chart = loopShowTooltip(this.chart);
-  
-      this.chart
+
+      this.chart;
     },
     reload() {
       // 重载数据
       if (this.chart) {
-        const max = this.items.map(item => parseInt(item.value || 0)).sort((a,b) => b - a)
+        const max = this.items
+          .map((item) => parseInt(item.value || 0))
+          .sort((a, b) => b - a);
         this.chart.setOption({
           yAxis: {
             min: 0,
             max: function (value) {
-                return max[0] === 0 ? 8 : Math.ceil(value.max) ;
-            }
+              return max[0] === 0 ? 8 : Math.ceil(value.max);
+            },
           },
           series: [
             {
-              data: this.items
-            }
-          ]
+              data: this.items,
+            },
+          ],
         });
       }
     },
-  }
-}
+  },
+};
 </script>
 
-<style scoped lang='less'>
-</style>
+<style scoped lang="less"></style>

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

@@ -87,7 +87,11 @@
         </ul>
       </div>
       <div>
-        <Chart :items="chartData" :label="chartLabel" />
+        <Chart v-show="chartData.length > 0" :items="chartData" :label="chartLabel" />
+        <div style="display: flex;justify-content: center;"
+        v-show="chartData&&chartData.length == 0">
+          <img style="width: 200px;height: 170px;" src="../../../../assets/images/null2.png" alt="" />
+        </div>
       </div>
     </div>
   </div>

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

@@ -393,7 +393,9 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
+      }"  :key="idx">{{ legend.name }}
+      <span style="color:rgb(68, 241, 255); font-size: 13px;">{{ showValue(legend.name) }}</span>
+    </li>
     </ul>
   </div>
 </template>

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

@@ -386,7 +386,9 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems" @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
+      }"  :key="idx">{{ legend.name }}
+      <span style="color:rgb(68, 241, 255); font-size: 13px;">{{ showValue(legend.name) }}</span>
+    </li>
     </ul>
   </div>
 </template>

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

@@ -393,10 +393,12 @@ function getPie3D(pieData, internalDiameterRatio) {
 <template>
   <div class="container">
     <div ref="pieChart3d" class="chart"></div>
-    <ul class="legend">
+    <ul class="legend" >
       <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
+      }"  :key="idx">{{ legend.name }}
+      <span style="color:rgb(68, 241, 255); font-size: 13px;">{{ showValue(legend.name) }}</span>
+    </li>
     </ul>
   </div>
 </template>

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

@@ -79,7 +79,11 @@ export default {
               margin: 0 4px;
             "
           ></span>
-          <span>住宅建筑({{ listGids.zzjz }})</span>
+          <span>住宅建筑
+            <span style="color: rgb(68, 241, 255);">
+            {{ listGids.zzjz }}
+            </span>
+          </span>
         </li>
         <li @click="showModlus('公共建筑')" >
           <span
@@ -91,7 +95,11 @@ export default {
               margin: 0 4px;
             "
           ></span>
-          <span>公共建筑({{ listGids.ggjz }})</span>
+          <span>公共建筑
+            <span style="color: rgb(68, 241, 255);">
+            {{ listGids.ggjz }}
+            </span>
+          </span>
         </li>
         <li @click="showModlus('工业建筑')" style="margin-top: 8px;">
           <span
@@ -103,7 +111,11 @@ export default {
               margin: 0 4px;
             "
           ></span>
-          <span>工业建筑({{ listGids.gyjz }})</span>
+          <span>工业建筑
+            <span style="color: rgb(68, 241, 255);">
+            {{ listGids.gyjz}}
+            </span>
+          </span>
         </li>
       </ul>
     </div>

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

@@ -1,5 +1,18 @@
 <template >
-  <div ref="chart" style="height: 200px;"></div>
+  <div>
+    <div ref="chart" style="height: 200px;"  v-show="items && items.length > 0"></div>
+    <div
+      style="margin-top: 0px; margin-left: 140px"
+      v-show="items && items.length == 0"
+    >
+      <img
+        src="../../../../assets/images/null2.png"
+        alt=""
+        style="width: 150px; height: 150px"
+      />
+    </div>
+  </div>
+ 
 </template>
 
 <script>
@@ -27,6 +40,7 @@ export default {
       handler() {
         this.reload()
       },
+      // immediate:true,
       deep: true
     },
     label: {
@@ -37,6 +51,7 @@ export default {
           }
         });
       },
+      immediate:true,
       deep: true
     }
   },

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

@@ -17,7 +17,9 @@
               margin: 0 4px;
             "
           ></span>
-          <span>消防设施({{ yhType[0]?.value }})</span>
+          <span>消防设施
+            <span style="color: rgb(68, 241, 255);">{{ yhType[0]?.value }}</span>
+          </span>
         </li>
         <li @click="showModlus('生命通道')">
           <span
@@ -29,7 +31,9 @@
               margin: 0 4px;
             "
           ></span>
-          <span>生命通道({{ yhType[1]?.value }})</span>
+          <span>生命通道
+            <span style="color: rgb(68, 241, 255);">{{ yhType[1]?.value }}</span>
+          </span>
         </li>
         <li @click="showModlus('用电用气')" style="margin-right: 5px;" >
           <span
@@ -41,7 +45,9 @@
               margin: 0 4px;
             "
           ></span>
-          <span>用电用气({{ yhType[2]?.value }})</span>
+          <span>用电用气
+            <span style="color: rgb(68, 241, 255);">{{ yhType[2]?.value }}</span>
+          </span>
         </li>
         <li @click="showModlus('消防管理')">
           <span
@@ -53,7 +59,9 @@
               margin: 0 4px;
             "
           ></span>
-          <span>消防管理({{ yhType[3]?.value }})</span>
+          <span>消防管理
+            <span style="color: rgb(68, 241, 255);">{{ yhType[3]?.value }}</span>
+          </span>
         </li>
       </ul>
     </div>

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

@@ -254,11 +254,11 @@ export default {
                 const maxData = this.calcMaxData(val)
                 const intData = toInt(Math.ceil(maxData / 5))
                 return [
-                  {min: intData*4, max: intData * 5, label: '重大风险'},
-                  {min: intData*3, max: intData * 4, label: '较大风险'},
-                  {min: intData*2, max: intData * 3, label: '一般风险'},
-                  {min: intData, max: intData * 2, label: '低风险'},
-                  {min: 0, max: intData, label: ' '},
+                  {min: intData*4, max: intData * 5, label: '高风险'},
+                  {min: intData*3, max: intData * 4, label: '较高风险'},
+                  {min: intData*2, max: intData * 3, label: '中风险'},
+                  {min: intData, max: intData * 2, label: '较低风险'},
+                  {min: 0, max: intData, label: '低风险'},
                 ]
               })()
             }
@@ -404,7 +404,7 @@ export default {
           backgroundColor: "rgba(0, 0, 0, 0.82)",
           formatter: this.formatter,
           textStyle: {
-            color: "#fff",
+            color: "#33F0FF",
           },
           extraCssText: `z-index: 1000;margin:0px;padding:0px;
   border: 1px solid rgba(61, 115, 255, 0.72);`,
@@ -434,11 +434,11 @@ export default {
             const maxData = this.calcMaxData(data)
             const intData = toInt(Math.ceil(maxData / 5))
             return [
-              {min: intData*4, max: intData * 5, label: '重大风险'},
-              {min: intData*3, max: intData * 4, label: '较大风险'},
-              {min: intData*2, max: intData * 3, label: '一般风险'},
-              {min: intData, max: intData * 2, label: '低风险'},
-              {min: 0, max: intData, label: ' '},
+              {min: intData*4, max: intData * 5, label: '高风险'},
+              {min: intData*3, max: intData * 4, label: '较高风险'},
+              {min: intData*2, max: intData * 3, label: '中风险'},
+              {min: intData, max: intData * 2, label: '较低风险'},
+              {min: 0, max: intData, label: '低风险'},
             ]
           })()
         },

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

@@ -1,20 +1,25 @@
 <template>
-  <div style="display: flex;" >
+  <div style="display: flex">
     <div ref="chart" class="item" style="width: 280px; height: 259px" />
-    <ul style="margin: auto; font-size: 16px;">
-      <li @click="showStice('重大风险')" style="margin-bottom: 12px;">
+    <ul style="margin: auto; font-size: 16px">
+      <li @click="showStice('重大风险')" style="margin-bottom: 12px">
         <span
           style="
             display: inline-block;
             width: 12px;
             height: 12px;
-            background: #FF0B0B;
+            background: #ff0b0b;
             margin: 0 4px;
           "
         ></span>
-        <span>重大风险({{ showValue("重大风险") }})</span>
+        <span
+          >重大风险
+          <span style="color: rgb(68, 241, 255)">{{
+            showValue("重大风险")
+          }}</span>
+        </span>
       </li>
-      <li @click="showStice('较大风险')" style="margin-bottom: 12px;">
+      <li @click="showStice('较大风险')" style="margin-bottom: 12px">
         <span
           style="
             display: inline-block;
@@ -24,9 +29,14 @@
             margin: 0 4px;
           "
         ></span>
-        <span>较大风险({{ showValue("较大风险") }})</span>
+        <span
+          >较大风险
+          <span style="color: rgb(68, 241, 255)">{{
+            showValue("较大风险")
+          }}</span>
+        </span>
       </li>
-      <li @click="showStice('一般风险')" style="margin-bottom: 12px;">
+      <li @click="showStice('一般风险')" style="margin-bottom: 12px">
         <span
           style="
             display: inline-block;
@@ -36,7 +46,12 @@
             margin: 0 4px;
           "
         ></span>
-        <span>一般风险({{ showValue("一般风险") }})</span>
+        <span
+          >一般风险
+          <span style="color: rgb(68, 241, 255)">{{
+            showValue("一般风险")
+          }}</span>
+        </span>
       </li>
       <li @click="showStice('低风险')">
         <span
@@ -48,7 +63,12 @@
             margin: 0 4px;
           "
         ></span>
-        <span>低风险({{ showValue("低风险") }})</span>
+        <span
+          >低风险
+          <span style="color: rgb(68, 241, 255)">{{
+            showValue("低风险")
+          }}</span>
+        </span>
       </li>
     </ul>
   </div>
@@ -91,12 +111,11 @@ export default {
       immediate: true,
       deep: true,
     },
-    
   },
   methods: {
     showValue(label) {
-      const item = this.riskList.find(item => item.fxdj === label)
-      return item ? item.sl : 0
+      const item = this.riskList.find((item) => item.fxdj === label);
+      return item ? item.sl : 0;
     },
     initChart(srcData) {
       let data = [];
@@ -232,18 +251,18 @@ export default {
         //   data: data.map((p) => p.name),
         // },
         tooltip: {
-            show: true,
-            confine: true,
-            extraCssText: "z-index: 1000;",
-            backgroundColor: "#02809a",
-            borderColor: "rgba(0,213,255, .6)",
-            textStyle: {
-              color: "#fff",
-            },
-            formatter(params) {
-              return `${params.name}栋`
-            }
+          show: true,
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
+          textStyle: {
+            color: "#fff",
+          },
+          formatter(params) {
+            return `${params.name}栋`;
           },
+        },
       };
       // console.log(option.legend);
       this.chart.setOption(option);
@@ -279,9 +298,9 @@ export default {
       }
       return dataArr;
     },
-    showStice(val){
+    showStice(val) {
       this.$emit("showFxyj", val);
-    }
+    },
   },
 };
 </script>

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

@@ -138,7 +138,7 @@
               {{ frieList.smtdzs ? frieList.smtdzs : 0
               }}<span style="margin-right: 1px"></span>
               <!-- <span>{{ frieList.smtdlds ? frieList.smtdlds : 0 }}</span> -->
-              <div style="font-size: 12px; margin-top: 5px">个</div>
+              <div style="font-size: 12px; margin-top: 5px">（个）</div>
             </div>
 
             <ul class="pressure-list">

app/src/views/Home/index.vue

@@ -171,14 +171,30 @@ export default {
         },
         () => {
           const item = params.data.meta
-          let res = `${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名 <br />`;
-          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元<br/>`;
-          res += `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起&nbsp;&nbsp;&nbsp;&nbsp;`;
-          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人<br />`;
-          res += `重大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.重大风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
-          res += `较大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.较大风险 || 0}</span>栋<br/>`;
-          res += `一般风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.一般风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
-          res += `低风险风数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.低风险 || 0}</span>栋<br/>`;
+          let res =`
+          <table>
+            <tr >
+              <td style="padding-bottom:8px;">${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>直接财产损失 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>火灾起数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.火灾起数 || 0}</span>起</td>
+              <td>亡人数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.亡人数 || 0}</span>人</td>
+            </tr>
+            <tr>
+              <td>重大风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.重大风险 || 0}</span>栋</td>
+              <td>较大风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.较大风险 || 0}</span>栋</td>
+            </tr>
+            <tr>
+              <td>一般风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.一般风险 || 0}</span>栋</td>
+              <td>低风险风数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.低风险 || 0}</span>栋</td>
+            </tr>
+          </table>
+          `
           return res;
         }
       );

app/src/views/Iot/components/TotalityInfo.vue

@@ -34,13 +34,26 @@
     </div>
     <div class="ala-n">
       <div v-for="(item, index) in lineList" :key="index" class="alarm">
-        <div class="alarm-host">
-          <img :src="item.imgs" alt="" />
-          <div style="width: 90%">
+        <div class="alarm-host" >
+          <!-- <img :src="item.imgs" alt="" /> -->
+          <div style="width: 100%; font-size: 12px">
             <div class="inline-bor">
-              <span style="font-size: 12px">{{ item.text }}</span>
+              <span
+                style="
+                  font-size: 12px;
+                  display: inline-block;
+                  text-align: center;
+                  height: 25px;
+                  background: rgb(0, 112, 215);
+                  width: 84px;
+                  line-height: 25px;
+                  border-radius: 2px;
+                  margin:10px 4px;
+                "
+                >{{ item.text }}</span
+              >
               <template v-if="item.text !== '生命通道'">
-                <span class="calc-percent"
+                <span class="calc-percent" style="margin-left: 2px"
                   >{{ item.allnum }}/{{ item.average }}</span
                 >个/栋
               </template>
@@ -49,28 +62,31 @@
                 >个
               </template>
             </div>
-            <div class="on-line">
-              <div>
+
+            <div class="on-line" >
+              <!-- 在线 -->
+              <div >
                 <span class="online lines"></span>
                 <template v-if="item.text !== '生命通道'">
-                  <span style="font-size: 14px"
+                  <span style="font-size: 12px"
                     >{{ item.line }}/{{ item.linelds }}</span
                   >(个/栋)
                 </template>
-                <template>
-                  <span style="font-size: 14px">{{ item.line }}</span
+                <template v-if="item.text == '生命通道'">
+                  <span style="font-size: 12px">{{ item.line }}</span
                   >(个)
                 </template>
               </div>
+              <!-- 离线 -->
               <div>
                 <span class="offline lines"></span>
                 <template v-if="item.text !== '生命通道'">
-                  <span style="font-size: 14px"
+                  <span style="font-size: 12px"
                     >{{ item.offNum }}/{{ item.offNumlds }}</span
                   >(个/栋)
                 </template>
-                <template>
-                  <span style="font-size: 14px">{{ item.offNum }}</span
+                <template  v-if="item.text == '生命通道'">
+                  <span style="font-size: 12px">{{ item.offNum }}</span
                   >(个)
                 </template>
               </div>
@@ -78,25 +94,25 @@
           </div>
         </div>
       </div>
-      <div class="last-line">
-        <img src="../../../assets/images/Group 1321314604.png" alt="" />
-        <div style="width: 86%">
-          <div class="inline-bor">
+      <div class="last-line" style="padding:0 2px; font-size: 14px;">
+        <!-- <img src="../../../assets/images/Group 1321314604.png" alt="" /> -->
+        <div style="width: 99%">
+          <div class="inline-bor" style="margin-left: 4px;">
             <span style="font-size: 14px">消防控制室人员离岗</span>
-            <span>
-              <span class="calc-percent"
+            <span style="font-size: 14px;">
+              <span class="calc-percent" 
                 >{{ dwData.xfkzszs || 0 }}/{{ dwData.xfkzsds || 0 }}</span
               >个/栋</span
             >
           </div>
-          <div class="on-line">
+          <div class="on-line" style="margin-left: -10px;">
             <div>
-              <span class="online lines" style="font-size: 18px"
+              <span class="online lines" style="font-size: 16px"
                 >{{ dwData.xfkzszxs || 0 }}/{{ dwData.xfkzszxlds || 0 }}</span
               >(个/栋)
             </div>
             <div>
-              <span class="lines offline" style="font-size: 18px"
+              <span class="lines offline" style="font-size: 16px"
                 >{{ dwData.xfkzsgjs || 0 }}/{{ dwData.xfkzsgjlds || 0 }}</span
               >(个/栋)
             </div>
@@ -285,6 +301,7 @@ export default {
 
 .online::before {
   background-color: #2fde60;
+  margin: 0 5px;
 }
 
 .offline::before {
@@ -301,21 +318,21 @@ export default {
   );
   line-height: 40px;
   margin-top: 10px;
-  letter-spacing: 1px;
 
   .alarm-host {
-    display: inline-block;
+    // display: inline-block;
     display: flex;
-    align-items: center;
-    justify-content: space-around;
-    text-align: center;
+    flex-direction: column;
+    // align-items: center;
+    // justify-content: space-around;
+    // text-align: center;
   }
 
-  img {
-    display: inline-block;
-    width: 52px;
-    height: 49px;
-  }
+  // img {
+  //   display: inline-block;
+  //   width: 52px;
+  //   height: 49px;
+  // }
 
   .inline-bor {
     // width: 124px;
@@ -334,7 +351,7 @@ export default {
   border-radius: 50%;
   width: 10px;
   height: 10px;
-  margin-right: 6px;
+  margin-right: 2px;
 }
 
 .on-line {
@@ -370,7 +387,7 @@ export default {
 
     .calc-percent {
       color: #44f1ff;
-      font-size: 18px;
+      font-size: 12px;
     }
   }
 
@@ -381,4 +398,4 @@ export default {
     padding: 0px 10px;
   }
 }
-</style>
+</style>

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

@@ -127,7 +127,6 @@ export default {
     },
     openBasicModal1(val) {
       // this.unit = val;
-      console.log(this.type[this.checked]);
       this.params = {
         qx: val,
         fxdjYs: this.type[this.checked]

app/src/views/Risk/index.vue

@@ -128,14 +128,30 @@ export default {
         { title: params.name },
         () => {
           const item = params.data.meta
-          let res = `${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名 <br />`;
-          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元<br/>`;
-          res += `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起&nbsp;&nbsp;&nbsp;&nbsp;`;
-          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人<br />`;
-          res += `重大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.重大风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
-          res += `较大风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.较大风险 || 0}</span>栋<br/>`;
-          res += `一般风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.一般风险 || 0}</span>栋&nbsp;&nbsp;&nbsp;&nbsp;`;
-          res += `低风险风数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.低风险 || 0}</span>栋<br/>`;
+          let res =`
+          <table>
+            <tr>
+              <td style="padding-bottom:8px;">${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>直接财产损失 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>火灾起数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.火灾起数 || 0}</span>起</td>
+              <td>亡人数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.亡人数 || 0}</span>人</td>
+            </tr>
+            <tr>
+              <td>重大风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.重大风险 || 0}</span>栋</td>
+              <td>较大风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.较大风险 || 0}</span>栋</td>
+            </tr>
+            <tr>
+              <td>一般风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.一般风险 || 0}</span>栋</td>
+              <td>低风险风数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.低风险 || 0}</span>栋</td>
+            </tr>
+          </table>
+          `;
           return res;
         }
       );