diff --git a/src/assets/images/screen/09091.png b/src/assets/images/screen/09091.png
new file mode 100644
index 0000000..eb5ba01
Binary files /dev/null and b/src/assets/images/screen/09091.png differ
diff --git a/src/assets/images/screen/bl.png b/src/assets/images/screen/bl.png
new file mode 100644
index 0000000..876b525
Binary files /dev/null and b/src/assets/images/screen/bl.png differ
diff --git a/src/assets/images/screen/br.png b/src/assets/images/screen/br.png
new file mode 100644
index 0000000..1dcc1e3
Binary files /dev/null and b/src/assets/images/screen/br.png differ
diff --git a/src/assets/images/screen/detail.png b/src/assets/images/screen/detail.png
new file mode 100644
index 0000000..02e0224
Binary files /dev/null and b/src/assets/images/screen/detail.png differ
diff --git a/src/assets/images/screen/dpie.png b/src/assets/images/screen/dpie.png
new file mode 100644
index 0000000..bea0fb9
Binary files /dev/null and b/src/assets/images/screen/dpie.png differ
diff --git a/src/assets/images/screen/estimate.png b/src/assets/images/screen/estimate.png
new file mode 100644
index 0000000..47cc176
Binary files /dev/null and b/src/assets/images/screen/estimate.png differ
diff --git a/src/assets/images/screen/list.png b/src/assets/images/screen/list.png
new file mode 100644
index 0000000..44578b6
Binary files /dev/null and b/src/assets/images/screen/list.png differ
diff --git a/src/assets/images/screen/model.png b/src/assets/images/screen/model.png
new file mode 100644
index 0000000..06e73bf
Binary files /dev/null and b/src/assets/images/screen/model.png differ
diff --git a/src/assets/images/screen/rate.png b/src/assets/images/screen/rate.png
new file mode 100644
index 0000000..e04de13
Binary files /dev/null and b/src/assets/images/screen/rate.png differ
diff --git a/src/assets/images/screen/tl.png b/src/assets/images/screen/tl.png
new file mode 100644
index 0000000..718ef62
Binary files /dev/null and b/src/assets/images/screen/tl.png differ
diff --git a/src/assets/images/screen/tr.png b/src/assets/images/screen/tr.png
new file mode 100644
index 0000000..f0c2d3e
Binary files /dev/null and b/src/assets/images/screen/tr.png differ
diff --git a/src/loveflow/assets/index.less b/src/loveflow/assets/index.less
index baeacdb..822eb3c 100644
--- a/src/loveflow/assets/index.less
+++ b/src/loveflow/assets/index.less
@@ -31,6 +31,9 @@
 .mb18 {
   margin-bottom: 18px;
 }
+.mb20 {
+  margin-bottom: 20px;
+}
 /* 间距 END*/
 
 /* 字体 START */
