大型安保新需求排版+自适应调整

src/components/bar/index2.vue

@@ -0,0 +1,228 @@
+<template>
+  <div ref="bar" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataMap: { type: Object, default: () => [] },
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.getData();
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  methods: {
+    getData() {
+      // let dataMap = this.dataMap;
+      var chartData = {
+        value: 100,
+        total: 100,
+      };
+
+      let max = chartData.total;
+      let value = chartData.value;
+      let echartsMap = this.$echarts.getInstanceByDom(this.$refs.bar);
+      if (echartsMap == null) {
+        echartsMap = this.$echarts.init(this.$refs.bar);
+      }
+      echartsMap.setOption({
+        title: {
+          text: '{a|118}{b|  家}\n{c|总数}',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: '.35rem',
+                color: '#29EEF3'
+              },
+              b: {
+                fontSize: '.175rem',
+                color: '#fff',
+                padding: [0, 0, 0, 0]
+              },
+              c: {
+                fontSize: '.175rem',
+                color: '#ffffff',
+                padding: [10, 0, 0]
+              }
+            }
+          }
+        },
+        angleAxis: {
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        radiusAxis: {
+          type: 'category',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+          },
+          data: [],
+        },
+        polar: {
+          radius: '100%',
+          center: ['50%', '50%'],
+        },
+        series: [
+          {
+            name: '小环',
+            type: 'gauge',
+            splitNumber: 32,
+            radius: '92%',
+            center: ['50%', '50%'],
+            startAngle: 0,
+            endAngle: -359.9999,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#15E1FD',
+                width: 1,
+                shadowBlur: 1,
+                shadowColor: '#15E1FD',
+              },
+              length: 15,
+              splitNumber: 3
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              show: false
+            }
+          },
+          // 极坐标系下柱状图
+          // 实际值
+          {
+            type: 'bar',
+            data: [value],
+            z: 1,
+            coordinateSystem: 'polar',
+            barMaxWidth: 5,
+            name: '出租率',
+            roundCap: 1,
+            color: {
+              colorStops: [{
+                offset: 0,
+                color: 'rgba(33,196,170,0.9)',
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(33,196,170,0.65)',
+              },
+              {
+                offset: 0.48,
+                color: 'rgba(33,196,170,0.25)',
+              },
+              {
+                offset: 0.98,
+                color: 'rgba(33,196,170,0.1)',
+              },]
+            }
+          },
+          // 背景图形
+          {
+            type: 'bar',
+            data: [max],
+            z: 0,
+            silent: true,
+            coordinateSystem: 'polar',
+            barMaxWidth: 5,
+            roundCap: true,
+            color: 'rgba(40,68,115,1)',
+            barGap: '-100%',
+          },
+          // 尾端小圆点 饼图
+          {
+            type: 'pie',
+            // 饼图大小跟外层极坐标系相同，需手动调试
+            radius: '94%',
+            center: ['50%', '50%'],
+            hoverAnimation: false,
+            startAngle: 180,
+            endAngle: 0,
+            silent: 1,
+            z: 10,
+            data: [
+              // 实际值，背景色透明
+              {
+                name: '',
+                value: value > 75 ? (25 - (100 - value)) / max : (25 + value) / 100,
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: 'transparent',
+                },
+              },
+              {
+                // 画中间的图标 (小圆点)
+                value: 0,
+                label: {
+                  position: 'inside',
+                  backgroundColor: 'rgba(255,255,255, 0.9)',
+                  borderRadius: 4,
+                  padding: 4,
+                  borderWidth: 3,
+                  borderColor: 'rgba(255,255,255, 0.24)',
+                },
+              },
+              // 透明填充 angleAxis 的max相同 max : 2
+              {
+                value: value > 75 ? 1 - (25 - (100 - value)) / max : 1 - (25 + value) / 100,
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: 'transparent',
+                },
+              },
+            ],
+          },
+        ],
+      });
+
+    },
+    resize() {
+      echarts.init(this.$refs.bar).resize();
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/components/unitBox/index.vue

@@ -1,54 +1,7 @@
 <template>
 
-
-    <!-- 医疗机构清单 -->
-    <div class="rightBotContent" v-if="typeValue==1" style="margin-top:15px;height: 100%;">
-        <el-table  ref="reportTable" height="100%" :data="streetDynamicData"  class="transparentTableRow" style="width: 100%"
-            @mouseenter="autoScroll(true)" @mouseleave="autoScroll()">
-            <el-table-column v-for="item in streetDynamicHeaderData" :key="item.prop" :prop="item.prop" align="center"
-                :label="item.name">
-                <template #default="scope">
-                    <el-tooltip placement="left" trigger="click">
-                        <template #content>
-                            <div class="tableTooltip">
-                                <div class="tableTitle" ref="ff">
-                                    <div>物联动态详情</div>
-                                </div>
-                                <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeIsTooltip" />
-                                <el-row class="tableContent">
-                                    <el-col :span="24">
-                                        街镇：
-                                        <span>{{ scope.row.streetTown ? scope.row.streetTown : "--" }}</span>
-                                    </el-col>
-                                    <el-col :span="24">
-                                        设备总数：<span>{{ scope.row.medicalName ? scope.row.medicalName : "--" }}</span>
-                                    </el-col>
-                                    <el-col :span="24">
-                                        在线数：<span> {{ scope.row.address ? scope.row.address : "--" }}</span>
-                                    </el-col>
-                                    <el-col :span="24">
-                                        在线率：<span>{{ scope.row.dangerIssue ? scope.row.dangerIssue : "--" }}</span>
-                                    </el-col>
-                                    <el-col :span="24">
-                                        处置率：<span>{{ scope.row.processedRate ? scope.row.processedRate : "--" }}</span>
-                                    </el-col>
-                                </el-row>
-                            </div>
-                        </template>
-
-                        <template>
-                            <div class="name-wrapper">
-                                {{ scope.row[item.prop] }}
-                            </div>
-                        </template>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-        </el-table>
-    </div>
-
-    <!-- 电动车自行车现状 -->
-    <div  v-if="typeValue==2" style="margin-top:.25rem">
+    <!-- 摸排报告  列表 -->
+    <div  v-if="typeValue==1" style="margin-top:.25rem">
         <el-row class="ebItem">
             <el-col :offset="1" :span="4"><img  src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
             <el-col  :span="8">华漕镇</el-col>
@@ -77,18 +30,19 @@
             <el-col  :span="2" style="color:#73FBFD;text-align:center"> <i class="el-icon-arrow-right"></i></el-col>
             <div class="panel-footer"></div>
         </el-row>
-    </div>  
-
-
+    </div> 
 
-    <!-- 宾馆酒店信息统计 -->
-    <div  v-if="typeValue==3">
+     <!-- 宾馆酒店信息统计   大型商业  各街镇 规模租赁 三合一   图表+统计 -->
+     <div  v-if="typeValue==2||typeValue==3||typeValue==4||typeValue==5||typeValue==6||typeValue==10">
         <el-row >
-            <el-col :span="8">图表区域</el-col>
-            <el-col :span="16">
+            <el-col :span="10">
+            <bar></bar>
+        
+        </el-col>
+            <el-col :span="14">
                 <el-row>
-                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
-                        <div style="padding: 0.3rem 0; text-align: center">
+                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .125rem .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
+                        <div style="padding: 0.2rem 0; text-align: center">
                             <span style="display: block">
                                 <Strong style=" color: #00C8B8" >
                                     <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">723</CountTo>
@@ -98,37 +52,37 @@
                             <span>华漕镇</span>
                         </div>
                     </el-col>
-                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
-                        <div style="padding: 0.3rem 0; text-align: center">
+                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .125rem .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
+                        <div style="padding: 0.2rem 0; text-align: center">
                             <span style="display: block">
                                 <Strong style=" color: #068DFF" >
                                     <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">72</CountTo>
                                 </Strong>
                                 家
                             </span>
-                            <span>华漕镇</span>
+                            <span>新虹街道</span>
                         </div>
                     </el-col>
-                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
-                        <div style="padding: 0.3rem 0; text-align: center">
+                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .125rem .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
+                        <div style="padding: 0.2rem 0; text-align: center">
                             <span style="display: block">
                                 <Strong style=" color: #FF843A" >
                                     <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">72</CountTo>
                                 </Strong>
                                 家
                             </span>
-                            <span>华漕镇</span>
+                            <span>七宝镇</span>
                         </div>
                     </el-col>
-                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
-                        <div style="padding: 0.3rem 0; text-align: center">
+                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .125rem .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
+                        <div style="padding: 0.2rem 0; text-align: center">
                             <span style="display: block">
                                 <Strong style=" color: #7DD807" >
                                     <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">72</CountTo>
                                 </Strong>
                                 家
                             </span>
-                            <span>华漕镇</span>
+                            <span >虹桥镇</span>
                         </div>
                     </el-col>
                 </el-row>
@@ -138,11 +92,66 @@
     </div>
 
 
+
+    <!-- 养老  医疗机构清单 表格 -->
+    <div class="rightBotContent" v-if="typeValue==7||typeValue==8||typeValue==9" style="margin-top:15px;height: 100%;">
+        <el-table  ref="reportTable" height="100%" :data="streetDynamicData"  class="transparentTableRow" style="width: 100%"
+            @mouseenter="autoScroll(true)" @mouseleave="autoScroll()">
+            <el-table-column v-for="item in streetDynamicHeaderData" :key="item.prop" :prop="item.prop" align="center"
+                :label="item.name">
+                <template #default="scope">
+                    <el-tooltip placement="left" trigger="click">
+                        <template #content>
+                            <div class="tableTooltip">
+                                <div class="tableTitle" ref="ff">
+                                    <div>物联动态详情</div>
+                                </div>
+                                <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeIsTooltip" />
+                                <el-row class="tableContent">
+                                    <el-col :span="24">
+                                        街镇：
+                                        <span>{{ scope.row.streetTown ? scope.row.streetTown : "--" }}</span>
+                                    </el-col>
+                                    <el-col :span="24">
+                                        设备总数：<span>{{ scope.row.medicalName ? scope.row.medicalName : "--" }}</span>
+                                    </el-col>
+                                    <el-col :span="24">
+                                        在线数：<span> {{ scope.row.address ? scope.row.address : "--" }}</span>
+                                    </el-col>
+                                    <el-col :span="24">
+                                        在线率：<span>{{ scope.row.dangerIssue ? scope.row.dangerIssue : "--" }}</span>
+                                    </el-col>
+                                    <el-col :span="24">
+                                        处置率：<span>{{ scope.row.processedRate ? scope.row.processedRate : "--" }}</span>
+                                    </el-col>
+                                </el-row>
+                            </div>
+                        </template>
+
+                        <template>
+                            <div class="name-wrapper">
+                                {{ scope.row[item.prop] }}
+                            </div>
+                        </template>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+
+     
+
+
+
+   
+
 </template>
 
 <script>
 import linstener from "@c/mixins/linstener";
+import bar from "@c/bar/index2";
 export default {
+    components: { bar },
     props: {
         typeValue: { type: Number, default: () => 3 },
 

src/views/rescue-station.vue

@@ -1555,6 +1555,7 @@ export default {
             height: calc(50% - 0.125rem);
             max-height: calc(50% - 0.125rem);
             margin-top: 0.125rem;
+            font-size:.175rem;
             .leftCenterContent {
                 height: calc(100% - 0.4375rem);
             }

src/views/security-plan.vue

@@ -14,7 +14,7 @@
                         <el-row>
                             <el-col
                                 :span="5"
-                                style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 4px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
+                                style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 4px .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
                                 v-for="(item, index) in diversionArea"
                                 :key="index"
                             >
@@ -502,16 +502,42 @@ export default {
         options: [
         {
             value: '1',
-            label: '国家机构安全隐患清单',
+            label: '电动自行车现状模排报告',
         },
         {
             value: '2',
-            label: '电动自行车现状摸排报告',
+            label: '宾馆酒店信息统计',
         },
         {
             value: '3',
-            label: '宾馆酒店信息统计',
-        }],
+            label: '大型商业综合体统计',
+        },{
+            value: '4',
+            label: '街镇小区数量统计',
+        },
+        {
+            value: '5',
+            label: '规模租赁公寓统计',
+        },
+        {
+            value: '6',
+            label: '三合一场所信息统计',
+        },{
+            value: '7',
+            label: '养老机构安全隐患清单',
+        },
+        {
+            value: '8',
+            label: '医疗机构安全隐患清单',
+        },
+        {
+            value: '9',
+            label: '重大火灾隐患单位清单',
+        },{
+            value: '10',
+            label: '重点单位信息统计',
+        },
+        ],
         zfjly1:undefined,
         zfjly2:undefined,
         selectVideoData: [],