update

src/loveflow/assets/index.scss

@@ -1,4 +1,4 @@
-$designWidth: 1920;
+$designWidth: 2040;
 $designHeight: 1080;
 
 @function vw($px) {

src/loveflow/components/echart/bar/four.vue

@@ -28,7 +28,7 @@ export default {
           data: this.chartObj.legend,
           icon: "rect",
           right: "5%",
-          top: this.chartObj.legendTop || "2%",
+          top: this.chartObj.legendTop || "4%",
           itemWidth: 8, // 设置宽度
           itemHeight: 8, // 设置高度
           itemGap: 16, // 设置间距
@@ -39,7 +39,7 @@ export default {
           },
         },
         grid: {
-          top: this.chartObj.gridTop || "20%",
+          top: this.chartObj.gridTop || "15%",
           bottom: this.chartObj.gridBtm || "10%",
           left: this.chartObj.gridLeft || "6%",
           right: "5%",
@@ -65,6 +65,7 @@ export default {
           },
         },
         yAxis: {
+          name:"单位：吨",
           type: "value",
           splitLine: {
             show: true,

src/loveflow/components/echart/pie/five.vue

@@ -0,0 +1,179 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+let bgImg = require("@/assets/images/topic/pie.png");
+let iconImg = require("@/assets/images/topic/pieIcon.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let total = 0;
+      let data = [];
+      let barChartList = this.chartObj.data;
+      let legend = [];
+      for (var i = 0; i < barChartList.length; i++) {
+        legend.push(barChartList[i]["name"]);
+        total = total + barChartList[i].value;
+        data.push(
+          {
+            value: barChartList[i].value,
+            name: barChartList[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 6,
+              },
+            },
+          },
+          {
+            value: 20,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          data: legend,
+          orient: "vertical",
+          bottom: "6%",
+          left: "20%",
+          icon: "diamond",
+          itemHeight: 8,
+          itemWidth: 8,
+          itemGap: 16,
+          padding: 2,
+          //backgroundColor: "rgba(108,128,151,0.2)",
+          textStyle: {
+            color: "#D0DEEE",
+            align: "left",
+            verticalAlign: "middle",
+            fontSize: 12,
+            rich: {
+              name: {
+                width: 80,
+              },
+              rate: {
+                width: 60,
+                color: "#FFFFFF;",
+                fontSize: 16,
+              },
+            },
+          },
+          formatter: function (name) {
+            const item = barChartList.filter((item) => item.name === name)[0];
+            let rate = ((100 * item.value) / total).toFixed(2);
+            return `{name|${name}}{rate| ${item.value}} {rate| ${rate}%}`;
+          },
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: 110,
+                height: 110,
+                zIndex: 1,
+              },
+              left: "center",
+              top: 50,
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "pie",
+            radius: [60, 80],
+            width: 220,
+            height: 220,
+            center: ["center", 105],
+            clockWise: false,
+            hoverAnimation: false,
+            left: "center",
+            itemStyle: {},
+            label: {
+              show: true,
+              position: "center",
+              formatter: "{b_style|{b}}\n{c_style|{c}}",
+              rich: {
+                b_style: {
+                  padding: [0, 0, 10, 0],
+                  fontSize: 12,
+                  fontWeight: 400,
+                  color: "#D0DEEE",
+                },
+                c_style: {
+                  fontSize: 20,
+                  fontWeight: 500,
+                  color: "#D0DEEE",
+                },
+              },
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>

src/loveflow/components/echart/pie/four.vue

@@ -0,0 +1,175 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+let bgImg = require("@/assets/images/topic/pie.png");
+let iconImg = require("@/assets/images/topic/pieIcon.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let total = 0;
+      let data = [];
+      let barChartList = this.chartObj.data;
+      let legend = [];
+      for (var i = 0; i < barChartList.length; i++) {
+        legend.push(barChartList[i]["name"]);
+        total = total + barChartList[i].value;
+        data.push(
+          {
+            value: barChartList[i].value,
+            name: barChartList[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 6,
+              },
+            },
+          },
+          {
+            value: 20,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          data: legend,
+          orient: "vertical",
+          bottom: "6%",
+          left: "20%",
+          icon: "diamond",
+          itemHeight: 8,
+          itemWidth: 8,
+          itemGap: 16,
+          padding: 2,
+          //backgroundColor: "rgba(108,128,151,0.2)",
+          textStyle: {
+            color: "#D0DEEE",
+            align: "left",
+            verticalAlign: "middle",
+            fontSize: 12,
+            rich: {
+              name: {
+                width: 80,
+              },
+              rate: {
+                width: 60,
+                color: "#FFFFFF;",
+                fontSize: 16,
+              },
+            },
+          },
+          formatter: function (name) {
+            const item = barChartList.filter((item) => item.name === name)[0];
+            let rate = ((100 * item.value) / total).toFixed(2);
+            return `{name|${name}}{rate| ${item.value}} {rate| ${rate}%}`;
+          },
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: 110,
+                height: 110,
+                zIndex: 1,
+              },
+              left: "center",
+              top: 50,
+            },
+            {
+              type: "image",
+              style: {
+                image: iconImg,
+                width: 60,
+                height: 60,
+                zIndex: 2,
+              },
+              left: "center",
+              top: 74,
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "pie",
+            radius: [60, 80],
+            width: 220,
+            height: 220,
+            center: ["center", 105],
+            clockWise: false,
+            hoverAnimation: false,
+            left: "center",
+            itemStyle: {},
+            label: {
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>

src/loveflow/components/echart/radar/three.vue

@@ -0,0 +1,108 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      this.option = {
+        color: ["#C6403E", "#FF8A5A", "#5B8FF9"],
+        legend: {
+          show: false,
+        },
+        tooltip: {
+          show: false,
+        },
+        radar: {
+          center: ["50%", "50%"], // 外圆的位置
+          radius: "55%",
+          name: {
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 18,
+            },
+          },
+          axisName: {
+            color: "#D0DEEE",
+          },
+          indicator: this.chartObj.indicator,
+          splitArea: {
+            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            show: true,
+            areaStyle: {
+              // 分隔区域的样式设置。
+              color: ["transparent"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+            },
+          },
+          axisLine: {
+            // 指向外圈文本的分隔线样式
+            lineStyle: {
+              color: "rgba(61,183,171,0.1)",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "solid",
+              color: "rgba(61,183,171,0.1)", // 分隔线颜色
+              width: 2, // 分隔线线宽
+            },
+          },
+        },
+        series: [
+          {
+            type: "radar",
+            symbolSize: 6,
+            itemStyle: {
+              borderColor: "#ffffff",
+              borderWidth: 1,
+            },
+            lineStyle: {
+              width: 3,
+            },
+
+            data: [
+              {
+                value: [50, 60, 90, 30, 10, 80],
+                name: "商业射击馆枪支",
+                lineStyle: {
+                  color: "#5B8FF9",
+                },
+                areaStyle: {
+                  color: "rgba(91,143,249,0.2)",
+                },
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>

src/loveflow/components/echart/radar/two.vue

@@ -90,9 +90,7 @@ export default {
             lineStyle: {
               width: 3,
             },
-            areaStyle: {
+
-              color: "transparent",
-            },
             data: [
               {
                 value: [80, 80, 80, 70, 60, 50],
@@ -100,6 +98,9 @@ export default {
                 lineStyle: {
                   color: "#C6403E",
                 },
+                areaStyle: {
+                  color: "rgba(198,64,62,0.2)",
+                },
               },
               {
                 value: [40, 70, 50, 60, 30, 80],
@@ -107,6 +108,9 @@ export default {
                 lineStyle: {
                   color: "#FF8A5A",
                 },
+                areaStyle: {
+                  color: "rgba(255,138,90,0.2)",
+                },
               },
               {
                 value: [50, 60, 90, 30, 10, 80],
@@ -114,6 +118,9 @@ export default {
                 lineStyle: {
                   color: "#5B8FF9",
                 },
+                areaStyle: {
+                  color: "rgba(91,143,249,0.2)",
+                },
               },
             ],
           },

src/views/enterpriseRiskIndex/analysis.vue

@@ -304,17 +304,17 @@ export default {
 .analysisWrap {
   .riskCol {
     padding-left: vw(8);
-    font-size: vh(16);
+    font-size: vw(16);
 
     .riskName {
       height: 30px;
       display: flex;
-      margin-top: vh(6);
+      margin-top: vw(6);
       color: #d9e7ff;
 
       .riskIcon {
-        width: vh(24);
+        width: vw(24);
-        height: vh(24);
+        height: vw(24);
         background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
           center;
         background-size: 100% 100%;

src/views/enterpriseRiskIndex/components/iconCard.vue

@@ -41,7 +41,7 @@ export default {
       margin-right: 18px;
       padding-left: 10px;
       align-items: center;
-      height: vh(122);
+      height: vw(122);
       background: url("~@/assets/images/screen/error.png") no-repeat center
         center;
       background-size: 100% 100%;
@@ -49,7 +49,7 @@ export default {
         margin-right: 10px;
         .icon {
           width: vw(90);
-          height: vh(70);
+          height: vw(70);
           img {
             width: 100%;
             height: 100%;
@@ -61,14 +61,14 @@ export default {
         font-weight: 500;
         font-family: PingFangSC, PingFang SC;
         .riskItemName {
-          font-size: vh(18);
+          font-size: vw(18);
           color: #c4e5ff;
-          line-height: vh(25);
+          line-height: vw(25);
         }
         .riskItemValue {
-          font-size: vh(28);
+          font-size: vw(28);
           color: #ebf9ff;
-          line-height: vh(36);
+          line-height: vw(36);
           letter-spacing: 1px;
           text-shadow: 0px 0px 9px #159aff;
         }

src/views/enterpriseRiskIndex/components/leftCard.vue

@@ -36,12 +36,12 @@ export default {
   margin-left: 3%;
   padding-left: 20px;
   flex: 1;
-  height: vh(80);
+  height: vw(80);
   background: url("~@/assets/images/screen/zh.png") no-repeat center center;
   background-size: 100% 100%;
   .totalName {
     margin-bottom: 4px;
-    font-size: vh(16);
+    font-size: vw(16);
     font-weight: 500;
     color: #d0deee;
   }
@@ -53,12 +53,12 @@ export default {
       margin-right: 20px;
       font-weight: 500;
       .label {
-        font-size: vh(14);
+        font-size: vw(14);
         margin-right: 8px;
         color: #ffffff;
       }
       .value {
-        font-size: vh(22);
+        font-size: vw(22);
         margin-right: 4px;
         color: #80d9ff;
         letter-spacing: 1px;

src/views/enterpriseRiskIndex/components/rightCard.vue

@@ -38,12 +38,12 @@ export default {
   padding-left: 20px;
   margin-right: 5%;
   flex: 2;
-  height: vh(80);
+  height: vw(80);
   background: url("~@/assets/images/screen/zz.png") no-repeat center center;
   background-size: 100% 100%;
   .totalName {
     margin-bottom: 4px;
-    font-size: vh(16);
+    font-size: vw(16);
     font-weight: 500;
     color: #d0deee;
   }
@@ -55,12 +55,12 @@ export default {
       margin-right: 20px;
       font-weight: 500;
       .label {
-        font-size: vh(14);
+        font-size: vw(14);
         margin-right: 8px;
         color: #ffffff;
       }
       .value {
-        font-size: vh(22);
+        font-size: vw(22);
         margin-right: 4px;
         color: #80fff0;
         letter-spacing: 1px;

src/views/enterpriseRiskIndex/components/timeSelect.vue

@@ -77,6 +77,6 @@ export default {
 <style lang="scss" scoped>
 .chartOpt {
   @import "@/loveflow/assets/index.scss";
-  height: vh(30);
+  height: vw(30);
 }
 </style>

src/views/enterpriseRiskIndex/components/totalCard.vue

@@ -27,15 +27,15 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: vh(46);
+  height: vw(46);
   background: url("~@/assets/images/screen/total.png") no-repeat center center;
   background-size: 100% 100%;
-  font-size: vh(18);
+  font-size: vw(18);
   font-weight: 500;
   color: #d0deee;
   .totalText {
     margin-left: 16px;
-    font-size: vh(26);
+    font-size: vw(26);
     color: #ebf9ff;
     letter-spacing: 3px;
     text-shadow: 0px 0px 9px #159aff;

src/views/enterpriseRiskIndex/estimateDetail.vue

@@ -480,7 +480,7 @@ export default {
         .riskUpWrap {
           padding: 0 10px;
           .left {
-            width: 190px;
+            width: 220px;
           }
           .left,
           .right {

src/views/enterpriseRiskIndex/synthetical.vue

@@ -469,7 +469,7 @@ export default {
         height: calc(100% - 4vh);
         display: flex;
         .left {
-          width: 190px;
+          width: 220px;
         }
         .left,
         .right {
@@ -557,17 +557,17 @@ export default {
 .syntheticalWrap {
   .riskCol {
     padding-left: vw(8);
-    font-size: vh(16);
+    font-size: vw(16);
 
     .riskName {
-      height: vh(30);
+      height: vw(30);
       display: flex;
-      margin-top: vh(6);
+      margin-top: vw(6);
       color: #d9e7ff;
 
       .riskIcon {
-        width: vh(24);
+        width: vw(24);
-        height: vh(24);
+        height: vw(24);
         background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
           center;
         background-size: 100% 100%;
@@ -575,10 +575,10 @@ export default {
     }
     .totalWrap {
       display: flex;
-      margin-top: vh(40);
+      margin-top: vw(40);
     }
     .riskTotalPanel {
-      margin-top: vh(40);
+      margin-top: vw(40);
     }
   }
 }

src/views/enterpriseTopic/components/pCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="personCardWrap">
+    <div
+      class="icon"
+      :style="{ backgroundImage: 'url(' + info.icon + ')' }"
+    ></div>
+    <div class="name">{{ info.name }}</div>
+    <div class="value">{{ info.value.toLocaleString() }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.personCardWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: vw(256);
+  height: vw(275);
+  background: url("~@/assets/images/topic/ct.png") no-repeat center center;
+  background-size: 100% 100%;
+
+  .icon {
+    margin-top: vh(40);
+    width: vw(111);
+    height: vw(104);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% 100%;
+    margin-bottom: vw(6);
+  }
+  .name {
+    margin-bottom: vw(4);
+    font-size: vw(16);
+    color: #ffffff;
+  }
+  .value {
+    font-size: vw(18);
+    color: #f3fff9;
+    text-shadow: 0px 0px 9px rgba(87, 255, 238, 0.56);
+    background: radial-gradient(
+      52% 50% at 50% 24%,
+      rgba(103, 232, 217, 0.25) 0%,
+      rgba(14, 38, 88, 0) 100%
+    );
+  }
+  &:hover {
+    background: url("~@/assets/images/topic/xf.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+}
+</style>

src/views/enterpriseTopic/components/pTotal.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="pTotalWrap"
+    :style="{ backgroundImage: 'url(' + info.icon + ')' }"
+  >
+    <div class="value">{{ info.value.toLocaleString() }}</div>
+    <div class="name">{{ info.name }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.pTotalWrap {
+  margin-bottom: vw(16);
+  width: vw(240);
+  height: vw(70);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .value {
+    margin-left: vw(76);
+    font-family: AlibabaPuHuiTiM;
+    font-size: vw(24);
+    color: #ffffff;
+  }
+  .name {
+    margin-left: vw(76);
+    font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
+    font-weight: bold;
+    font-size: vw(14);
+    color: #d0deee;
+  }
+}
+</style>

src/views/enterpriseTopic/listGoods/index.vue

@@ -82,21 +82,27 @@
                     <div class="fsheIcon"></div>
                     <div class="fsheTitle">放射源种类及数量</div>
                   </div>
-                  <div class="fsheBody"></div>
+                  <div class="fsheBody">
+                    <pieFour :chartObj="mllObj"></pieFour>
+                  </div>
                 </div>
                 <div class="fsheWrap mr18">
                   <div class="fsheHead">
                     <div class="fsheIcon"></div>
                     <div class="fsheTitle">放射源运输</div>
                   </div>
-                  <div class="fsheBody"></div>
+                  <div class="fsheBody">
+                    <pieFive :chartObj="mlmObj"></pieFive>
+                  </div>
                 </div>
                 <div class="fsheWrap mr14">
                   <div class="fsheHead">
                     <div class="fsheIcon"></div>
                     <div class="fsheTitle">放射源使用</div>
                   </div>
-                  <div class="fsheBody"></div>
+                  <div class="fsheBody">
+                    <radarThree :chartObj="mlrObj"></radarThree>
+                  </div>
                 </div>
               </div>
             </div>
@@ -137,8 +143,11 @@
 import lineOne from "@/loveflow/components/echart/line/one.vue";
 import barFour from "@/loveflow/components/echart/bar/four.vue";
 import radarTwo from "@/loveflow/components/echart/radar/two.vue";
+import radarThree from "@/loveflow/components/echart/radar/three.vue";
+import pieFour from "@/loveflow/components/echart/pie/four.vue";
+import pieFive from "@/loveflow/components/echart/pie/five.vue";
 export default {
-  components: { lineOne, barFour,radarTwo },
+  components: { lineOne, barFour, radarTwo, radarThree, pieFour, pieFive },
   data() {
     return {
       tlObj: {
@@ -268,6 +277,56 @@ export default {
         yData: [12, 13, 14, 15, 11, 14],
         name: "民用枪支",
       },
+      mlrObj: {
+        indicator: [
+          {
+            name: "使用次数",
+            max: 100,
+          },
+          {
+            name: "使用部门",
+            max: 100,
+          },
+          {
+            name: "使用途径",
+            max: 100,
+          },
+          {
+            name: "使用人员",
+            max: 100,
+          },
+          {
+            name: "使用方式",
+            max: 100,
+          },
+          {
+            name: "关联单位",
+            max: 100,
+          },
+        ],
+        yData: [12, 13, 14, 15, 11, 14],
+        name: "放射源使用",
+      },
+      mllObj: {
+        color: ["#2B82F3", "#09C8F5", "#66C3FF", "#FEF699", "#E4FEF0"],
+        data: [
+          { value: 448, name: "中子源1" },
+          { value: 735, name: "中子源2" },
+          { value: 580, name: "中子源3" },
+          { value: 484, name: "中子源4" },
+        ],
+        name: "放射源种类及数量",
+      },
+      mlmObj: {
+        color: ["#2B82F3", "#66C3FF", "#E4FEF0", "#FF745A", "#FEF699"],
+        data: [
+          { value: 484, name: "航空运输1" },
+          { value: 567, name: "航空运输2" },
+          { value: 489, name: "航空运输3" },
+          { value: 517, name: "航空运输4" },
+        ],
+        name: "放射源运输",
+      },
     };
   },
 };
@@ -294,6 +353,8 @@ export default {
       display: flex;
       flex: 1;
       .screenCol {
+        display: flex;
+        flex-direction: column;
         flex: 1;
         height: 100%;
         background: url("~@/assets/images/topic/pcolT.png") no-repeat center
@@ -356,6 +417,8 @@ export default {
           display: flex;
           height: 100%;
           .fsheWrap {
+            display: flex;
+            flex-direction: column;
             flex: 1;
             height: calc(100% - 26px);
             margin-top: 12px;
@@ -486,14 +549,14 @@ export default {
         .screenName {
           display: flex;
           align-items: center;
-          padding-left: vh(6);
+          padding-left: vw(6);
-          height: vh(36);
+          height: vw(36);
-          font-size: vh(16);
+          font-size: vw(16);
           color: #d9e7ff;
           .screenIcon {
             margin-right: 2px;
-            width: vh(24);
+            width: vw(24);
-            height: vh(24);
+            height: vw(24);
             background: url("~@/assets/images/screen/riskIcon.png") no-repeat
               center center;
             background-size: 100% 100%;
@@ -502,29 +565,35 @@ export default {
           }
         }
         .screenChart {
-          position: relative;
+          flex: 1;
-          height: calc(100% - 3.3333vh);
+          display: flex;
+          flex-direction: column;
           .screenErrorWrap {
-            margin-top: vh(24);
+            margin-top: vw(16);
             .errorWrap {
-              width: vh(142);
+              width: vw(142);
-              height: vh(100);
+              height: vw(100);
               .errorNum {
-                font-size: vh(16);
+                font-size: vw(16);
               }
               .errorName {
-                font-size: vh(14);
+                font-size: vw(14);
               }
             }
           }
           .screenErrorAlarmWrap {
-            margin: vh(15) vh(15) 0;
+            margin: vw(15) vw(15) 0;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
             .screenErrorAlarm {
-              height: vh(56);
+              /* height: vw(56); */
-              margin-bottom: vh(15);
+              margin-bottom: vw(12);
+              flex: 1;
               font-size: vw(12);
               .line {
-                padding-left: vh(8);
+                padding-left: vw(8);
               }
             }
           }
@@ -534,17 +603,18 @@ export default {
               .fsheHead {
                 display: flex;
                 align-items: center;
-                height: vh(36);
+                height: vw(36);
                 .fsheIcon {
-                  width: vh(32);
+                  width: vw(32);
-                  height: vh(38);
+                  height: vw(38);
                 }
                 .fsheTitle {
-                  font-size: vh(14);
+                  font-size: vw(14);
                 }
               }
               .fsheBody {
-                height: calc(100% - 3.3333vh);
+                flex: 1;
+                /* height: calc(100% - 3.3333vw); */
               }
             }
           }
@@ -553,19 +623,19 @@ export default {
             .gunsLeft {
               .gunsItem {
                 .gunsIcon {
-                  width: vh(90);
+                  width: vw(90);
-                  height: vh(70);
+                  height: vw(70);
                 }
                 .gunsInfo {
-                  height: vh(70);
+                  /* height: vw(70); */
                   display: flex;
                   flex-direction: column;
                   justify-content: space-evenly;
                   .label {
-                    font-size: vh(18);
+                    font-size: vw(18);
                   }
                   .value {
-                    font-size: vh(28);
+                    font-size: vw(28);
                   }
                 }
               }

src/views/enterpriseTopic/personSafety/screen.vue

@@ -6,45 +6,66 @@
         <div class="screenCol mr18">
           <div class="screenName">
             <div class="screenIcon"></div>
-            <div class="screenNameText">人防数据</div>
+            <div class="screenNameText">重点岗位异常数</div>
           </div>
-          <div class="screenChart">
+          <div class="screenChart"></div>
-            <lineOne :chartObj="tlObj"></lineOne>
         </div>
+        <div class="screenCol screenMCol mr18">
+          <div class="totalWrap">
+            <div class="totalTitle">流动人口总数</div>
+            <div class="totalValue"></div>
           </div>
-        <div class="screenCol mr18">
+          <div class="totalTypeWrap">
-          <div class="screenName">
+            <div class="item">
-            <div class="screenIcon"></div>
+              <div class="label">实有人数</div>
-            <div class="screenNameText">物品使用情况</div>
+              <div class="value">213432</div>
             </div>
-          <div class="screenChart">
+            <div class="item">
-            <barFour :chartObj="tmObj"></barFour>
+              <div class="label">核销流动人员</div>
+              <div class="value">5487</div>
+            </div>
+          </div>
+          <div class="flowBtmWrap">
+            <div class="flowIconDz">
+              <div class="flowIcon"></div>
+            </div>
+          </div>
+
+          <div class="flowLeftWrap">
+            <pTotal :info="tmObj.l1"></pTotal>
+            <pTotal :info="tmObj.l2"></pTotal>
+          </div>
+          <div class="flowRightWrap">
+            <pTotal :info="tmObj.r1"></pTotal>
+            <pTotal :info="tmObj.r2"></pTotal>
+            <pTotal :info="tmObj.r3"></pTotal>
           </div>
         </div>
         <div class="screenCol">
           <div class="screenName">
             <div class="screenIcon"></div>
-            <div class="screenNameText">列管物品异常分析</div>
+            <div class="screenNameText">流动人员核查率</div>
           </div>
           <div class="screenChart"></div>
         </div>
       </div>
       <div class="screenRow screenRowBtm">
-        <div class="screenCol mr20">
         <div class="screenCol">
           <div class="screenName">
             <div class="screenIcon"></div>
-              <div class="screenNameText">放射源物品</div>
+            <div class="screenNameText">消防安全管理</div>
           </div>
-            <div class="screenChart"></div>
+          <div class="screenChart">
+            <div class="safeManagePanel">
+              <div
+                class="safeManageWrap"
+                v-for="item in mList"
+                :key="item.name"
+              >
+                <p-card :info="item"></p-card>
               </div>
             </div>
-        <div class="screenCol">
-          <div class="screenName">
-            <div class="screenIcon"></div>
-            <div class="screenNameText">民用枪支</div>
           </div>
-          <div class="screenChart"></div>
         </div>
       </div>
     </div>
@@ -52,44 +73,76 @@
 </template>
 <script>
 import headWrap from "@/views/home/head.vue";
-import lineOne from "@/loveflow/components/echart/line/one.vue";
+import pCard from "../components/pCard.vue";
-import barFour from "@/loveflow/components/echart/bar/four.vue";
+import pTotal from "../components/pTotal.vue";
 export default {
-  components: { headWrap, lineOne, barFour },
+  components: { headWrap, pCard, pTotal },
   data() {
     return {
-      tlObj: {
-        gridTop: "15%",
-        gridLeft: "8%",
-        yName: "单位：百分比",
-        legendTop: "4%",
-        xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
-        yData: [
-          [31, 41, 28, 87, 32, 12, 97, 79],
-          [51, 52, 68, 57, 12, 72, 57, 39],
-          [91, 71, 98, 59, 61, 72, 78, 69],
-          [81, 87, 21, 56, 10, 19, 82, 91],
-        ],
-        name: "人防数据",
-        legend: ["危化品", "放射物品", "民爆物品", "民用枪支"],
-        color: [
-          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
-          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
-          ["#FF8A5A", "rgba(255,138,90,0.1)", "rgba(255,138,90,0.1)"],
-          ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
-        ],
-      },
       tmObj: {
-        xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
+        l1: {
-        yData1: [23, 24, 13, 21, 33, 14, 32, 12],
+          icon: require("@/assets/images/topic/l1.png"),
-        yData2: [13, 34, 23, 11, 23, 24, 12, 32],
+          name: "重点人员数",
-        legend: ["易制爆物品", "剧毒物品"],
+          value: 56765,
-        name: "物品使用情况",
+        },
-        color: [
+        l2: {
-          ["#09C8F5", "rgba(9,200,245,0.9)", "rgba(9,200,245,0)"],
+          icon: require("@/assets/images/topic/l2.png"),
-          ["#FFD16A", "rgba(255,209,106,0.9)", "rgba(255,209,106,0)"],
+          name: "企业访问人数",
-        ],
+          value: 6765,
+        },
+        r1: {
+          icon: require("@/assets/images/topic/r1.png"),
+          name: "普通岗位数",
+          value: 43765,
+        },
+        r2: {
+          icon: require("@/assets/images/topic/r2.png"),
+          name: "重点岗位数",
+          value: 16765,
+        },
+        r3: {
+          icon: require("@/assets/images/topic/r3.png"),
+          name: "专家人员",
+          value: 987,
+        },
+      },
+      mList: [
+        {
+          icon: require("@/assets/images/topic/jsb.png"),
+          name: "重要精神病人",
+          value: 765,
+        },
+        {
+          icon: require("@/assets/images/topic/ffr.png"),
+          name: "非访人员",
+          value: 98765,
+        },
+        {
+          icon: require("@/assets/images/topic/tyr.png"),
+          name: "退役重点人员",
+          value: 11765,
+        },
+        {
+          icon: require("@/assets/images/topic/grjd.png"),
+          name: "个人极端人员",
+          value: 245,
+        },
+        {
+          icon: require("@/assets/images/topic/qkr.png"),
+          name: "前科人员",
+          value: 765,
         },
+        {
+          icon: require("@/assets/images/topic/jbr.png"),
+          name: "家暴人员",
+          value: 65,
+        },
+        {
+          icon: require("@/assets/images/topic/xjr.png"),
+          name: "酗酒人员",
+          value: 865,
+        },
+      ],
     };
   },
 };
@@ -114,18 +167,29 @@ export default {
     box-sizing: border-box;
     .screenRow {
       display: flex;
-      flex: 1;
+      flex: 1.7;
       .screenCol {
+        display: flex;
+        flex-direction: column;
         flex: 1;
         height: 100%;
-        background: url("~@/assets/images/topic/pcolT.png") no-repeat center
+        background: url("~@/assets/images/topic/scolt.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+
+      .screenMCol {
+        position: relative;
+        flex: 2;
+        background: url("~@/assets/images/topic/scolmid.png") no-repeat center
           center;
         background-size: 100% 100%;
       }
     }
     .screenRowBtm {
+      flex: 1;
       .screenCol {
-        background: url("~@/assets/images/topic/pcolB.png") no-repeat center
+        background: url("~@/assets/images/topic/scolb.png") no-repeat center
           center;
         background-size: 100% 100%;
       }
@@ -142,22 +206,106 @@ export default {
         .screenName {
           display: flex;
           align-items: center;
-          padding-left: vh(6);
+          padding-left: vw(6);
-          height: vh(36);
+          height: vw(36);
-          font-size: vh(16);
+          font-size: vw(16);
           color: #d9e7ff;
           .screenIcon {
-            width: vh(24);
+            width: vw(24);
             height: vh(24);
             background: url("~@/assets/images/screen/riskIcon.png") no-repeat
               center center;
             background-size: 100% 100%;
           }
-          .screenNameText {
-          }
         }
         .screenChart {
-          height: calc(100% - 3.3333vh);
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          .safeManagePanel {
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+          }
+          .safeManageWrap {
+            flex: 1;
+          }
+        }
+      }
+      .screenMCol {
+        align-items: center;
+        .totalWrap {
+          .totalTitle {
+            font-weight: 600;
+            font-size: vw(18);
+            color: #ffffff;
+          }
+          .totalValue {
+          }
+        }
+        .totalTypeWrap {
+          margin-top: vw(88);
+          width: vw(612);
+          height: vw(54);
+          display: flex;
+          align-items: center;
+          background: url("~@/assets/images/topic/totalType.png") no-repeat
+            center center;
+          background-size: 100% 100%;
+          .item {
+            flex: 1;
+            display: flex;
+            justify-content: space-evenly;
+            .label {
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 600;
+              font-size: vw(18);
+              color: #ffffff;
+            }
+            .value {
+              font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
+              font-weight: bold;
+              font-size: vw(20);
+              color: #f3fff9;
+              line-height: 22px;
+              letter-spacing: 1px;
+              text-shadow: 0px 0px 9px rgba(87, 213, 255, 0.88);
+            }
+          }
+        }
+        .flowBtmWrap {
+          position: absolute;
+          width: 100%;
+          bottom: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .flowIcon {
+            width: vw(188);
+            height: vw(218);
+            background: url("~@/assets/images/topic/fzi.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+          .flowIconDz {
+            display: flex;
+            justify-content: center;
+            width: vw(586);
+            height: vw(260);
+            background: url("~@/assets/images/topic/dz.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+        }
+        .flowLeftWrap {
+          position: absolute;
+          left: vw(30);
+          bottom: vw(80);
+        }
+        .flowRightWrap {
+          position: absolute;
+          right: 0;
+          bottom: vw(30);
         }
       }
     }