diff --git a/src/loveflow/assets/paginate.less b/src/loveflow/assets/paginate.less
new file mode 100644
index 0000000..f1f4e75
--- /dev/null
+++ b/src/loveflow/assets/paginate.less
@@ -0,0 +1,54 @@
+.gPagination {
+  background-color: transparent;
+}
+/deep/.el-pagination {
+  .el-pagination__total {
+    color: #ffffff;
+    height: 34px;
+    line-height: 34px;
+  }
+  .el-pagination__sizes {
+    .el-input__inner {
+      height: 32px;
+      background: transparent;
+      color: #fff;
+      border: solid 1px #28847e;
+    }
+  }
+  .btn-prev {
+    height: 32px;
+    min-width: 32px;
+    background: transparent;
+    color: #fff;
+    border: solid 1px #28847e;
+  }
+  .btn-next {
+    height: 32px;
+    min-width: 32px;
+    background: transparent;
+    color: #fff;
+    border: solid 1px #28847e;
+  }
+  .el-pager {
+    .number {
+      height: 32px;
+      min-width: 32px;
+      background: transparent;
+      color: #fff;
+      border: solid 1px #28847e;
+      &.active {
+        background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+  }
+  .el-pagination__jump {
+    color: #fff;
+    .el-input__inner {
+      height: 32px;
+      background: transparent;
+      color: #fff;
+      border: solid 1px #28847e;
+    }
+  }
+}
diff --git a/src/loveflow/components/data/table.vue b/src/loveflow/components/data/table.vue
index d6e6ea2..ec911f1 100644
--- a/src/loveflow/components/data/table.vue
+++ b/src/loveflow/components/data/table.vue
@@ -126,3 +126,6 @@ export default {
   }
 }
 </style>
+<style lang="less" scoped>
+@import "@/loveflow/assets/paginate.less";
+</style>
diff --git a/src/loveflow/components/echart/bar/one.vue b/src/loveflow/components/echart/bar/one.vue
index 67d03cf..d35d497 100644
--- a/src/loveflow/components/echart/bar/one.vue
+++ b/src/loveflow/components/echart/bar/one.vue
@@ -30,7 +30,7 @@ export default {
         grid: {
           top: this.chartObj.gridTop || "20%",
           bottom: this.chartObj.gridBtm || "10%",
-          left: "6%",
+          left: this.chartObj.gridLeft || "6%",
           right: "5%",
         },
         tooltip: {
@@ -118,5 +118,14 @@ export default {
       };
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/echart/bar/three.vue b/src/loveflow/components/echart/bar/three.vue
new file mode 100644
index 0000000..c492c4f
--- /dev/null
+++ b/src/loveflow/components/echart/bar/three.vue
@@ -0,0 +1,318 @@
+<template>
+  <div style="height: 100%; width: 100%" id="barThreeId">
+    <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 data = this.chartObj.data;
+      let total = 0;
+      for (let i = 0; i < data.length; i++) {
+        total += data[i].value;
+      }
+
+      total = total || 1;
+
+      // 将数据根据从小到大排序
+      this.sortObject(data);
+      // 图例数据
+      let lengthData = [];
+      // 返回数据
+      let resultData = data.map((item, index) => {
+        lengthData.push({
+          type: "group",
+          top: index * 55,
+          scale: [1, 1],
+          children: [
+            /* {
+              type: "circle",
+              shape: {
+                cx: 0,
+                cy: 7,
+                r: 5,
+              },
+              style: {
+                fill:
+                  index === 0 ? "#07a9ab" : index === 1 ? "#008CD2" : "#0847e7",
+              },
+            }, */
+            {
+              type: "text",
+              style: {
+                text: item.name,
+                fill: "#D0DEEE",
+                fontSize: 14,
+                x: 20,
+                y: 2,
+              },
+            },
+            {
+              type: "text",
+              name: item.name,
+              style: {
+                text: parseInt((100 * item.value) / total) + "%",
+                fill: "#fff",
+                fontSize: 17,
+                x: 100,
+                y: 0,
+              },
+            },
+            {
+              type: "text",
+              style: {
+                text: "( " + item.value + "分 )",
+                fill: "#fff",
+                fontSize: 14,
+                x: 150,
+                y: 2,
+              },
+            },
+          ],
+        });
+        if (index === 0) {
+          return {
+            style: {
+              fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(255,255,255,0.8)" },
+                { offset: 1, color: "rgba(255,255,255,0.4)" },
+              ]),
+            },
+            ...item,
+          };
+        } else if (index === 1) {
+          return {
+            style: {
+              fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(244,225,71,0.8)" },
+                { offset: 1, color: "rgba(244,225,71,0.4)" },
+              ]),
+            },
+            ...item,
+          };
+        } else if (index === 2) {
+          return {
+            style: {
+              fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(71,244,197,0.8)" },
+                { offset: 1, color: "rgba(71,244,197,0.4)" },
+              ]),
+            },
+            ...item,
+          };
+        } else if (index === 3) {
+          return {
+            style: {
+              fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(72,165,244,0.8)" },
+                { offset: 1, color: "rgba(72,165,244,0.4)" },
+              ]),
+            },
+            ...item,
+          };
+        }
+      });
+
+      // 获取计算的数据
+      let getData = this.pyramidChart(
+        resultData,
+        document.getElementById("barThreeId")
+      );
+
+      this.option = {
+        graphic: [
+          {
+            type: "group",
+            left: "5%",
+            top: "center",
+            scale: [1, 1],
+            onclick: function (params) {},
+            children: getData,
+          },
+          {
+            type: "group",
+            left: "55%",
+            top: "center",
+            scale: [1, 1],
+            onclick: function (params) {},
+            children: lengthData,
+          },
+        ],
+        series: [],
+      };
+    },
+    pyramidChart(data = [], dom, option = {}) {
+      let domHeight = dom ? dom.clientHeight : 0;
+      let domWidth = dom ? dom.clientWidth : 0;
+      // 默认获取一个正方形空间
+      let maxDistance = domHeight > domWidth / 2 ? domWidth / 2 : domHeight;
+      // 合并设置
+      let resultOption = Object.assign(
+        {
+          slanted: 4, // 每层底部的倾斜度
+          maxWidth: maxDistance - 30, // 金字塔最大宽度
+          maxHeight: maxDistance, // 金字塔最大高度
+          offset: 30, //偏差
+        },
+        option
+      );
+      if (data.length === 1) {
+        resultOption.slanted = 50;
+      }
+      if (data.length === 2) {
+        resultOption.slanted = 25;
+      }
+      if (data.length === 3) {
+        resultOption.slanted = 10;
+      }
+      // 减去多余的误差边距
+      resultOption.maxHeight = resultOption.maxHeight - resultOption.offset;
+      // 一半最大宽度,用于计算左右边距
+      let halfMaxWidth = resultOption.maxWidth / 2;
+      // 数据最终
+      let resultData = [];
+      // 数据值 数组
+      let dataNums = data.map((item) => item.value || 0);
+      // 计算数据总和
+      let dataNumSum =
+        dataNums.length > 0 &&
+        dataNums.reduce(function (prev, curr) {
+          return Number(prev || 0) + Number(curr || 0);
+        });
+      // 中间数据点坐标数组 根据长度比值算出
+      let midlinePoint = [];
+      let multipleLayer = [0.6];
+      // 计算倍数等基础数据
+      dataNums.forEach((item, index, arr) => {
+        let itemNext = arr[index + 1];
+        if (itemNext) {
+          multipleLayer.push(itemNext / dataNums[0]); // 计算倍数
+        }
+        // 计算点坐标 长度
+        let point =
+          Math.round((item / dataNumSum) * resultOption.maxHeight * 1000) /
+          1000;
+        midlinePoint.push(point);
+      });
+      // 三角形的高度
+      let triangleHeight = 0;
+      let triangleHeightLayer = [];
+      // 三角形tan角度
+      let triangleRatio = halfMaxWidth / resultOption.maxHeight;
+      midlinePoint.forEach((item) => {
+        triangleHeight = triangleHeight + item;
+        triangleHeightLayer.push(triangleHeight);
+      });
+      // 中间数据点 最后的数据长度
+      let midlinePointFinally =
+        triangleHeightLayer[triangleHeightLayer.length - 1] || 0;
+      // 开始拼接数据
+      data.forEach((item, index) => {
+        let arrObj = [];
+        let triangleHeightLayerOne = triangleHeightLayer[index];
+        let triangleHeightLayerOneLast = triangleHeightLayer[index - 1] || 0;
+        let multipleLayerOne = multipleLayer[index];
+        let multipleLayerOneLast = multipleLayer[index - 1] || 0;
+        // 第一层数据单独处理
+        if (index === 0) {
+          arrObj.push(
+            [0, 0],
+            [
+              -triangleRatio *
+                (triangleHeightLayerOne -
+                  resultOption.slanted * multipleLayerOne),
+              triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
+            ],
+            [0, triangleHeightLayerOne],
+            [
+              triangleRatio *
+                (triangleHeightLayerOne -
+                  resultOption.slanted * multipleLayerOne),
+              triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
+            ]
+          );
+        } else {
+          arrObj.push(
+            [0, triangleHeightLayerOneLast],
+            [
+              -triangleRatio *
+                (triangleHeightLayerOneLast -
+                  resultOption.slanted * multipleLayerOneLast),
+              triangleHeightLayerOneLast -
+                resultOption.slanted * multipleLayerOneLast,
+            ],
+            [
+              -triangleRatio *
+                (triangleHeightLayerOne -
+                  resultOption.slanted * multipleLayerOne),
+              triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
+            ],
+            [0, triangleHeightLayerOne],
+            [
+              triangleRatio *
+                (triangleHeightLayerOne -
+                  resultOption.slanted * multipleLayerOne),
+              triangleHeightLayerOne - resultOption.slanted * multipleLayerOne,
+            ],
+            [
+              triangleRatio *
+                (triangleHeightLayerOneLast -
+                  resultOption.slanted * multipleLayerOneLast),
+              triangleHeightLayerOneLast -
+                resultOption.slanted * multipleLayerOneLast,
+            ]
+          );
+        }
+        resultData.push({
+          type: "polygon",
+          z: 1,
+          shape: {
+            points: arrObj,
+          },
+          name: item.name,
+          style: item.style,
+        });
+      });
+      // 添加线
+      resultData.push({
+        type: "polyline",
+        shape: {
+          points: [
+            [0, 0],
+            [0, midlinePointFinally],
+          ],
+        },
+        style: {
+          stroke: "rgba(255,255,255,0.41)",
+          lineWidth: 1,
+        },
+        z: 2,
+      });
+      // 返回
+      return resultData;
+    },
+    sortObject(arr) {
+      return arr.sort(function (a, b) {
+        return a["value"] - b["value"];
+      });
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/funnel/one.vue b/src/loveflow/components/echart/funnel/one.vue
new file mode 100644
index 0000000..7904507
--- /dev/null
+++ b/src/loveflow/components/echart/funnel/one.vue
@@ -0,0 +1,129 @@
+<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 data = this.chartObj.data;
+      let total = 0;
+      for (let i = 0; i < data.length; i++) {
+        total += data[i].value;
+      }
+
+      total = total || 1;
+      let colorList = [
+        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(255,255,255,0.9)",
+          },
+          {
+            offset: 1,
+            color: " rgba(255,255,255,0.5)",
+          },
+        ]),
+        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(244,238,72,0.9)",
+          },
+          {
+            offset: 1,
+            color: " rgba(244,238,72,0.5)",
+          },
+        ]),
+        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(72,229,244,0.9)",
+          },
+          {
+            offset: 1,
+            color: " rgba(72,229,244,0.5)",
+          },
+        ]),
+        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(72,165,244,0.9)",
+          },
+          {
+            offset: 1,
+            color: " rgba(72,165,244,0.5)",
+          },
+        ]),
+      ];
+
+      this.option = {
+        legend: {
+          show: false,
+        },
+        series: [
+          {
+            sort: "ascending",
+            type: "funnel",
+            gap: 0,
+            minSize: "20%",
+            maxSize: "50%",
+            left: "0",
+            top: "5%",
+            label: {
+              show: true,
+              rich: {
+                name: {
+                  color: "#D0DEEE",
+                  fontSize: 12,
+                },
+                value: {
+                  color: "rgba(255,255,255,0.5)",
+                  fontSize: 12,
+                },
+                rate: {
+                  color: "rgba(255,255,255,0.9)",
+                  fontSize: 12,
+                },
+              },
+              formatter: (item) => {
+                console.log(item);
+                return `{name|${item.name}：}{value| ${item.value}} {rate| ${item.percent}%}`;
+              },
+            },
+            labelLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#FFFEFE",
+              },
+            },
+            itemStyle: {
+              borderWidth: 0,
+              color: (item) => {
+                return colorList[item.dataIndex];
+              },
+            },
+            data: this.chartObj.data,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/line/one.vue b/src/loveflow/components/echart/line/one.vue
index a383289..f5f683c 100644
--- a/src/loveflow/components/echart/line/one.vue
+++ b/src/loveflow/components/echart/line/one.vue
@@ -114,5 +114,14 @@ export default {
       };
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/echart/line/three.vue b/src/loveflow/components/echart/line/three.vue
index 5cd7c32..182db3e 100644
--- a/src/loveflow/components/echart/line/three.vue
+++ b/src/loveflow/components/echart/line/three.vue
@@ -113,5 +113,14 @@ export default {
       };
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/echart/line/two.vue b/src/loveflow/components/echart/line/two.vue
index 505d1ee..aee7628 100644
--- a/src/loveflow/components/echart/line/two.vue
+++ b/src/loveflow/components/echart/line/two.vue
@@ -100,5 +100,14 @@ export default {
       };
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/echart/pie/dPie.vue b/src/loveflow/components/echart/pie/dPie.vue
new file mode 100644
index 0000000..b1b5bba
--- /dev/null
+++ b/src/loveflow/components/echart/pie/dPie.vue
@@ -0,0 +1,495 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieCol" v-for="item in data" :key="item.name">
+        <span>
+          <div class="dpieRow">
+            <div
+              class="dpieIcon"
+              :style="{ backgroundColor: item.itemStyle.color }"
+            ></div>
+            <div class="dpieName">{{ item.name }}</div>
+          </div>
+          <div class="dpieRow">
+            <div class="dpieRate">
+              {{ parseInt((item.value * 100) / total) }}%
+            </div>
+          </div>
+        </span>
+      </div>
+    </div>
+    <div class="flex-center" style="flex: 1; height: calc(100% - 80px)">
+      <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: 134,
+          itemStyle: {
+            color: "rgba(55,141,255,1)",
+          },
+        },
+        {
+          name: "重点人员",
+          value: 156,
+          itemStyle: {
+            color: "rgba(72,238,189,1)",
+          },
+        },
+        {
+          name: "民爆物品",
+          value: 127,
+          itemStyle: {
+            color: "rgba(255,209,106,1)",
+          },
+        },
+      ],
+      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 =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3; */
+        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: {
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie3d"
+              ) {
+                let bfb = (
+                  (option.series[params.seriesIndex].pieData.endRatio -
+                    option.series[params.seriesIndex].pieData.startRatio) *
+                  100
+                ).toFixed(2);
+                return (
+                  `${params.seriesName}<br/>` +
+                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                  `${bfb}%`
+                );
+              }
+            },
+          },
+          legend: {
+            show: false,
+            orient: "horizontal",
+            top: "0",
+            itemGap: 16,
+            itemHeight: 8,
+            itemWidth: 8,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+              rich: {
+                name: {
+                  fontSize: 14,
+                  padding: [40, 0, 1, 0],
+                  color: "#D0DEEE",
+                },
+                value: {
+                  fontSize: 14,
+                  color: "#fff",
+                },
+                A: {
+                  fontSize: 14,
+                  color: "#B0D8DF",
+                },
+                rate: {
+                  padding: [10, 0, 0, -6],
+                  fontSize: 20,
+                  color: "#EBF3FD",
+                },
+                B: {
+                  fontSize: 20,
+                  color: "#B0D8DF",
+                },
+              },
+            },
+            formatter: function (name) {
+              console.log(name);
+              let total = 0;
+              let target;
+              for (let i = 0; i < optionsData.length; i++) {
+                total += optionsData[i].value;
+                if (optionsData[i].name === name) {
+                  target = optionsData[i].value;
+                }
+              }
+              let arr = [
+                "{name|" + name + "}\n",
+                "{rate|" + ((target / total) * 100).toFixed(1) + "%}",
+              ];
+              return arr.join("  ");
+            },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            left: 0,
+            top: -25, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 24, //角度
+              distance: 120, //调整视角到主体的距离，类似调整zoom
+              rotateSensitivity: 0, //设置为0无法旋转
+              zoomSensitivity: 0, //设置为0无法缩放
+              panSensitivity: 0, //设置为0无法平移
+              autoRotate: true, //自动旋转
+            },
+          },
+          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);
+
+      /* myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        let i;
+
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
+            k = option.series[hoveredIndex].pieStatus.k;
+            i =
+              option.series[hoveredIndex].pieData.value ===
+              option.series[0].pieData.value
+                ? 35
+                : 10;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            option.series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                i
+              );
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            option.series[params.seriesIndex].pieStatus
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio = option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = option.series[params.seriesIndex].pieData.endRatio;
+            k = option.series[params.seriesIndex].pieStatus.k;
+
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            option.series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                option.series[params.seriesIndex].pieData.value + 5
+              );
+            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(option);
+        }
+      }); */
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dpiePanel {
+  flex: 1;
+  height: 100%;
+  .dpieLegend {
+    padding-top: 10px;
+    margin: 20px 5% 30px;
+    display: flex;
+    background: url("~@/assets/images/screen/rate.png");
+    background-size: 100% 100%;
+    .dpieCol {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+
+      .dpieRow {
+        display: flex;
+        align-items: center;
+        margin-bottom: 6px;
+        .dpieIcon {
+          margin-right: 6px;
+          height: 8px;
+          width: 8px;
+        }
+        .dpieName {
+          font-weight: 400;
+          font-size: 14px;
+          color: #d0deee;
+        }
+        .dpieRate {
+          font-weight: bold;
+          font-size: 24px;
+          color: #ebf3fd;
+        }
+      }
+    }
+  }
+}
+.dpieWrap {
+  width: 322px;
+  height: 136px;
+  // position: absolute;
+  // z-index: 2;
+}
+.dpiebg {
+  width: 322px;
+  height: 136px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/src/loveflow/components/echart/pie/one.vue b/src/loveflow/components/echart/pie/one.vue
index 46b916c..0c3ccd0 100644
--- a/src/loveflow/components/echart/pie/one.vue
+++ b/src/loveflow/components/echart/pie/one.vue
@@ -24,19 +24,19 @@ export default {
   },
   methods: {
     setOption() {
-      let height = this.getHeight() - 96;
+      let height = this.getHeight();
       console.log(height);
       this.option = {
         tooltip: {
           show: false,
         },
         legend: {
-          orient: "vertical",
+          orient: this.chartObj.orient || "vertical",
           top: "center",
           left: "60%",
           icon: "rect",
           itemHeight: 8,
-          itemWeight: 8,
+          itemWidth: 8,
           itemGap: 16,
           textStyle: {
             color: "#D0DEEE",
@@ -51,12 +51,12 @@ export default {
               type: "image",
               style: {
                 image: bgImg,
-                width: height - 30,
-                height: height - 30,
+                width: height - 20,
+                height: height - 20,
                 zIndex: 1,
                 top: "center",
               },
-              left: 25,
+              left: 26,
               top: "center",
               originX: 100,
               originY: 100,
@@ -83,7 +83,7 @@ export default {
               lineHeight: 20,
               formatter: function (params) {
                 if (params.name !== "") {
-                  return `${params.name}\n ${params.value}%`;
+                  return `${params.name}\n ${params.percent}%`;
                 } else {
                   return "";
                 }
@@ -107,5 +107,14 @@ export default {
       return div.clientHeight;
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/echart/pie/three.vue b/src/loveflow/components/echart/pie/three.vue
new file mode 100644
index 0000000..30f0893
--- /dev/null
+++ b/src/loveflow/components/echart/pie/three.vue
@@ -0,0 +1,344 @@
+<template>
+  <div style="height: 100%; width: 100%" id="dpieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+import "echarts-gl";
+let bgImg = require("@/assets/images/screen/dpie.png");
+export default {
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    let height = this.getHeight() - 30;
+    console.log(height);
+    let xData = ["危险化学品", "重点人员", "民爆物品"];
+    const optionsData = [
+      {
+        name: "危险化学品",
+        value: 134,
+        itemStyle: {
+          color: "rgba(55,141,255,0.9)",
+        },
+      },
+      {
+        name: "重点人员",
+        value: 156,
+        itemStyle: {
+          color: "rgba(72,238,189,0.9)",
+        },
+      },
+      {
+        name: "民爆物品",
+        value: 127,
+        itemStyle: {
+          color: "rgba(255,209,106,0.9)",
+        },
+      },
+    ];
+
+    const series = this.getPie3D(optionsData, 0.6);
+    series.push({
+      name: "pie2d",
+      type: "pie",
+      startAngle: 2, //起始角度，支持范围[0, 360]。
+      clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+      radius: ["50%", "60%"],
+      center: ["68%", "55%"],
+      data: optionsData,
+      itemStyle: {
+        opacity: 0,
+      },
+      labelLine: {
+        show: false,
+      },
+      label: {
+        show: false,
+        position: "center",
+      },
+    });
+    // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    this.option = {
+      legend: {
+        show: true,
+        orient: "vertical",
+        data: xData,
+        top: "center",
+        itemGap: 30,
+        itemHeight: 8,
+        itemWidth: 8,
+        right: "4%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 12,
+          rich: {
+            name: {
+              width: 60,
+              fontSize: 14,
+              color: "#D0DEEE",
+            },
+            value: {
+              width: 50,
+              fontSize: 14,
+              padding: [0, 5, 0, 5],
+              color: "#fff",
+            },
+            A: {
+              fontSize: 14,
+              color: "#B0D8DF",
+            },
+            rate: {
+              fontSize: 20,
+              padding: [0, 2, 0, 10],
+              color: "#EBF3FD",
+            },
+            B: {
+              fontSize: 20,
+              color: "#B0D8DF",
+            },
+          },
+        },
+        formatter: function (name) {
+          let total = 0;
+          let target;
+          for (let i = 0; i < optionsData.length; i++) {
+            total += optionsData[i].value;
+            if (optionsData[i].name === name) {
+              target = optionsData[i].value;
+            }
+          }
+          let arr = [
+            "{name|" + name + "}",
+            "{rate|" + ((target / total) * 100).toFixed(1) + "}{B|%}",
+          ];
+          return arr.join("  ");
+        },
+      },
+      animation: false,
+      tooltip: {
+        show: false,
+      },
+      label: {
+        show: true,
+        position: "outside",
+        formatter: "{b} \n{c}\n{d}%",
+        textStyle: {
+          color: "rgba(176, 216, 223, 1)",
+          fontSize: 24,
+        },
+      },
+      xAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      yAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      zAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      grid3D: {
+        show: false,
+        boxHeight: 1,
+        //top: '30%',
+        //left: "6%",
+        //top: -10,
+        width: "50%",
+        // environment: "rgba(255,255,255,0)",
+        viewControl: {
+          distance: 280,
+          alpha: 20,
+          beta: 15,
+          autoRotate: true, // 自动旋转
+          rotateSensitivity: 1,
+          zoomSensitivity: 0,
+          panSensitivity: 0,
+        },
+      },
+      graphic: {
+        elements: [
+          {
+            type: "image",
+            style: {
+              image: bgImg,
+              width: height,
+              height: parseInt(height / 2),
+              top: "center",
+            },
+            //left: "center",
+            top: "center",
+            //originX: 100,
+            //originY: 100,
+          },
+        ],
+      },
+      series: series,
+    };
+  },
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    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;
+      // }
+      isSelected = false;
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== "undefined" ? k : 1 / 3;
+
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      let offsetY = isSelected ? Math.cos(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;
+        },
+      };
+    },
+
+    // 生成模拟 3D 饼图的配置项
+    getPie3D(pieData, internalDiameterRatio) {
+      let series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      let legendData = [];
+      let k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+
+      // 为每一个饼图数据，生成一个 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: 1 / 10,
+          },
+        };
+
+        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;
+          seriesItem.z = 5;
+        }
+        console.log(seriesItem);
+        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 = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+
+        startValue = endValue;
+
+        legendData.push(series[i].name);
+      }
+
+      return series;
+    },
+    getHeight() {
+      let div = document.getElementById("dpieWrap");
+      return div.clientHeight;
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/pie/three_bat.vue b/src/loveflow/components/echart/pie/three_bat.vue
new file mode 100644
index 0000000..3f47b3a
--- /dev/null
+++ b/src/loveflow/components/echart/pie/three_bat.vue
@@ -0,0 +1,246 @@
+<template>
+  <div style="height: 100%; width: 100%" id="dpieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+import "echarts-gl";
+let bgImg = require("@/assets/images/screen/dpie.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      //let height = this.getHeight();
+      this.option = this.getPie3D(
+        [
+          {
+            name: "危险化学品",
+            value: 134,
+            itemStyle: {
+              color: "rgba(55,141,255,0.9)",
+            },
+          },
+          {
+            name: "重点人员",
+            value: 156,
+            itemStyle: {
+              color: "rgba(72,238,189,0.9)",
+            },
+          },
+          {
+            name: "民爆物品",
+            value: 127,
+            itemStyle: {
+              color: "rgba(255,209,106,0.9)",
+            },
+          },
+        ],
+        0.5
+      );
+    },
+
+    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;
+      isSelected = false;
+      k = typeof k !== "undefined" ? k : 1 / 3;
+      let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      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;
+        },
+      };
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      let series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      let legendData = [];
+      let k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      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: 1 / 10,
+          },
+        };
+        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);
+      }
+      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 = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+
+        startValue = endValue;
+
+        legendData.push(series[i].name);
+      }
+
+      let height = this.getHeight();
+      console.log(height);
+
+      let obj = {
+        legend: {
+          top: "10%",
+          itemGap: 20,
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: "#D0DEEE",
+            fontSize: 14,
+          },
+          data: legendData,
+          formatter: (params) => {
+            return params;
+          },
+        },
+
+        xAxis3D: {},
+        yAxis3D: {},
+        zAxis3D: {},
+        grid3D: {
+          viewControl: {
+            autoRotate: false,
+          },
+          left: "center",
+          width: "150%",
+          show: false,
+          boxHeight: 20,
+          zIndex: 2,
+        },
+        series: series,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: height,
+                height: parseInt(height / 2),
+                zIndex: 1,
+                top: "center",
+              },
+              left: "20%",
+              top: "30%",
+              //originX: 100,
+              //originY: 100,
+            },
+          ],
+        },
+      };
+      return obj;
+    },
+    getHeight() {
+      let div = document.getElementById("dpieWrap");
+      return div.clientHeight;
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/pie/three_bat1.vue b/src/loveflow/components/echart/pie/three_bat1.vue
new file mode 100644
index 0000000..657e030
--- /dev/null
+++ b/src/loveflow/components/echart/pie/three_bat1.vue
@@ -0,0 +1,92 @@
+<template>
+  <div style="height: 100%; width: 100%" id="dpieWrap"></div>
+</template>
+
+<script>
+import HighCharts from "highcharts";
+export default {
+  data() {
+    return {
+      option: {
+        chart: {
+          type: "pie", //饼图
+          backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
+          options3d: {
+            enabled: true, //使用3d功能
+            alpha: 60, //延y轴向内的倾斜角度
+          },
+        },
+        title: {
+          text: "", //图表的标题文字 这个得加上，不然头部会默认有字
+        },
+        subtitle: {
+          text: "", //副标题文字
+        },
+        tooltip: {
+          show: false,
+          formatter: function () {
+            return (
+              this.point.name +
+              '<br/><span style="color:' +
+              this.color +
+              '">\u25CF</span>占比：<b>' +
+              this.percentage.toFixed(2) +
+              "%</b>"
+            );
+          },
+          style: {
+            color: "#000",
+            fontSize: 14,
+          },
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        // 更改图例文字颜色
+        legend: {
+          itemStyle: { color: "#cfcfcf" },
+        },
+        plotOptions: {
+          pie: {
+            borderWidth: 1,
+            allowPointSelect: true, //每个扇块能否选中
+            cursor: "pointer", //鼠标指针
+            colors: [
+              "rgba(55,141,255,0.9)",
+              "rgba(72,238,189,0.9)",
+              "rgba(255,209,106,0.9)",
+            ],
+            depth: 35, //饼图的厚度
+            showInLegend: false, //显示图例
+            innerSize: 130,
+            dataLabels: {
+              enabled: false, //是否显示饼图的线形tip
+              format: "{point.name}",
+              style: {
+                //样式配置
+                textOutline: "none", //去掉文字白边
+                color: "#dfe9f9",
+                fontSize: 12,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [
+              ["危险化学品", 134],
+              ["重点人员", 130],
+              ["民爆物品", 127],
+            ],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    HighCharts.chart("dpieWrap", this.option);
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/pie/two.vue b/src/loveflow/components/echart/pie/two.vue
new file mode 100644
index 0000000..e4db43f
--- /dev/null
+++ b/src/loveflow/components/echart/pie/two.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="flex-center" style="height: 100%; width: 100%" id="pieWrap">
+    <div class="bgPie flex-center">
+      <g-chart :echartdata="option"></g-chart>
+    </div>
+  </div>
+</template>
+<script>
+let bgImg = require("@/assets/images/screen/pie.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let height = this.getHeight();
+      console.log(height);
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          orient: "horizontal",
+          top: "3%",
+          right: "5%",
+          icon: "rect",
+          itemHeight: 8,
+          itemWidth: 8,
+          itemGap: 16,
+          textStyle: {
+            color: "#D0DEEE",
+            align: "left",
+            verticalAlign: "middle",
+          },
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: 370,
+                height: 370,
+                zIndex: 1,
+              },
+              left: "3%",
+              top: 16,
+              //originX: 100,
+              //originY: 100,
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "pie",
+            radius: ["60%", "80%"],
+            width: 280,
+            height: 280,
+            center: ["24%", "55%"],
+            clockWise: false,
+            hoverAnimation: false,
+            left: 134,
+            top: "center",
+            itemStyle: {},
+            label: {
+              show: false,
+              position: "center",
+              color: "#D0DEEE",
+              lineHeight: 20,
+              formatter: function (params) {
+                if (params.name !== "") {
+                  return `${params.name}\n ${params.value}%`;
+                } else {
+                  return "";
+                }
+              },
+            },
+            emphasis: {
+              label: {
+                show: true,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: this.chartObj.data,
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.bgPie {
+  width: 600px;
+  height: 100%;
+}
+</style>
diff --git a/src/loveflow/components/echart/radar/one.vue b/src/loveflow/components/echart/radar/one.vue
index b9cc143..639d7df 100644
--- a/src/loveflow/components/echart/radar/one.vue
+++ b/src/loveflow/components/echart/radar/one.vue
@@ -31,7 +31,7 @@ export default {
           show: false,
         },
         radar: {
-          center: ["50%", "55%"], // 外圆的位置
+          center: ["50%", "50%"], // 外圆的位置
           radius: "60%",
           name: {
             textStyle: {
@@ -107,5 +107,14 @@ export default {
       };
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/menu/head.vue b/src/loveflow/components/menu/head.vue
index d1d3541..4e1bb88 100644
--- a/src/loveflow/components/menu/head.vue
+++ b/src/loveflow/components/menu/head.vue
@@ -22,10 +22,10 @@
 
       <div class="shu"></div>
     </el-menu>
-    <div class="time_box">
+    <!-- <div class="time_box">
       <div class="time_item">{{ this.new_time }}</div>
       <div class="day_item">{{ this.new_day }}</div>
-    </div>
+    </div> -->
     <div class="jingGuan">
       <div class="jgtx" @click="check_user">
         <img src="../../../assets/companyFile/12110.png" />
@@ -165,6 +165,14 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+.topHeader {
+  .headText {
+    font-size: vh(48);
+  }
+}
+</style>
+
 <style lang="less" scoped>
 .topHeader {
   width: 100%;
@@ -191,7 +199,6 @@ export default {
 
   .headText {
     font-family: YouSheBiaoTiHei;
-    font-size: 38px;
     color: #edf6ff;
     letter-spacing: 4px;
     text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
diff --git a/src/router/routes/enterpriseRiskIndex.js b/src/router/routes/enterpriseRiskIndex.js
index 29162b8..f08e7c1 100644
--- a/src/router/routes/enterpriseRiskIndex.js
+++ b/src/router/routes/enterpriseRiskIndex.js
@@ -45,6 +45,15 @@ export default [
         },
         component: () => import("@/views/enterpriseRiskIndex/estimate"),
       },
+      {
+        path: "/riskIndex/estimateDetail",
+        name: "estimate",
+        meta: {
+          head: false,
+          title: "专题评估",
+        },
+        component: () => import("@/views/enterpriseRiskIndex/estimateDetail"),
+      },
     ],
   },
 ];
diff --git a/src/views/enterpriseRiskIndex/abnormal.vue b/src/views/enterpriseRiskIndex/abnormal.vue
index 00fc07a..49178ab 100644
--- a/src/views/enterpriseRiskIndex/abnormal.vue
+++ b/src/views/enterpriseRiskIndex/abnormal.vue
@@ -8,7 +8,7 @@
         </div>
         <div class="riskTotal">
           <div>今日企业风险项量</div>
-          <div class="totalText">10000</div>
+          <div class="totalText">{{ total }}</div>
         </div>
         <div class="chartPanel" style="height: calc(100% - 136px)">
           <div class="chartOpt">
@@ -149,22 +149,21 @@ export default {
   data() {
     return {
       curTime: "day",
-
       dataList: [
         [
           {
             name: "流动人口管理异常",
-            value: 1321,
+            value: 13211,
             icon: require("@/assets/images/screen/11.png"),
           },
           {
             name: "人员背景审核异常分析",
-            value: 1321,
+            value: 2321,
             icon: require("@/assets/images/screen/12.png"),
           },
           {
             name: "重点岗位资质核查异常分析",
-            value: 1321,
+            value: 3321,
             icon: require("@/assets/images/screen/13.png"),
           },
         ],
@@ -176,35 +175,36 @@ export default {
           },
           {
             name: "装卸量差异分析",
-            value: 1321,
+            value: 2329,
             icon: require("@/assets/images/screen/22.png"),
           },
           {
             name: "运输车辆背景异常分析",
-            value: 1321,
+            value: 2341,
             icon: require("@/assets/images/screen/23.png"),
           },
         ],
         [
           {
             name: "运输车辆异常预警",
-            value: 1321,
+            value: 12431,
             icon: require("@/assets/images/screen/31.png"),
           },
           {
             name: "驾驶员押运员资质异常分析",
-            value: 1321,
+            value: 2134,
             icon: require("@/assets/images/screen/32.png"),
           },
           {
             name: "单位检查情况异常分析",
-            value: 1321,
+            value: 879,
             icon: require("@/assets/images/screen/33.png"),
           },
         ],
       ],
-
+      total: 7,
       tlObj: {
+        gridLeft: "8%",
         xData: [
           "人员安全",
           "危化品运输",
@@ -419,6 +419,18 @@ export default {
   methods: {
     changeTime(val) {
       this.curTime = val;
+      if (val == "day") {
+        this.total = 7;
+        this.tlObj.yData = [12, 11, 13, 14, 15, 11, 14, 12];
+      }
+      if (val == "month") {
+        this.total = 23;
+        this.tlObj.yData = [341, 314, 411, 531, 461, 288, 189, 351];
+      }
+      if (val == "year") {
+        this.total = 91;
+        this.tlObj.yData = [1312, 1231, 1253, 1456, 1327, 1571, 1468, 1278];
+      }
     },
   },
 };
diff --git a/src/views/enterpriseRiskIndex/analysis.vue b/src/views/enterpriseRiskIndex/analysis.vue
index fdb0aac..a021b2e 100644
--- a/src/views/enterpriseRiskIndex/analysis.vue
+++ b/src/views/enterpriseRiskIndex/analysis.vue
@@ -44,6 +44,9 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">异常风险项得分占比</div>
         </div>
+        <div class="chartPanel flex-center" v-if="show">
+          <dPie :chartObj="trObj"></dPie>
+        </div>
       </div>
     </div>
     <div class="riskRow">
@@ -62,7 +65,7 @@
           <div class="riskNameText">风险总量分析变化趋势图</div>
         </div>
         <div class="chartPanel">
-          <lineOne :chartObj="mmObj"></lineOne>
+          <lineOne :chartObj="bmObj"></lineOne>
         </div>
       </div>
       <div class="riskCol rightCol">
@@ -70,15 +73,20 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">风险标签排行</div>
         </div>
+        <div class="chartPanel">
+          <barThree :chartObj="brObj"></barThree>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import barOne from "@/loveflow/components/echart/bar/one.vue";
+import barThree from "@/loveflow/components/echart/bar/three.vue";
+import dPie from "@/loveflow/components/echart/pie/dPie.vue";
 import lineOne from "@/loveflow/components/echart/line/one.vue";
 export default {
-  components: { barOne, lineOne },
+  components: { barOne, lineOne, barThree, dPie },
   data() {
     return {
       curTime: "day",
@@ -92,9 +100,10 @@ export default {
           "危险化学品",
           "民爆物品",
         ],
-        yData: [12, 13, 14, 15, 11, 14],
+        yData: [3, 4, 3, 1, 3, 4, 2],
         name: "风险监测项评分排行",
       },
+      trObj: {},
       tmObj: {
         xData: [
           "1月",
@@ -111,9 +120,12 @@ export default {
           "12月",
         ],
         yData: [
-          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
-          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
-          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+          [
+            1217, 1112, 1098, 987, 1312, 1512, 997, 1126, 1275, 1309, 1292,
+            1179,
+          ],
+          [981, 871, 698, 569, 1001, 872, 786, 659, 819, 797, 931, 769],
+          [801, 987, 1021, 1056, 1301, 1109, 982, 891, 1201, 1118, 1292, 1101],
         ],
         name: "频繁变化风险监测信息近一年变化趋势图",
         legend: ["违规事故", "重点人员", "流动人员"],
@@ -134,10 +146,10 @@ export default {
           "内部治安",
           "网络安全",
         ],
-        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        yData: [212, 211, 313, 149, 195, 11, 164, 172],
         name: "风险标签排行",
       },
-      mmObj: {
+      bmObj: {
         xData: [
           "1月",
           "2月",
@@ -153,10 +165,10 @@ export default {
           "12月",
         ],
         yData: [
-          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
-          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
-          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
-          [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+          [317, 412, 298, 487, 312, 512, 397, 226, 275, 309, 292, 479],
+          [517, 512, 698, 587, 412, 712, 597, 426, 475, 509, 392, 379],
+          [981, 871, 698, 569, 1001, 872, 786, 659, 819, 797, 931, 769],
+          [801, 987, 1021, 1056, 1301, 1109, 982, 891, 1201, 1118, 1292, 1101],
         ],
         name: "风险总量分析变化趋势图",
         legend: [
@@ -172,11 +184,45 @@ export default {
           ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
         ],
       },
+      brObj: {
+        data: [
+          {
+            name: "危险化学品",
+            value: 134,
+          },
+          {
+            name: "民爆物品",
+            value: 334,
+          },
+          {
+            name: "重点人员",
+            value: 234,
+          },
+          {
+            name: "流动人员",
+            value: 84,
+          },
+        ],
+        name: "风险标签排行",
+      },
+      show: false,
     };
   },
+  mounted() {
+    this.show = true;
+  },
   methods: {
     changeTime(val) {
       this.curTime = val;
+      if (val == "day") {
+        this.tlObj.yData = [3, 4, 3, 1, 3, 4, 2];
+      }
+      if (val == "month") {
+        this.tlObj.yData = [90, 120, 98, 76, 102, 132, 111];
+      }
+      if (val == "year") {
+        this.tlObj.yData = [360, 481, 398, 312, 401, 512, 437];
+      }
     },
   },
 };
diff --git a/src/views/enterpriseRiskIndex/components/tableCard.vue b/src/views/enterpriseRiskIndex/components/tableCard.vue
new file mode 100644
index 0000000..0033d58
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/tableCard.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="tableCardWrap">
+    <div class="cardRow">
+      <div class="title">{{ dataObj.title }}</div>
+    </div>
+    <div class="cardRow">
+      <div class="cardCol">
+        <div class="cardLabel">创建人：</div>
+        <div class="cardValue">{{ dataObj.creator }}</div>
+      </div>
+      <div class="cardCol">
+        <div class="cardLabel">模板类型：</div>
+        <div class="cardValue cardValueBg">{{ dataObj.model }}</div>
+      </div>
+      <div class="cardCol">
+        <div v-if="!back" class="optWrap flex-center" @click="checkDetail()">
+          查看详情
+        </div>
+        <div v-if="back" class="optWrap flex-center" @click="goBack()">
+          返回
+        </div>
+      </div>
+    </div>
+    <div class="cardRow">
+      <div class="cardCol">
+        <div class="cardLabel">创建时间：</div>
+        <div class="cardValue">{{ dataObj.createTime }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    back: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    checkDetail() {
+      this.$emit("checkDetail", this.dataObj);
+    },
+    goBack() {
+      this.$emit("goBack");
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.tableCardWrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 16px;
+  height: 122px;
+  background: url("~@/assets/images/screen/list.png") no-repeat center center;
+  background-size: 100% 100%;
+  .cardRow {
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-weight: 500;
+      font-size: 16px;
+      color: #30c4ff;
+    }
+    .cardCol {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      .cardLabel {
+        color: #d0deee;
+      }
+      .cardValue {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        color: #ffffff;
+      }
+      .cardValueBg {
+        padding: 0 16px;
+        background: url("~@/assets/images/screen/model.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+
+      .optWrap {
+        padding: 0 20px;
+        height: 42px;
+        background: url("~@/assets/images/screen/detail.png") no-repeat center;
+        background-size: 100% 100%;
+        color: #ffffff;
+        &:hover {
+          cursor: pointer;
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/timeSelect.vue b/src/views/enterpriseRiskIndex/components/timeSelect.vue
index cdf74f1..a5bda7e 100644
--- a/src/views/enterpriseRiskIndex/components/timeSelect.vue
+++ b/src/views/enterpriseRiskIndex/components/timeSelect.vue
@@ -45,6 +45,7 @@ export default {
   z-index: 12;
   right: 5%;
   display: flex;
+  top: 3.6vh;
   div {
     display: flex;
     justify-content: center;
diff --git a/src/views/enterpriseRiskIndex/components/topicMain.vue b/src/views/enterpriseRiskIndex/components/topicMain.vue
new file mode 100644
index 0000000..0751c2b
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/topicMain.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="estimateWrap">
+    <div class="riskTrim tlIcon"></div>
+    <div class="riskTrim trIcon"></div>
+    <div class="riskTrim blIcon"></div>
+    <div class="riskTrim brIcon"></div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.estimateWrap {
+  height: 100%;
+  position: relative;
+  background: url("~@/assets/images/screen/estimate.png") no-repeat center
+    center;
+  background-size: 100% 100%;
+  .riskTrim {
+    position: absolute;
+    height: 32px;
+    width: 32px;
+    background-size: 100% 100%;
+  }
+  .tlIcon {
+    top: 0;
+    left: 0;
+    background: url("~@/assets/images/screen/tl.png") no-repeat center center;
+  }
+  .trIcon {
+    top: 0;
+    right: 0;
+    background: url("~@/assets/images/screen/tr.png") no-repeat center center;
+  }
+  .blIcon {
+    bottom: 0;
+    left: 0;
+    background: url("~@/assets/images/screen/bl.png") no-repeat center center;
+  }
+  .brIcon {
+    bottom: 0;
+    right: 0;
+    background: url("~@/assets/images/screen/br.png") no-repeat center center;
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/totalCard.vue b/src/views/enterpriseRiskIndex/components/totalCard.vue
index 0201584..0186919 100644
--- a/src/views/enterpriseRiskIndex/components/totalCard.vue
+++ b/src/views/enterpriseRiskIndex/components/totalCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="riskTotalWrap">
     <div>{{ dataObj.name }}</div>
-    <div class="totalText">10000</div>
+    <div class="totalText">{{dataObj.value}}</div>
   </div>
 </template>
 <script>
@@ -22,7 +22,6 @@ export default {
 <style lang="scss" scoped>
 @import "@/loveflow/assets/index.scss";
 .riskTotalWrap {
-  margin-top: 46px;
   margin-left: 2%;
   width: 93%;
   display: flex;
diff --git a/src/views/enterpriseRiskIndex/estimate.vue b/src/views/enterpriseRiskIndex/estimate.vue
index 2700239..b9d598f 100644
--- a/src/views/enterpriseRiskIndex/estimate.vue
+++ b/src/views/enterpriseRiskIndex/estimate.vue
@@ -1,3 +1,94 @@
 <template>
-  <div>专题评估</div>
+  <div class="estimatePanel">
+    <topicMain>
+      <div class="estimateTableWrap">
+        <div class="estimateTable">
+          <div class="mb20" v-for="item in dataSource" :key="item.id">
+            <tableCard @checkDetail="checkDetail" :dataObj="item"></tableCard>
+          </div>
+        </div>
+      </div>
+      <gMainTable
+        ref="gMainTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gMainTable>
+    </topicMain>
+  </div>
 </template>
+<script>
+import topicMain from "./components/topicMain.vue";
+import tableCard from "./components/tableCard.vue";
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  components: { topicMain, tableCard },
+  mixins: [tableListMixins],
+  data() {
+    return {
+      disableMixinCreated: true,
+      columns: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+      ],
+    };
+  },
+  created() {
+    for (let i = 0; i < 10; i++) {
+      this.dataSource.push({
+        id: i,
+        title: "[20240213]平安企业风险评估报告" + i,
+        creator: "创建人",
+        model: "通用模板",
+        createTime: "2024-2-24 12:12:58",
+      });
+    }
+  },
+  methods: {
+    checkDetail(item) {
+      console.log(item);
+      this.$router.push({
+        path: "/riskIndex/estimateDetail",
+        query: item,
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.estimatePanel {
+  padding: 20px;
+  height: 100%;
+  box-sizing: border-box;
+  color: #ffffff;
+  overflow: hidden;
+  .estimateTableWrap {
+    padding: 20px;
+    height: calc(100% - 84px);
+    .estimateTable {
+      height: 100%;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  /deep/.el-table {
+    display: none;
+  }
+}
+</style>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.estimatePanel {
+  height: vh(932);
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/estimateDetail.vue b/src/views/enterpriseRiskIndex/estimateDetail.vue
new file mode 100644
index 0000000..570ed24
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/estimateDetail.vue
@@ -0,0 +1,658 @@
+<template>
+  <div class="estimateDetailPanel">
+    <topicMain>
+      <div class="estimateDetailWrap">
+        <div class="estimateInfo mb18">
+          <tableCard :back="true" :dataObj="info" @goBack="goBack"></tableCard>
+        </div>
+        <div class="estimateScreen">
+          <div class="riskRow mb18">
+            <div class="riskCol leftCol mr18">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">企业风险标签增长趋势</div>
+              </div>
+              <div class="riskUpWrap">
+                <div class="riskUpTotal totalTop">
+                  <div class="left">
+                    <div class="totalName fontsize16">本年度风险标签总量</div>
+                    <div class="totalValue">
+                      <div class="item">
+                        <div class="value fontsize22">
+                          {{ total.toLocaleString() }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="totalName">增长趋势</div>
+                    <div class="totalValue">
+                      <div class="item">
+                        <div class="label fontsize14">同比增长</div>
+                        <div class="value fontsize22">2%</div>
+                      </div>
+                      <div class="item">
+                        <div class="label fontsize14">环比增长</div>
+                        <div class="value fontsize22">3%</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="riskUpTotal totalMid">
+                  <div class="left">
+                    <div class="totalName fontsize16">近三月风险标签总量</div>
+                    <div class="totalValue">
+                      <div class="item">
+                        <div class="value fontsize22">
+                          {{ total1.toLocaleString() }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="totalName fontsize16">增长趋势</div>
+                    <div class="totalValue">
+                      <div class="item">
+                        <div class="label fontsize14">同比增长</div>
+                        <div class="value fontsize22">3%</div>
+                      </div>
+                      <div class="item">
+                        <div class="label fontsize14">环比增长</div>
+                        <div class="value fontsize22">2%</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="riskUpTotal totalBtm">
+                  <div class="left">
+                    <div class="totalName fontsize16">当月风险标签总量</div>
+                    <div class="totalValue">
+                      <div class="item">
+                        <div class="value fontsize22">
+                          {{ total2.toLocaleString() }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="totalName fontsize16">增长趋势</div>
+                    <div class="totalValue">
+                      <div class="item">
+                        <div class="label fontsize14">同比增长</div>
+                        <div class="value fontsize22">1%</div>
+                      </div>
+                      <div class="item">
+                        <div class="label fontsize14">环比增长</div>
+                        <div class="value fontsize22">2%</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="riskCol leftCol mr18">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">企业综合风险雷达图</div>
+              </div>
+              <div class="chartPanel">
+                <radarOne :chartObj="tmObj"></radarOne>
+              </div>
+            </div>
+            <div class="riskCol leftCol">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">异常风险项得分占比</div>
+              </div>
+              <div class="chartPanel flex-center" v-if="show">
+                <dPie v-lazy :chartObj="trObj"></dPie>
+              </div>
+            </div>
+          </div>
+          <div class="riskRow mb18">
+            <div class="riskCol leftCol mr18">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">异常风险得分对比</div>
+              </div>
+              <div class="chartPanel">
+                <barThree :chartObj="mlObj"></barThree>
+              </div>
+            </div>
+            <div class="riskCol rightCol">
+              <div
+                class="riskLine"
+                v-for="(line, index) in dataList"
+                :key="index"
+              >
+                <div class="riskItem" v-for="item in line" :key="item.name">
+                  <div class="riskItemLeft">
+                    <div class="icon">
+                      <img :src="item.icon" />
+                    </div>
+                  </div>
+                  <div class="riskItemRight">
+                    <div class="riskItemName">{{ item.name }}</div>
+                    <div class="riskItemValue">{{ item.value }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="riskRow">
+            <div class="riskCol leftCol mr18">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">全区企业风险预警总量</div>
+              </div>
+              <div class="chartPanel">
+                <pieTwo :chartObj="blObj"></pieTwo>
+              </div>
+            </div>
+            <div class="riskCol leftCol mr18">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">全区企业风险标签数量趋势</div>
+              </div>
+              <div class="chartPanel">
+                <lineOne :chartObj="bmObj"></lineOne>
+              </div>
+            </div>
+            <div class="riskCol leftCol">
+              <div class="riskName">
+                <div class="riskIcon"></div>
+                <div class="riskNameText">企业综合风险趋势图</div>
+              </div>
+              <div class="totalWrap">
+                <left-card :dataObj="leftData"></left-card>
+                <right-card :dataObj="rightData"></right-card>
+              </div>
+              <div class="chartPanel" style="height: calc(100% - 120px)">
+                <barOne :chartObj="brObj"></barOne>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </topicMain>
+  </div>
+</template>
+<script>
+import tableCard from "./components/tableCard.vue";
+import topicMain from "./components/topicMain.vue";
+import barOne from "@/loveflow/components/echart/bar/one.vue";
+import radarOne from "@/loveflow/components/echart/radar/one.vue";
+import pieTwo from "@/loveflow/components/echart/pie/two.vue";
+import lineOne from "@/loveflow/components/echart/line/one.vue";
+import leftCard from "./components/leftCard.vue";
+import rightCard from "./components/rightCard.vue";
+import dPie from "@/loveflow/components/echart/pie/dPie.vue";
+import barThree from "@/loveflow/components/echart/bar/three.vue";
+
+export default {
+  components: {
+    tableCard,
+    topicMain,
+    barOne,
+    radarOne,
+    pieTwo,
+    lineOne,
+    leftCard,
+    rightCard,
+    dPie,
+    barThree,
+  },
+  data() {
+    return {
+      total: 21345,
+      total1: 545,
+      total2: 115,
+      info: {},
+      leftData: {
+        name: "综合风险总量",
+        value: "23135",
+      },
+      rightData: {
+        tb: 2,
+        hb: 3,
+      },
+      dataList: [
+        [
+          {
+            name: "流动人口管理异常",
+            value: 13211,
+            icon: require("@/assets/images/screen/11.png"),
+          },
+          {
+            name: "人员背景审核异常分析",
+            value: 2321,
+            icon: require("@/assets/images/screen/12.png"),
+          },
+          {
+            name: "重点岗位资质核查异常分析",
+            value: 3321,
+            icon: require("@/assets/images/screen/13.png"),
+          },
+        ],
+        [
+          {
+            name: "人员涉警(案)情况异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/21.png"),
+          },
+          {
+            name: "装卸量差异分析",
+            value: 1329,
+            icon: require("@/assets/images/screen/22.png"),
+          },
+          {
+            name: "运输车辆背景异常分析",
+            value: 2341,
+            icon: require("@/assets/images/screen/23.png"),
+          },
+        ],
+        [
+          {
+            name: "运输车辆异常预警",
+            value: 12431,
+            icon: require("@/assets/images/screen/31.png"),
+          },
+          {
+            name: "驾驶员押运员资质异常分析",
+            value: 2134,
+            icon: require("@/assets/images/screen/32.png"),
+          },
+          {
+            name: "单位检查情况异常分析",
+            value: 879,
+            icon: require("@/assets/images/screen/33.png"),
+          },
+        ],
+      ],
+      tmObj: {
+        indicator: [
+          {
+            name: "人员安全",
+            max: 100,
+          },
+          {
+            name: "防攻击管理",
+            max: 100,
+          },
+          {
+            name: "道路安全",
+            max: 100,
+          },
+          {
+            name: "列管物品",
+            max: 100,
+          },
+          {
+            name: "消防安全",
+            max: 100,
+          },
+          {
+            name: "危化品运输",
+            max: 100,
+          },
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14],
+        name: "风险监测项评分排行",
+      },
+      trObj: {},
+      mlObj: {
+        data: [
+          {
+            name: "危险化学品",
+            value: 134,
+          },
+          {
+            name: "民爆物品",
+            value: 334,
+          },
+          {
+            name: "重点人员",
+            value: 234,
+          },
+          {
+            name: "流动人员",
+            value: 84,
+          },
+        ],
+        name: "异常风险得分对比",
+      },
+      blObj: {
+        height: 0,
+        color: ["#2B82F3", "#FFD16A", "#48EEBD", "#FF745A"],
+        data: [
+          { value: 1048, name: "重点人员预警" },
+          { value: 735, name: "企业整改预警" },
+          { value: 580, name: "流动人员预警" },
+          { value: 484, name: "其他" },
+        ],
+        name: "全区企业风险预警总量",
+      },
+      bmObj: {
+        gridTop: "15%",
+        legendTop: "2%",
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [618, 711, 678, 811, 671, 812, 734, 597, 638, 712, 812, 768],
+          [698, 811, 671, 768, 812, 712, 638, 597, 711, 734, 878, 638],
+          [811, 671, 618, 734, 597, 812, 761, 768, 638, 597, 812, 712],
+          [671, 734, 811, 711, 618, 768, 671, 712, 768, 690, 638, 798],
+          [812, 671, 711, 812, 679, 638, 763, 768, 597, 871, 711, 567],
+          [734, 812, 618, 811, 638, 671, 712, 597, 812, 638, 638, 654],
+          [812, 811, 597, 711, 811, 618, 734, 638, 812, 712, 897, 638],
+        ],
+        name: "全区企业风险标签数量变化趋势",
+        legend: [
+          "澥浦镇",
+          "九龙湖镇",
+          "照宝山街道",
+          "蛟川街道",
+          "骆驼街道",
+          "贵驷街道",
+          "庄市街道",
+        ],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,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)"],
+          ["#B276FF", "rgba(178,118,255,0.1)", "rgba(178,118,255,0.1)"],
+          ["#FF6AEE", "rgba(255,106,238,0.1)", "rgba(255,106,238,0.1)"],
+        ],
+      },
+      brObj: {
+        gridTop: "10%",
+        gridBtm: "15%",
+        xData: [
+          "人员安全",
+          "危化品运输",
+          "防攻击管理",
+          "消防安全",
+          "列管物品",
+          "道路安全",
+          "内部治安",
+          "网络安全",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        name: "企业综合风险趋势图",
+      },
+    };
+  },
+  mounted() {
+    console.log(this.$route);
+    this.info = this.$route.query;
+    this.show = true;
+  },
+  methods: {
+    goBack() {
+      this.$router.push("/riskIndex/estimate");
+    },
+  },
+};
+</script>
+<style lang="less">
+.estimateDetailPanel {
+  padding: 20px;
+  height: 100%;
+  .estimateDetailWrap {
+    padding: 20px;
+    height: 100%;
+    .estimateScreen {
+      height: calc(100% - 140px);
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .riskRow {
+      flex: 1;
+      display: flex;
+      .riskCol {
+        position: relative;
+        padding-left: 8px;
+        height: 422px;
+        flex: 1;
+        background: url("~@/assets/images/screen/line.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+
+        .riskName {
+          height: 40px;
+          display: flex;
+          margin-top: 6px;
+          color: #d9e7ff;
+
+          .riskIcon {
+            width: 24px;
+            height: 24px;
+            background: url("~@/assets/images/screen/riskIcon.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+          }
+        }
+
+        .riskTotal {
+          margin-top: 40px;
+          margin-left: 2%;
+          width: 93%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 46px;
+          background: url("~@/assets/images/screen/total.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          font-size: 18px;
+          font-weight: 500;
+          color: #d0deee;
+          .totalText {
+            margin-left: 16px;
+            font-size: 26px;
+            color: #ebf9ff;
+            line-height: 25px;
+            letter-spacing: 3px;
+            text-shadow: 0px 0px 9px #159aff;
+          }
+        }
+        .chartPanel {
+          height: calc(100% - 50px);
+        }
+
+        .riskUpWrap {
+          padding: 0 10px;
+          .left {
+            width: 190px;
+          }
+          .left,
+          .right {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+
+          .totalTop {
+            background: url("~@/assets/images/screen/zb1.png") no-repeat center
+              center;
+            color: #eed0d0;
+            .value {
+              color: #ff8080;
+            }
+          }
+          .totalMid {
+            background: url("~@/assets/images/screen/zb2.png") no-repeat center
+              center;
+            color: #eee3d0;
+            .value {
+              color: #ffba80;
+            }
+          }
+          .totalBtm {
+            background: url("~@/assets/images/screen/zb3.png") no-repeat center
+              center;
+            color: #d0e3ee;
+            .value {
+              color: #80dbff;
+            }
+          }
+          .riskUpTotal {
+            display: flex;
+            padding-left: 20px;
+            height: 120px;
+            background-size: 100% 100%;
+          }
+          .totalName {
+            font-weight: 500;
+            margin-bottom: 6px;
+          }
+          .totalValue {
+            display: flex;
+            .item {
+              display: flex;
+              align-items: baseline;
+              margin-right: 20px;
+              .label {
+                margin-right: 8px;
+                font-weight: 500;
+                color: #ffffff;
+              }
+              .value {
+                margin-right: 4px;
+                font-weight: 500;
+                letter-spacing: 1px;
+                text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
+              }
+            }
+          }
+        }
+        .totalWrap {
+          display: flex;
+          height: 80px;
+        }
+      }
+      .leftCol {
+        flex: auto;
+        width: calc(33.33% - 18px);
+      }
+      .rightCol {
+        padding: 4px 4px 4px 24px;
+        flex: auto;
+        width: calc(66.66% - 12px);
+        background: url("~@/assets/images/screen/09091.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+
+        .riskLine {
+          display: flex;
+          .riskItem {
+            display: flex;
+            flex: 1;
+            margin-right: 18px;
+            padding-left: 10px;
+            align-items: center;
+            height: 122px;
+            background: url("~@/assets/images/screen/error.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+            .riskItemLeft {
+              margin-right: 10px;
+              .icon {
+                width: 90px;
+                height: 70px;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
+            .riskItemRight {
+              flex: 1;
+              .riskItemName {
+                font-size: 18px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                color: #c4e5ff;
+                line-height: 25px;
+              }
+              .riskItemValue {
+                font-size: 28px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                color: #ebf9ff;
+                line-height: 37px;
+                letter-spacing: 1px;
+                text-shadow: 0px 0px 9px #159aff;
+              }
+            }
+          }
+        }
+      }
+
+      .riskLine {
+        display: flex;
+        .riskItem {
+          display: flex;
+          flex: 1;
+          margin-right: 18px;
+          padding-left: 10px;
+          align-items: center;
+          height: 114px;
+          background: url("~@/assets/images/screen/error.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .riskItemLeft {
+            margin-right: 10px;
+            .icon {
+              width: 90px;
+              height: 70px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+          .riskItemRight {
+            flex: 1;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 500;
+            .riskItemName {
+              font-size: 18px;
+              color: #c4e5ff;
+              line-height: 25px;
+            }
+            .riskItemValue {
+              font-size: 28px;
+              color: #ebf9ff;
+              line-height: 37px;
+              letter-spacing: 1px;
+              text-shadow: 0px 0px 9px #159aff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/synthetical.vue b/src/views/enterpriseRiskIndex/synthetical.vue
index e2b17a6..4c990e6 100644
--- a/src/views/enterpriseRiskIndex/synthetical.vue
+++ b/src/views/enterpriseRiskIndex/synthetical.vue
@@ -19,8 +19,8 @@
           <left-card :dataObj="leftData"></left-card>
           <right-card :dataObj="rightData"></right-card>
         </div>
-        <time-select @ok="tmTime" style="top: 35px"></time-select>
-        <div class="chartPanel" style="height: calc(100% - 160px)">
+        <time-select @ok="tmTime"></time-select>
+        <div class="chartPanel" style="height: 26vh">
           <barOne :chartObj="tmObj"></barOne>
         </div>
       </div>
@@ -29,8 +29,12 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">全区企业风险标签增长趋势</div>
         </div>
-        <div class="chartPanel">
-          <time-select @ok="trTime"></time-select>
+        <div class="totalWrap">
+          <left-card :dataObj="lefData"></left-card>
+          <right-card :dataObj="righData"></right-card>
+        </div>
+        <time-select @ok="trTime"></time-select>
+        <div class="chartPanel" style="height: 26vh">
           <pieOne :chartObj="trObj"></pieOne>
         </div>
       </div>
@@ -41,13 +45,15 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">全区企业风险预警总量</div>
         </div>
-        <total-card :dataObj="totalData"></total-card>
-        <div class="chartPanelBg"></div>
+        <div class="riskTotalPanel">
+          <total-card :dataObj="totalData"></total-card>
+        </div>
+        <!-- <div class="chartPanelBg"></div> -->
         <div
           class="chartPanel"
-          style="height: calc(100% - 136px); width: 88%; margin-left: 2%"
+          style="height: calc(100% - 12vh); width: 88%; margin-left: 2%"
         >
-          <time-select @ok="blTime" style="top: 44px"></time-select>
+          <time-select @ok="blTime"></time-select>
           <pieOne :chartObj="blObj"></pieOne>
         </div>
       </div>
@@ -83,11 +89,11 @@
               <div class="totalValue">
                 <div class="item">
                   <div class="label fontsize14">同比增长</div>
-                  <div class="value fontsize22">23%</div>
+                  <div class="value fontsize22">2%</div>
                 </div>
                 <div class="item">
                   <div class="label fontsize14">环比增长</div>
-                  <div class="value fontsize22">23%</div>
+                  <div class="value fontsize22">3%</div>
                 </div>
               </div>
             </div>
@@ -98,7 +104,7 @@
               <div class="totalValue">
                 <div class="item">
                   <div class="value fontsize22">
-                    {{ total.toLocaleString() }}
+                    {{ total2.toLocaleString() }}
                   </div>
                 </div>
               </div>
@@ -108,11 +114,11 @@
               <div class="totalValue">
                 <div class="item">
                   <div class="label fontsize14">同比增长</div>
-                  <div class="value fontsize22">23%</div>
+                  <div class="value fontsize22">4%</div>
                 </div>
                 <div class="item">
                   <div class="label fontsize14">环比增长</div>
-                  <div class="value fontsize22">23%</div>
+                  <div class="value fontsize22">3%</div>
                 </div>
               </div>
             </div>
@@ -123,7 +129,7 @@
               <div class="totalValue">
                 <div class="item">
                   <div class="value fontsize22">
-                    {{ total.toLocaleString() }}
+                    {{ total1.toLocaleString() }}
                   </div>
                 </div>
               </div>
@@ -133,11 +139,11 @@
               <div class="totalValue">
                 <div class="item">
                   <div class="label fontsize14">同比增长</div>
-                  <div class="value fontsize22">23%</div>
+                  <div class="value fontsize22">2%</div>
                 </div>
                 <div class="item">
                   <div class="label fontsize14">环比增长</div>
-                  <div class="value fontsize22">23%</div>
+                  <div class="value fontsize22">1%</div>
                 </div>
               </div>
             </div>
@@ -172,17 +178,27 @@ export default {
     return {
       leftData: {
         name: "综合风险总量",
-        value: "21135",
+        value: "78",
       },
       rightData: {
-        tb: 12,
-        hb: 23,
+        tb: 1,
+        hb: 2,
+      },
+      lefData: {
+        name: "综合风险总量",
+        value: "78",
+      },
+      righData: {
+        tb: 1,
+        hb: 2,
       },
       totalData: {
         name: "今日企业风险项量",
-        value: 10000,
+        value: 7,
       },
       total: 21345,
+      total1: 198,
+      total2: 879,
       tlObj: {
         indicator: [
           {
@@ -254,13 +270,13 @@ export default {
           "12月",
         ],
         yData: [
-          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
-          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
-          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
-          [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
-          [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
-          [15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
-          [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
+          [8, 3, 1, 11, 9, 7, 8, 12, 5, 9, 12, 3],
+          [1, 7, 2, 9, 4, 10, 7, 3, 1, 11, 5, 8],
+          [4, 3, 1, 11, 9, 7, 8, 12, 5, 9, 6, 2],
+          [2, 11, 7, 8, 3, 11, 9, 11, 7, 1, 2, 1],
+          [3, 9, 1, 11, 11, 6, 9, 9, 4, 7, 8, 3],
+          [9, 6, 1, 11, 12, 8, 11, 6, 4, 6, 1, 7],
+          [5, 3, 11, 7, 3, 9, 1, 2, 8, 4, 1, 4],
         ],
         name: "全区企业风险标签数量变化趋势",
         legend: [
@@ -283,12 +299,23 @@ export default {
         ],
       },
       trObj: {
-        color: ["#2B82F3", "#FFD16A", "#48EEBD", "#FF745A"],
+        color: [
+          "#09C8F5",
+          "#48EEBD",
+          "#FFD16A",
+          "#FF8A5A",
+          "#FF3B3B",
+          "#B276FF",
+          "#FF6AEE",
+        ],
         data: [
-          { value: 1048, name: "重点人员预警" },
-          { value: 735, name: "企业整改预警" },
-          { value: 580, name: "流动人员预警" },
-          { value: 484, name: "其他" },
+          { value: 1048, name: "澥浦镇" },
+          { value: 735, name: "九龙湖镇" },
+          { value: 580, name: "照宝山街道" },
+          { value: 484, name: "蛟川街道" },
+          { value: 567, name: "骆驼街道" },
+          { value: 489, name: "贵驷街道" },
+          { value: 517, name: "庄市街道" },
         ],
         name: "全区企业风险预警总量",
       },
@@ -297,16 +324,108 @@ export default {
   mounted() {},
   methods: {
     tmTime(val) {
-      console.log("tmTime:" + val);
+      if (val == "day") {
+        this.leftData.value = 78;
+        this.rightData.tb = 1;
+        this.rightData.hb = 2;
+        this.tmObj.yData = [12, 11, 13, 14, 15, 11, 14, 12];
+      }
+      if (val == "month") {
+        this.leftData.value = 212;
+        this.rightData.tb = 9;
+        this.rightData.hb = 11;
+        this.tmObj.yData = [341, 314, 411, 531, 461, 288, 189, 351];
+      }
+      if (val == "year") {
+        this.leftData.value = 811;
+        this.rightData.tb = 4;
+        this.rightData.hb = 5;
+        this.tmObj.yData = [1312, 1231, 1253, 1456, 1327, 1571, 1468, 1278];
+      }
     },
     trTime(val) {
-      console.log("trTime:" + val);
+      if (val == "day") {
+        this.lefData.value = 78;
+        this.righData.tb = 1;
+        this.righData.hb = 2;
+      }
+      if (val == "month") {
+        this.lefData.value = 212;
+        this.righData.tb = 9;
+        this.righData.hb = 11;
+      }
+      if (val == "year") {
+        this.lefData.value = 811;
+        this.righData.tb = 4;
+        this.righData.hb = 5;
+      }
     },
     blTime(val) {
-      console.log("blTime:" + val);
+      if (val == "day") {
+        this.totalData.value = 7;
+      }
+      if (val == "month") {
+        this.totalData.value = 23;
+      }
+      if (val == "year") {
+        this.totalData.value = 91;
+      }
     },
     bmTime(val) {
-      console.log("bmTime:" + val);
+      if (val == "day") {
+        this.bmObj.yData = [
+          [8, 3, 1, 11, 9, 7, 8, 12, 5, 9, 12, 3],
+          [1, 7, 2, 9, 4, 10, 7, 3, 1, 11, 5, 8],
+          [4, 3, 1, 11, 9, 7, 8, 12, 5, 9, 6, 2],
+          [2, 11, 7, 8, 3, 11, 9, 11, 7, 1, 2, 1],
+          [3, 9, 1, 11, 11, 6, 9, 9, 4, 7, 8, 3],
+          [9, 6, 1, 11, 12, 8, 11, 6, 4, 6, 1, 7],
+          [5, 3, 11, 7, 3, 9, 1, 2, 8, 4, 1, 4],
+        ];
+      }
+      if (val == "month") {
+        this.bmObj.yData = [
+          [618, 711, 678, 811, 671, 812, 734, 597, 638, 712, 812, 768],
+          [698, 811, 671, 768, 812, 712, 638, 597, 711, 734, 878, 638],
+          [811, 671, 618, 734, 597, 812, 761, 768, 638, 597, 812, 712],
+          [671, 734, 811, 711, 618, 768, 671, 712, 768, 690, 638, 798],
+          [812, 671, 711, 812, 679, 638, 763, 768, 597, 871, 711, 567],
+          [734, 812, 618, 811, 638, 671, 712, 597, 812, 638, 638, 654],
+          [812, 811, 597, 711, 811, 618, 734, 638, 812, 712, 897, 638],
+        ];
+      }
+      if (val == "year") {
+        this.bmObj.yData = [
+          [
+            2618, 2711, 2678, 2811, 2671, 2812, 2734, 2597, 2638, 2712, 2812,
+            2768,
+          ],
+          [
+            2698, 2811, 2671, 2768, 2812, 2712, 2638, 2597, 2711, 2734, 2878,
+            2638,
+          ],
+          [
+            2811, 2671, 2618, 2734, 2597, 2812, 2761, 2768, 2638, 2597, 2812,
+            2712,
+          ],
+          [
+            2671, 2734, 2811, 2711, 2618, 2768, 2671, 2712, 2768, 2690, 2638,
+            2798,
+          ],
+          [
+            2812, 2671, 2711, 2812, 2679, 2638, 2763, 2768, 2597, 2871, 2711,
+            2567,
+          ],
+          [
+            2734, 2812, 2618, 2811, 2638, 2671, 2712, 2597, 2812, 2638, 2638,
+            2654,
+          ],
+          [
+            2812, 2811, 2597, 2711, 2811, 2618, 2734, 2638, 2812, 2712, 2897,
+            2638,
+          ],
+        ];
+      }
     },
   },
 };
@@ -318,6 +437,7 @@ export default {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   .riskRow {
     flex: 1;
@@ -334,21 +454,19 @@ export default {
       .chartPanelBg {
         position: absolute;
         width: 60%;
-        height: 208px;
+        height: 28px;
         top: calc(50% - 44px);
         left: 30%;
         background-color: rgba(108, 128, 151, 0.1);
       }
       .totalWrap {
         display: flex;
-        margin-top: 38px;
       }
       .riskUpWrap {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        margin-top: 2px;
-        height: calc(100% - 50px);
+        height: calc(100% - 4vh);
         display: flex;
         .left {
           width: 190px;
@@ -397,6 +515,7 @@ export default {
         }
         .totalName {
           font-weight: 500;
+          margin-bottom: 4px;
         }
         .totalValue {
           display: flex;
@@ -441,7 +560,7 @@ export default {
     font-size: vh(16);
 
     .riskName {
-      height: 30px;
+      height: vh(30);
       display: flex;
       margin-top: vh(6);
       color: #d9e7ff;
@@ -454,6 +573,13 @@ export default {
         background-size: 100% 100%;
       }
     }
+    .totalWrap {
+      display: flex;
+      margin-top: vh(40);
+    }
+    .riskTotalPanel {
+      margin-top: vh(40);
+    }
   }
 }
 </style>
diff --git a/src/views/systemManagement/floatPopulation/index.vue b/src/views/systemManagement/floatPopulation/index.vue
index 0568419..952c953 100644
--- a/src/views/systemManagement/floatPopulation/index.vue
+++ b/src/views/systemManagement/floatPopulation/index.vue
@@ -367,7 +367,7 @@ export default {
         }
         .opt {
           margin-top: 10px;
-          width: 100%;
+          width: calc(100% - 30px);
           display: flex;
           justify-content: flex-end;
           &:hover {