update

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

@@ -0,0 +1,215 @@
+<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() {
+      let dataList = this.chartObj.data;
+      let maxArr = [];
+      let maxValue = 0;
+      let xData = [];
+      let yData = [];
+      let total = 0;
+
+      dataList.forEach((item) => {
+        xData.push(item.name);
+        yData.push(item.value);
+        if (maxValue < item.value) {
+          maxValue = item.value;
+        }
+      });
+      dataList.forEach((item) => {
+        maxArr.push(maxValue);
+        total = total + item.value;
+      });
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        grid: {
+          left: "14",
+          top: "5%", // 设置条形图的边距
+          right: "0",
+          bottom: "0",
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: xData,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                verticalAlign: "bottom",
+                color: "#299CD4",
+                fontSize: 14,
+                fontFamily: "Microsoft YaHei",
+                align: "left",
+                padding: [0, 0, 5, 7],
+                rich: {
+                  index: {
+                    padding: [2, 1, 0, 1],
+                    width: 20,
+                    height: 20,
+                    backgroundColor: "rgba(255,255,255,0.1)",
+                    borderRadius: 4,
+                    align: "center",
+                    color: "#FFDE9C",
+                  },
+                  name: {
+                    padding: [4, 16, 0, 4],
+                    color: "#ffffff",
+                    fontSize: 14,
+                  },
+                  value: {
+                    padding: [4, 0, 0, 4],
+                    color: "#9CE0FF",
+                    fontSize: 16,
+                  },
+                  rate: {
+                    align: "right",
+                    color: "rgba(255,255,255,0.9)",
+                    fontSize: 12,
+                  },
+                },
+              },
+              formatter: (name, index) => {
+                const _index = index + 1;
+                if (dataList.length) {
+                  const item = dataList.filter((item) => item.name == name)[0];
+                  return `{index|${_index}} {name|${name}}{value| ${item.value.toLocaleString()}人}`;
+                }
+              },
+            },
+            offset: 0,
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: "bar",
+            barWidth: 6,
+            itemStyle: {
+              color: (params) => {
+                var color = {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 0,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: this.chartObj.color[0], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: this.chartObj.color[1], // 100% 处的颜色
+                    },
+                  ],
+                };
+                return color;
+              },
+            },
+            label: {
+              show: false,
+            },
+            data: dataList,
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 外边框
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barWidth: 1,
+            itemStyle: {
+              barBorderRadius: 10,
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              padding: [-20, 0, 0, -30],
+              formatter: (params) => {
+                var text = `{a|${((params.data * 100) / total).toFixed(0)}%}`; // `{{f|(params.data / total) * 100 + %}`;
+                return text;
+              },
+
+              rich: {
+                a: {
+                  color: "#9CE0FF",
+                  fontSize: 16,
+                  align: "right",
+                },
+              },
+              position: "right",
+              distance: 1, // 向右偏移位置
+              show: true,
+            },
+            data: yData,
+            z: 0,
+            animationEasing: "elasticOut",
+          },
+          {
+            name: "外框",
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barGap: "-100%", // 设置外框粗细
+            data: maxArr,
+            barWidth: 6,
+            itemStyle: {
+              color: "rgba(255,255,255,0.06)", // 填充色
+              label: {
+                // 标签显示位置
+                show: false,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,326 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in data" :key="item.name">
+        <div
+          class="dpieIcon"
+          :style="{ backgroundColor: item.itemStyle.color }"
+        ></div>
+        <div class="dpieName">{{ item.name }}</div>
+        <div class="dpieValue">{{ item.value }}</div>
+      </div>
+    </div>
+    <div style="flex: 1">
+      <div class="dpiebg">
+        <div ref="dpieWrapRef" class="dpieWrap"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+export default {
+  data() {
+    return {
+      data: [
+        {
+          name: "已被核查人数",
+          value: 34567,
+          itemStyle: {
+            color: "#378DFF",
+          },
+        },
+        {
+          name: "未被核查人数",
+          value: 21456,
+          itemStyle: {
+            color: "#E15A4E",
+          },
+        },
+      ],
+      total: 1,
+    };
+  },
+  mounted() {
+    this.total = 1;
+    for (let i = 0; i < this.data.length; i++) {
+      this.total += this.data[i].value;
+    }
+
+    this.echartsPie();
+  },
+  methods: {
+    echartsPie() {
+      let optionsData = this.data;
+      let hoveredIndex = "";
+      let chartDom = this.$refs["dpieWrapRef"];
+      let myChart = echarts.init(chartDom);
+      const getPie3D = (pieData, internalDiameterRatio) => {
+        //internalDiameterRatio:透明的空心占比
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let k = 1 / 5;
+        pieData.sort((a, b) => {
+          return b.value - a.value;
+        });
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+            radius: "90%",
+            center: ["50%", "50%"],
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+          startValue = endValue;
+        }
+        let boxHeight = getHeight3D(series, 6); //通过传参设定3d饼/环的高度，26代表26px
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          // backgroundColor: "#fff",
+          tooltip: {
+            show: false,
+          },
+          legend: {
+            show: false,
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            left: 0,
+            top: -20, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 24, //角度
+              distance: 120, //调整视角到主体的距离，类似调整zoom
+              rotateSensitivity: 0, //设置为0无法旋转
+              zoomSensitivity: 0, //设置为0无法缩放
+              panSensitivity: 0, //设置为0无法平移
+              autoRotate: false, //自动旋转
+            },
+          },
+          series: series,
+        };
+        return option;
+      };
+
+      //获取3d丙图的最高扇区的高度
+      const getHeight3D = (series, height) => {
+        series.sort((a, b) => {
+          return b.pieData.value - a.pieData.value;
+        });
+        return (height * 50) / series[0].pieData.value;
+      };
+
+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+      const getParametricEquation = (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) => {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      };
+
+      let option = getPie3D(this.data, 0.8);
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      option.series.push({
+        // name: "pie3d",
+        type: "pie",
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{c}%",
+        },
+        // startAngle: -25, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["80%", "80%"],
+        center: ["50%", "50%"], //指示线的位置
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      option && myChart.setOption(option);
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dpiePanel {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  .dpieLegend {
+    position: absolute;
+    right: 40px;
+    top: 28px;
+    .dpieRow {
+      display: flex;
+      align-items: center;
+      margin-bottom: 6px;
+      .dpieIcon {
+        margin-right: 6px;
+        width: 8px;
+        height: 8px;
+        transform: rotate(45deg);
+      }
+      .dpieName {
+        margin-right: 18px;
+        font-size: 12px;
+        color: #d0deee;
+      }
+      .dpieValue {
+        font-size: 16px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.dpieWrap {
+  width: 240px;
+  height: 120px;
+}
+.dpiebg {
+  margin-top: 10px;
+  width: 240px;
+  height: 120px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>

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

@@ -72,12 +72,12 @@ export default {
         legend: {
           data: legend,
           orient: "vertical",
-          bottom: "6%",
+          bottom: "2%",
-          left: "20%",
+          left: "10%",
           icon: "diamond",
           itemHeight: 8,
           itemWidth: 8,
-          itemGap: 16,
+          itemGap: 8,
           padding: 2,
           //backgroundColor: "rgba(108,128,151,0.2)",
           textStyle: {

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

@@ -72,12 +72,12 @@ export default {
         legend: {
           data: legend,
           orient: "vertical",
-          bottom: "6%",
+          bottom: "2%",
-          left: "20%",
+          left: "10%",
           icon: "diamond",
           itemHeight: 8,
           itemWidth: 8,
-          itemGap: 16,
+          itemGap: 8,
           padding: 2,
           //backgroundColor: "rgba(108,128,151,0.2)",
           textStyle: {

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

@@ -43,8 +43,8 @@ export default {
             color: "#E3FEFF",
           },
           textAlign: "center",
-          left: "45%",
+          left: "47%",
-          bottom: "10",
+          bottom: "20%",
         },
         color: this.chartObj.color,
         graphic: {
@@ -67,7 +67,7 @@ export default {
             // name: '访问来源1',
             type: "pie",
             radius: [30, 40],
-            center: ["50%", "40%"],
+            center: ["center", 80],
             data: [
               {
                 value: 100, //对应显示的部分数据即100%
@@ -80,7 +80,10 @@ export default {
               },
             ],
             label: {
-              show: true,
+              position: "center",
+              formatter: ((100 * point) / total).toFixed(0) + "%",
+              color: this.chartObj.color[0],
+              fontSize: 18,
             },
             labelLine: {
               show: false,
@@ -92,7 +95,7 @@ export default {
             showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
             radius: [30, 40],
             avoidLabelOverlap: true, // 标签重叠时进行调整
-            center: ["50%", "40%"],
+            center: ["center", 80],
             data: [
               {
                 value: (point / total) * 100,

src/loveflow/components/menu/head.vue

@@ -168,11 +168,11 @@ export default {
 <style lang="scss" scoped>
 .topHeader {
   .headText {
-    font-size: vh(48);
+    font-size: vw(40);
   }
   .el-menu{
     .el-menu-item{
-      font-size: vh(20);
+      font-size: vw(18);
     }
   }
 }

src/views/enterpriseTopic/components/topicMain.vue

@@ -19,9 +19,7 @@ export default {
   },
   methods: {
     goBack() {
-      this.$router.push({
+      this.$emit("gotoPage");
-        path: "/topic/screen",
-      });
     },
   },
 };

src/views/enterpriseTopic/personSafety/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="enterpriseTopicPanel">
     <!-- 人员安全 -->
-    <topicMain>
+    <topicMain @gotoPage="gotoPage()">
       <div class="enterpriseTopic">
         <el-tabs v-model="tabindex" @tab-click="tabChange">
           <el-tab-pane
@@ -60,6 +60,11 @@ export default {
         return "";
       }
     },
+    gotoPage() {
+      this.$router.push({
+        path: "/topic/personSafety/screen",
+      });
+    },
   },
 };
 </script>
@@ -114,8 +119,8 @@ export default {
         border: 1px solid #5b748c;
         .filterBtnWrap {
           padding: 2px;
-          &:last-child{
+          &:last-child {
-            .el-divider{
+            .el-divider {
               display: none;
             }
           }

src/views/enterpriseTopic/personSafety/screen.vue

@@ -3,7 +3,7 @@
     <head-wrap title="人员安全风险评估"></head-wrap>
     <div class="enterpriseTopicBody">
       <div class="screenRow mb18">
-        <div class="screenCol mr18">
+        <div class="screenCol mr18" @click="gotoPage('/topic/personSafety')">
           <div class="screenName">
             <div class="screenIcon"></div>
             <div class="screenNameText">重点岗位异常数</div>
@@ -60,19 +60,34 @@
             <pTotal :info="tmObj.r3"></pTotal>
           </div>
         </div>
-        <div class="screenCol">
+        <div class="screenCol" @click="gotoPage('/topic/personSafety')">
           <div class="screenName">
             <div class="screenIcon"></div>
             <div class="screenNameText">流动人员核查率</div>
           </div>
-          <div class="screenChart"></div>
+          <div class="screenChart">
+            <div class="flowPersonWrap">
+              <div class="topWrap">
+                <dPieOne :chartObj="{}"></dPieOne>
+              </div>
+              <div class="btmWrap">
+                <div class="flowHead">
+                  <div class="flowIcon"></div>
+                  <div class="flowTitle">流动人口核查率低企业</div>
+                </div>
+                <div class="flowBody">
+                  <barFive :chartObj="trbObj"></barFive>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="screenRow screenRowBtm">
-        <div class="screenCol">
+        <div class="screenCol" @click="gotoPage('/topic/personSafety')">
           <div class="screenName">
             <div class="screenIcon"></div>
-            <div class="screenNameText">消防安全管理</div>
+            <div class="screenNameText">重点人员分类</div>
           </div>
           <div class="screenChart">
             <div class="safeManagePanel">
@@ -96,9 +111,11 @@ import pCard from "../components/pCard.vue";
 import pTotal from "../components/pTotal.vue";
 import pNum from "../components/num.vue";
 import pieSix from "@/loveflow/components/echart/pie/six.vue";
+import dPieOne from "@/loveflow/components/echart/pie/dpieOne.vue";
+import barFive from "@/loveflow/components/echart/bar/five.vue";
 
 export default {
-  components: { headWrap, pCard, pTotal, pNum, pieSix },
+  components: { headWrap, pCard, pTotal, pNum, pieSix, dPieOne, barFive },
   data() {
     return {
       total: 53981 + "",
@@ -111,21 +128,21 @@ export default {
         color: ["#57F0FF", "#37A1CC", "#08FAC4"],
       },
       tl2Obj: {
-        name: "危险品领用人员",
+        name: "危险品保管人员",
         total: 3400,
         point: 1200,
         icon: require("@/assets/images/topic/pie2b.png"),
-        color: ["#FFF7E3;", "#EB9104", "#FAC608"],
+        color: ["#FFF7E3", "#EB9104", "#FAC608"],
       },
       tl3Obj: {
-        name: "危险品领用人员",
+        name: "危险品使用人员",
         total: 3400,
         point: 1300,
         icon: require("@/assets/images/topic/pie1b.png"),
         color: ["#57F0FF", "#37A1CC", "#08FAC4"],
       },
       tl4Obj: {
-        name: "危险品领用人员",
+        name: "危险品技术资质人员",
         total: 3400,
         point: 900,
         icon: require("@/assets/images/topic/pie4b.png"),
@@ -196,8 +213,27 @@ export default {
           value: 865,
         },
       ],
+      trbObj: {
+        data: [
+          { name: "兴达化工有限公司", value: 1123 },
+          { name: "兴业化工有限公司", value: 808 },
+          { name: "兴盛化工有限公司", value: 703 },
+          { name: "兴辉化工有限公司", value: 613 },
+          { name: "兴胜化工有限公司", value: 933 },
+          { name: "兴飞化工有限公司", value: 573 },
+          { name: "兴圣化工有限公司", value: 763 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
     };
   },
+  methods: {
+    gotoPage(val) {
+      this.$router.push({
+        path: val,
+      });
+    },
+  },
 };
 </script>
 
@@ -229,6 +265,9 @@ export default {
         background: url("~@/assets/images/topic/scolt.png") no-repeat center
           center;
         background-size: 100% 100%;
+        &:hover {
+          cursor: pointer;
+        }
       }
 
       .screenMCol {
@@ -290,6 +329,39 @@ export default {
               flex: 1;
             }
           }
+          .flowPersonWrap {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            .btmWrap {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              .flowHead {
+                margin-left: 12px;
+                display: flex;
+                align-items: center;
+                height: vw(36);
+                background: url("~@/assets/images/topic/flow.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                .flowIcon {
+                  width: vw(32);
+                  height: vw(38);
+                  background: url("~@/assets/images/topic/fsIcon.png") no-repeat
+                    center center;
+                  background-size: 100% 100%;
+                }
+                .flowTitle {
+                  font-size: vw(14);
+                  color: #d9e7ff;
+                }
+              }
+              .flowBody {
+                flex: 1;
+              }
+            }
+          }
         }
       }
       .screenMCol {