feat: 隐患排查

app/src/assets/bg003.svg

@@ -0,0 +1,54 @@
+<svg width="166" height="35" viewBox="0 0 166 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_85_138)">
+<mask id="mask0_85_138" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-4" y="-1" width="177" height="32">
+<path d="M173 -0.309097H17.1722L-4 30.6909H151.828L173 -0.309097Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_85_138)">
+<path d="M27.0957 8.41818H153.763L139.909 30.2364H13.2415L27.0957 8.41818Z" fill="url(#paint0_linear_85_138)" fill-opacity="0.2"/>
+<path d="M1.13948 -2.49092H127.807L113.953 20.0545H-12.7148L1.13948 -2.49092Z" fill="url(#paint1_linear_85_138)" fill-opacity="0.2"/>
+<g style="mix-blend-mode:screen">
+<path d="M195.125 26.6909H-101.01V41.6909H195.125V26.6909Z" fill="url(#paint2_radial_85_138)"/>
+</g>
+<g style="mix-blend-mode:screen">
+<path d="M266.606 -104.309H-260.99V52.6909H266.606V-104.309Z" fill="url(#paint3_radial_85_138)"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_85_138" x1="83.5024" y1="8.41818" x2="83.5024" y2="30.2364" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00F0FF"/>
+<stop offset="1" stop-color="#00C2FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_85_138" x1="-12.7148" y1="8.7818" x2="127.807" y2="8.7818" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D1FF"/>
+<stop offset="1" stop-color="#00C2FF"/>
+</linearGradient>
+<radialGradient id="paint2_radial_85_138" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(46.5939 33.1864) rotate(-180) scale(164.453 7.237)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#00C2FF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0991CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#0E82A7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#006299" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#004F89" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#00425F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#00111B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_85_138" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1.98134 -36.3226) rotate(-180) scale(292.99 75.7472)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#00C2FF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0991CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#0E82A7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#006299" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#004F89" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#00425F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#00111B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_85_138">
+<rect width="166" height="35" fill="white" transform="matrix(-1 0 0 1 166 0)"/>
+</clipPath>
+</defs>
+</svg>

app/src/assets/main.css

@@ -4,6 +4,10 @@
   font-family: 'abel';/*声明一个名为iconfont的字体变量*/
   src: url('./fonts/Abel-Regular.ttf') format('truetype');
 }
+@font-face {
+  font-family: 'YouSheBiaoTiHei';/*声明一个名为iconfont的字体变量*/
+  src: url('./fonts/YouSheBiaoTiHei.ttf') format('truetype');
+}
 
 html,body {
   height: 100vh;

app/src/components/HiddenDangerTotal.vue

@@ -0,0 +1,46 @@
+<script>
+
+export default {
+  name: 'HiddenDangerTotal',
+  props: {
+    number: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    unit: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<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>
+    </div>
+    <linear-text :text="unit" fontSize="12px" style="font-family: 'YouSheBiaoTiHei';" ></linear-text>
+  </div>
+</template>
+
+<style scoped lang='less'>
+.hidden-danger-total {
+  background: url('../assets/bg003.svg') center no-repeat;
+  width: 166px;
+  height: 35px;
+  display: flex;
+  .hidden-danger-total__number {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding-right: 10px;
+  }
+}
+</style>

app/src/components/RiskWarning.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <div>
+      <div ref="chart" class="item" style="width: 175px; height: 231px;" />
+    </div>
+  </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();
+    // setTimeout(startTimer, 500);
+  },
+  methods: {
+    initChart() {
+      const option = {
+        // backgroundColor: '#043e9e',
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            fontSize: 12,
+          },
+          formatter: "{a} <br/>{b}",
+        },
+        legend: {
+          show: true,
+          right: 0,
+          bottom: 0,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 8,
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+          data: ["消防设施", "生命通道", "用电勇气", "消防管理"],
+        },
+        color: ["#00a2ff", "#00eaff", "#16c843", "#99f7ff"],
+        series: [
+          // 数据展示层
+          {
+            name: "建筑总数",
+            type: "pie",
+            center: ["40%", "45%"],
+            radius: ["35%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: true,
+                position: "outside",
+                formatter: (params) => {
+                  return "{b| " + params.name + "}{c|:" + params.value + "}\n";
+                },
+                padding: [0, -90],
+                align: "center",
+                rich: {
+                  b: {
+                    fontSize: 12,
+                    padding: [2, 0],
+                  },
+                  c: {
+                    fontSize: 14,
+                    // fontWeight:'bold',
+
+                    align: "right",
+                    padding: [2, 0],
+                  },
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  fontSize: 14,
+                  color: "#fff",
+                  // fontWeight: 'bold'
+                },
+              },
+            },
+            labelLine: {
+              normal: {
+                show: true,
+                length2: 75,
+              },
+            },
+            data: [
+              {
+                value: 14489,
+                name: "消防设施",
+              },
+              {
+                value: 14467,
+                name: "生命通道",
+              },
+              {
+                value: 37234,
+                name: "用电勇气",
+              },
+              {
+                value: 37255,
+                name: "消防管理",
+              },
+            ],
+          },
+          // 外边框虚线
+          {
+            type: "pie",
+            zlevel: 4,
+            silent: true,
+            center: ["40%", "45%"],
+            radius: ["55%", "56%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.createData(),
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+      //自适应图表
+      window.onresize = this.chart.resize;
+    },
+    createData() {
+      let dataArr = [];
+      for (var i = 0; i < 200; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            //name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: "#0475bd",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            //name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+  },
+};
+</script>
+
+<style scoped></style>

app/src/views/components/HiddenDangerDetection.vue

@@ -1,13 +1,59 @@
 <script>
+import HiddenDangerTotal from "@/components/HiddenDangerTotal.vue";
+import RiskWarning from '@/components/RiskWarning.vue'
 export default {
   name: "HiddenDangerDetection",
+  components: {
+    HiddenDangerTotal,
+    RiskWarning
+  }
 };
 </script>
 
 <template>
-  <div>
-    <!-- #00D5FF 4 5 4 435 65 -->
+  <div class="hidden-danger-detection">
+    <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="栋/条"/>
+      </div>
+    </div>
+    <div class="hidden-danger-detection_bottom">
+      <div class="item">
+        <RiskWarning />
+      </div>
+      <div class="item">2</div>
+    </div>
   </div>
 </template>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.hidden-danger-detection_top {
+  margin: 5px 4px;
+  background-color: rgba(0, 213, 255, .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;
+      }
+    }
+  }
+</style>