Merge branch 'lukeyan' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb into lukeyan

package-lock.json

@@ -16,6 +16,7 @@
         "echarts": "^5.4.2",
         "echarts-gl": "^2.0.9",
         "element-ui": "^2.15.13",
+        "highcharts": "^11.1.0",
         "highcharts-vue": "^1.4.3",
         "js-cookie": "^3.0.1",
         "less": "3.9.0",
@@ -8511,8 +8512,7 @@
     "node_modules/highcharts": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.1.0.tgz",
-      "integrity": "sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g==",
+      "integrity": "sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g=="
-      "peer": true
     },
     "node_modules/highcharts-vue": {
       "version": "1.4.3",
@@ -22483,8 +22483,7 @@
     "highcharts": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.1.0.tgz",
-      "integrity": "sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g==",
+      "integrity": "sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g=="
-      "peer": true
     },
     "highcharts-vue": {
       "version": "1.4.3",

package.json

@@ -16,6 +16,7 @@
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.13",
+    "highcharts": "^11.1.0",
     "highcharts-vue": "^1.4.3",
     "js-cookie": "^3.0.1",
     "less": "3.9.0",

src/api/enterpriseArchives/index.js

@@ -22,4 +22,11 @@ export function searchList(params) {
         method: 'get',
         params
     })
+}
+//卡片列表
+export function cardLists() {
+    return request({
+        url: '/safety/enterprise-archives/search-engine-homepage/company-history',
+        method: 'get'
+    })
 }

src/main.js

@@ -2,6 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import ElementUI from 'element-ui';
 import HighchartsVue from 'highcharts-vue'
+import highcharts from 'highcharts'
+import highcharts3d from 'highcharts/highcharts-3d'
+highcharts3d(highcharts)
 import 'element-ui/lib/theme-chalk/index.css';
 import router from './router'
 import store from './store'

src/views/compositeIndex/components/chart.js

@@ -0,0 +1,287 @@
+/**
+ * 绘制3d图
+ * @param pieData 总数据
+ * @param internalDiameterRatio:透明的空心占比
+ * @param distance 视角到主体的距离
+ * @param alpha 旋转角度
+ * @param pieHeight 立体的高度
+ * @param opacity 饼或者环的透明度
+ */
+const getPie3D = (
+    pieData,
+    internalDiameterRatio,
+    distance,
+    alpha,
+    pieHeight,
+    opacity = 1
+  ) => {
+    const series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    let legendData = [];
+    let legendBfb = [];
+    const k = 1 - internalDiameterRatio;
+    pieData.sort((a, b) => {
+      return b.value - a.value;
+    });
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i++) {
+      sumValue += pieData[i].value;
+      const 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,
+        },
+        center: ["10%", "50%"],
+      };
+      if (typeof pieData[i].itemStyle !== "undefined") {
+        const itemStyle = {};
+        itemStyle.color =
+          typeof pieData[i].itemStyle.color !== "undefined"
+            ? pieData[i].itemStyle.color
+            : opacity;
+        itemStyle.opacity =
+          typeof pieData[i].itemStyle.opacity !== "undefined"
+            ? pieData[i].itemStyle.opacity
+            : opacity;
+        seriesItem.itemStyle = itemStyle;
+      }
+      series.push(seriesItem);
+    }
+  
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    legendData = [];
+    legendBfb = [];
+    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;
+      const bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
+      legendData.push({
+        name: series[i].name,
+        value: bfb,
+      });
+      legendBfb.push({
+        name: series[i].name,
+        value: bfb,
+      });
+    }
+    const boxHeight = getHeight3D(series, pieHeight); // 通过pieHeight设定3d饼/环的高度，单位是px
+    // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    const option = {
+      legend: {
+        show: false,
+        data: legendData,
+        orient: "vertical",
+        left: 10,
+        top: 10,
+        itemGap: 10,
+        textStyle: {
+          color: "#A1E2FF",
+        },
+        icon: "circle",
+        formatter: function (param) {
+          const item = legendBfb.filter((item) => item.name === param)[0];
+          const bfs = fomatFloat(item.value * 100, 2) + "%";
+          return `${item.name}  ${bfs}`;
+        },
+      },
+      labelLine: {
+        show: true,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      label: {
+        show: true,
+        position: "outside",
+        formatter: "{b} \n{c} {d}%",
+      },
+      tooltip: {
+        backgroundColor: "#033b77",
+        borderColor: "#21f2c4",
+        textStyle: {
+          color: "#fff",
+          fontSize: 13,
+        },
+        formatter: (params) => {
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData');
+            const 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}%`
+            );
+          }
+        },
+      },
+      xAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      yAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      zAxis3D: {
+        min: -1,
+        max: 1,
+      },
+      grid3D: {
+        show: false,
+        boxHeight: boxHeight, // 圆环的高度
+        viewControl: {
+          // 3d效果可以放大、旋转等，请自己去查看官方配置
+          alpha, // 角度
+          distance, // 调整视角到主体的距离，类似调整zoom
+          rotateSensitivity: 0, // 设置为0无法旋转
+          zoomSensitivity: 0, // 设置为0无法缩放
+          panSensitivity: 0, // 设置为0无法平移
+          autoRotate: false, // 自动旋转
+        },
+      },
+      series: series,
+    };
+    return option;
+  };
+  
+  /**
+   * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+   */
+  const getParametricEquation = (
+    startRatio,
+    endRatio,
+    isSelected,
+    isHovered,
+    k,
+    h
+  ) => {
+    // 计算
+    const midRatio = (startRatio + endRatio) / 2;
+    const startRadian = startRatio * Math.PI * 2;
+    const endRadian = endRatio * Math.PI * 2;
+    const 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）
+    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    const 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丙图的最高扇区的高度
+   */
+  const getHeight3D = (series, height) => {
+    series.sort((a, b) => {
+      return b.pieData.value - a.pieData.value;
+    });
+    return (height * 25) / series[0].pieData.value;
+  };
+  
+  /**
+   * 格式化浮点数
+   */
+  const fomatFloat = (num, n) => {
+    let f = parseFloat(num);
+    if (isNaN(f)) {
+      return false;
+    }
+    f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+    let s = f.toString();
+    let rs = s.indexOf(".");
+    // 判定如果是整数，增加小数点再补0
+    if (rs < 0) {
+      rs = s.length;
+      s += ".";
+    }
+    while (s.length <= rs + n) {
+      s += "0";
+    }
+    return s;
+  };
+  
+  export { getPie3D, getParametricEquation };
+  
+  

src/views/compositeIndex/components/companyCar.vue

@@ -0,0 +1,250 @@
+<!-- 园区车辆 -->
+<template>
+  <div class="company_car_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">园区车辆</div>
+    </div>
+    <div class="car_num_box">
+      <!-- 进园区车辆 -->
+      <div class="in_car">
+        <div class="in_car_icon">
+          <div class="in_car_icon_item"></div>
+        </div>
+        <div class="in_car_item">
+          <div class="in_car_item_text">今日进园区</div>
+          <div class="in_car_item_value">
+            <div class="in_car_num">
+              {{ this.in_car_num }}
+            </div>
+            <div class="num_text">辆</div>
+          </div>
+        </div>
+      </div>
+      <!-- 出园区车辆 -->
+      <div class="out_car">
+        <div class="out_car_icon">
+          <div class="out_car_icon_item"></div>
+        </div>
+        <div class="out_car_item">
+          <div class="out_car_item_text">今日出园区</div>
+          <div class="out_car_item_value">
+            <div class="out_car_num">
+              {{ this.out_car_num }}
+            </div>
+            <div class="num_text">辆</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="car_chart"></div>
+  </div>
+</template>
+<script>
+import { vehicleIn } from "@/api/safetyIndex";
+export default {
+  name: "CompanyCar",
+  data() {
+    return {
+      in_car_num: "", // 今日进园区车数量
+      out_car_num: "", // 今日出园区车数量
+    };
+  },
+  created() {
+    this.get_in_car_num();
+    this.get_out_car_num();
+  },
+  methods: {
+    // 获取进园区车辆数
+    get_in_car_num() {
+      let params = {
+        direction: 1,
+        pageSize: 1,
+        pageNum: 1,
+      };
+      vehicleIn(params).then((res) => {
+        this.in_car_num = res.total;
+      });
+    },
+    // 获取出园区车辆数
+    get_out_car_num() {
+      let params = {
+        direction: 2,
+        pageSize: 1,
+        pageNum: 1,
+      };
+      vehicleIn(params).then((res) => {
+        this.out_car_num = res.total;
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.company_car_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 28vh;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+  .car_num_box {
+    margin-left: 1vw;
+    margin-top: 1vh;
+    width: 22vw;
+    height: 5vh;
+    display: flex;
+    justify-content: space-around;
+    .in_car {
+      width: 10vw;
+      height: 5vh;
+      //   border: 0.1px solid #495e70;
+      display: flex;
+      .in_car_icon {
+        width: 2.5vw;
+        height: 5vh;
+        background: url("~@/assets/safetyIndex/back003.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .in_car_icon_item {
+          width: 20px;
+          height: 20px;
+          background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .in_car_item {
+        width: 7vw;
+        height: 5vh;
+        // border: 0.1px solid #495e70;
+        .in_car_item_text {
+          width: 7vw;
+          height: 2.5vh;
+          line-height: 2.5vh;
+          color: #d9e7ff;
+          font-size: 14px;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+        .in_car_item_value {
+          background: url("~@/assets/safetyIndex/back004.png") no-repeat;
+          background-size: 100% 100%;
+          width: 7vw;
+          height: 2.5vh;
+          display: flex;
+          .in_car_num {
+            width: 4vw;
+            height: 2.5vh;
+            color: #d9e7ff;
+            line-height: 2.5vh;
+            text-align: center;
+            font-size: 20px;
+            font-weight: 600;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+          }
+          .num_text {
+            color: #d9e7ff;
+            font-size: 12px;
+            width: 2vw;
+            height: 2.5vh;
+            line-height: 2.5vh;
+          }
+        }
+      }
+    }
+    .out_car {
+      width: 10vw;
+      height: 5vh;
+      display: flex;
+      .out_car_icon {
+        width: 2.5vw;
+        height: 5vh;
+        background: url("~@/assets/safetyIndex/back003.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .out_car_icon_item {
+          width: 20px;
+          height: 20px;
+          background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .out_car_item {
+        width: 7vw;
+        height: 5vh;
+        // border: 0.1px solid #495e70;
+        .out_car_item_text {
+          width: 7vw;
+          height: 2.5vh;
+          line-height: 2.5vh;
+          color: #d9e7ff;
+          font-size: 14px;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+        .out_car_item_value {
+          background: url("~@/assets/safetyIndex/back004.png") no-repeat;
+          background-size: 100% 100%;
+          width: 7vw;
+          height: 2.5vh;
+          display: flex;
+          .out_car_num {
+            width: 4vw;
+            height: 2.5vh;
+            color: #d9e7ff;
+            line-height: 2.5vh;
+            text-align: center;
+            font-size: 20px;
+            font-weight: 600;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+          }
+          .num_text {
+            color: #d9e7ff;
+            font-size: 12px;
+            width: 2vw;
+            height: 2.5vh;
+            line-height: 2.5vh;
+          }
+        }
+      }
+    }
+  }
+  .car_chart {
+    margin-left: 1vw;
+    width: 22vw;
+    height: 18vh;
+    border: 0.1px solid #495e70;
+  }
+}
+</style>

src/views/compositeIndex/components/companyNum.vue

@@ -4,25 +4,25 @@
     <!-- 模块标题 -->
     <div class="title">
       <div class="img_box">
-        <img src="@/assets/safetyIndex/装饰009991.png" alt="" />
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
       </div>
       <div class="title_text">园区企业</div>
     </div>
     <!-- 企业数量 -->
     <div class="company_num_box_body">
-      <div class="company_num_box_body_item">
+      <div class="company_num_box_body_item green">
         <div class="num_green">
           {{ statisticsAlarmData.safeSum }}
         </div>
         <div class="type">平安企业</div>
       </div>
-      <div class="company_num_box_body_item">
+      <div class="company_num_box_body_item orange">
         <div class="num_orange">
           {{ statisticsAlarmData.companySum }}
         </div>
         <div class="type">石化企业</div>
       </div>
-      <div class="company_num_box_body_item">
+      <div class="company_num_box_body_item red">
         <div class="num_red">
           {{ statisticsAlarmData.alarmSum }}
         </div>
@@ -83,6 +83,7 @@ export default {
     getstatisticsDanger() {
       statisticsDanger().then((res) => {
         this.statisticsDangerData = res.data;
+        // all_company_num前四公司的数据
         let all_company_num = this.statisticsDangerData
           .map((item) => item.companyTypeSum)
           .slice(0, 4);
@@ -90,7 +91,7 @@ export default {
         for (let i = 0; i < all_company_num.length; i++) {
           sum += all_company_num[i];
         }
-        console.log(sum);
+        // 算出每个企业的数据占比
         for (let i = 0; i < all_company_num.length; i++) {
           this.proportion_list.push(
             Math.round((Number(all_company_num[i]) / Number(sum)) * 10000) /
@@ -183,11 +184,10 @@ export default {
 <style lang="less" scoped>
 .company_num_box {
   margin-top: 10px;
-  margin-left: 20px;
   width: 24vw;
   height: 28vh;
   // border: 0.1px solid #495e70;
-  background: url("~@/assets/safetyIndex/homescreen03.png") no-repeat;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
   background-size: 100% 100%;
   /* 盒子标题 */
   .title {
@@ -211,8 +211,9 @@ export default {
     }
     .title_text {
       width: 4vw;
-      height: 2.7vh;
+      height: 3.2vh;
-      line-height: 2.7vh;
+      line-height: 3.2vh;
+      text-align: right;
     }
   }
   .company_num_box_body {
@@ -224,13 +225,13 @@ export default {
     .company_num_box_body_item {
       width: 6vw;
       height: 8vh;
-      background: url("~@/assets/safetyIndex/back002.png") no-repeat;
-      background-size: 100% 100%;
       .num_green {
         width: 6vw;
         height: 5vh;
         line-height: 5vh;
-        color: #32d9ae;
+        background: linear-gradient(#fff, #00ffd4);
+        background-clip: text;
+        color: transparent;
         font-size: 46px;
         font-weight: 700;
         text-align: center;
@@ -239,7 +240,9 @@ export default {
         width: 6vw;
         height: 5vh;
         line-height: 5vh;
-        color: #ff6600;
+        background: linear-gradient(#fff, #fef699);
+        background-clip: text;
+        color: transparent;
         font-size: 46px;
         font-weight: 700;
         text-align: center;
@@ -248,7 +251,9 @@ export default {
         width: 6vw;
         height: 5vh;
         line-height: 5vh;
-        color: #e11e1e;
+        background: linear-gradient(#fff, #ff4b4b);
+        background-clip: text;
+        color: transparent;
         font-size: 46px;
         font-weight: 700;
         text-align: center;
@@ -257,11 +262,23 @@ export default {
         font-size: 14px;
         width: 6vw;
         height: 3vh;
-        line-height: 3vh;
+        // line-height: 3vh;
-        color: #d9e7ff;
+        color: #fff;
         text-align: center;
       }
     }
+    .green {
+      background: url("~@/assets/safetyIndex/companyNum01.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .orange {
+      background: url("~@/assets/safetyIndex/companyNum02.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .red {
+      background: url("~@/assets/safetyIndex/companyNum03.png") no-repeat;
+      background-size: 100% 100%;
+    }
   }
   .company_danger {
     margin-top: 1vh;

src/views/compositeIndex/components/companyService.vue

@@ -0,0 +1,407 @@
+<!-- 惠企服务 -->
+<template>
+  <div class="company_service_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">惠企服务</div>
+    </div>
+    <!-- 服务类别 -->
+    <div class="service_type">
+      <div class="month_service">
+        <div class="month_service_text">当月服务</div>
+        <div class="month_service_value">69</div>
+      </div>
+      <div class="season_service">
+        <div class="season_service_text">季度服务</div>
+        <div class="season_service_value">387</div>
+      </div>
+      <div class="year_service">
+        <div class="year_service_text">年度服务</div>
+        <div class="year_service_value">1976</div>
+      </div>
+    </div>
+    <!-- 服务echarts表 -->
+    <div class="service_echarts">
+      <div :id="left_id" class="left_chart"></div>
+      <div :id="right_id" class="right_chart"></div>
+    </div>
+    <div class="chart_num">
+      <div class="left_chart_num">
+        <div class="chart_num_text">惠企服务总量</div>
+        <div class="chart_num_value">850</div>
+      </div>
+      <div class="right_chart_num">
+        <div class="chart_num_text">请求受理总量</div>
+        <div class="chart_num_value">997</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import HighCharts from "highcharts";
+export default {
+  name: "CompanyService",
+  data() {
+    return {
+      left_id: "left_chart",
+      right_id: "right_chart",
+      option: {
+        chart: {
+          type: "pie", //饼图
+          backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
+          options3d: {
+            enabled: true, //使用3d功能
+            alpha: 45, //延y轴向内的倾斜角度
+          },
+        },
+        title: {
+          text: "", //图表的标题文字 这个得加上，不然头部会默认有字
+        },
+        subtitle: {
+          text: "", //副标题文字
+        },
+        tooltip: {
+          formatter: function () {
+            return (
+              this.point.name +
+              '<br/><span style="color:' +
+              this.color +
+              '">\u25CF</span>占比：<b>' +
+              this.percentage.toFixed(2) +
+              "%</b>"
+            );
+          },
+          style: {
+            color: "#000",
+            fontSize: 10,
+          },
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        // 更改图例文字颜色
+        legend: {
+          itemStyle: { color: "#cfcfcf" },
+        },
+        plotOptions: {
+          pie: {
+            borderColor: "#000",
+            borderWidth: 1,
+            allowPointSelect: true, //每个扇块能否选中
+            cursor: "pointer", //鼠标指针
+            colors: ["#66C3FF", "#4D74FF", "#ECDE3D", "#37FDC7","#6633f0","#E04234"],
+            depth: 35, //饼图的厚度
+            showInLegend: false, //显示图例
+            // innerSize: 100,
+            dataLabels: {
+              enabled: false, //是否显示饼图的线形tip
+              format: "{point.name}",
+              style: {
+                //样式配置
+                textOutline: "none", //去掉文字白边
+                color: "#dfe9f9",
+                fontSize: 11,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [],
+          },
+        ],
+      },
+      right_option: {
+        chart: {
+          type: "pie", //饼图
+          backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
+          options3d: {
+            enabled: true, //使用3d功能
+            alpha: 45, //延y轴向内的倾斜角度
+          },
+        },
+        title: {
+          text: "", //图表的标题文字 这个得加上，不然头部会默认有字
+        },
+        subtitle: {
+          text: "", //副标题文字
+        },
+        tooltip: {
+          formatter: function () {
+            return (
+              this.point.name +
+              '<br/><span style="color:' +
+              this.color +
+              '">\u25CF</span>占比：<b>' +
+              this.percentage.toFixed(2) +
+              "%</b>"
+            );
+          },
+          style: {
+            color: "#000",
+            fontSize: 10,
+          },
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        // 更改图例文字颜色
+        legend: {
+          itemStyle: { color: "#cfcfcf" },
+        },
+        plotOptions: {
+          pie: {
+            borderColor: "#000",
+            borderWidth: 1,
+            allowPointSelect: true, //每个扇块能否选中
+            cursor: "pointer", //鼠标指针
+            colors: ["#66C3FF", "#4D74FF", "#ECDE3D"],
+            depth: 35, //饼图的厚度
+            showInLegend: false, //显示图例
+            // innerSize: 100,
+            dataLabels: {
+              enabled: false, //是否显示饼图的线形tip
+              format: "{point.name}",
+              style: {
+                //样式配置
+                textOutline: "none", //去掉文字白边
+                color: "#dfe9f9",
+                fontSize: 11,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.init_left_chart()
+    this.init_right_chart()
+  },
+  methods: {
+    init_left_chart() {
+      let data = [
+        ["人员背景审核", 331],
+        ["重点人员审核", 221],
+        ["警情通报", 120],
+        ["道路拥堵提醒", 98],
+        ["网络反诈提醒", 60],
+        ["企业纠纷提醒", 20],
+      ];
+      this.option.series[0].data = data;
+      HighCharts.chart(this.left_id, this.option);
+    },
+    init_right_chart() {
+      let data = [
+        ["业务咨询", 532],
+        ["法律服务", 231],
+        ["证照办理", 234],
+      ];
+      this.right_option.series[0].data = data;
+      HighCharts.chart(this.right_id, this.right_option);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.company_service_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 28vh;
+  // border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+  .service_type {
+    width: 22vw;
+    height: 6vh;
+    margin-top: 1vh;
+    margin-left: 1vw;
+    display: flex;
+    justify-content: space-around;
+    .month_service {
+      width: 6vw;
+      height: 6.5vh;
+      background: url("~@/assets/safetyIndex/service001.png") no-repeat;
+      background-size: 100% 100%;
+      .month_service_text {
+        width: 6vw;
+        height: 3vh;
+        color: #37fdc7;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 3vh;
+      }
+      .month_service_value {
+        text-align: center;
+        color: #37fdc7;
+        width: 6vw;
+        height: 3.5vh;
+        line-height: 3.5vh;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+    .season_service {
+      width: 6vw;
+      height: 6.5vh;
+      background: url("~@/assets/safetyIndex/service002.png") no-repeat;
+      background-size: 100% 100%;
+      .season_service_text {
+        width: 6vw;
+        height: 3vh;
+        color: #ecde3d;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 3vh;
+      }
+      .season_service_value {
+        text-align: center;
+        color: #ecde3d;
+        width: 6vw;
+        height: 3.5vh;
+        line-height: 3.5vh;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+    .year_service {
+      width: 6vw;
+      height: 6.5vh;
+      background: url("~@/assets/safetyIndex/service001.png") no-repeat;
+      background-size: 100% 100%;
+      .year_service_text {
+        width: 6vw;
+        height: 3vh;
+        color: #37fdc7;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+        line-height: 3vh;
+      }
+      .year_service_value {
+        text-align: center;
+        color: #37fdc7;
+        width: 6vw;
+        height: 3.5vh;
+        line-height: 3.5vh;
+        font-size: 28px;
+        font-weight: 600;
+      }
+    }
+  }
+  .service_echarts {
+    width: 24vw;
+    height: 13vh;
+    display: flex;
+    .left_chart {
+      width: 12vw;
+      height: 13vh;
+    }
+    .right_chart {
+      width: 12vw;
+      height: 13vh;
+    }
+  }
+  .chart_num {
+    margin-top: 0.5vh;
+    width: 24vw;
+    height: 3vh;
+    display: flex;
+    justify-content: space-around;
+    .left_chart_num {
+      width: 10vw;
+      height: 3vh;
+      background: url("~@/assets/safetyIndex/service003.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      .chart_num_text {
+        width: 5vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 14px;
+      }
+      .chart_num_value {
+        width: 3vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+    .right_chart_num {
+      width: 10vw;
+      height: 3vh;
+      background: url("~@/assets/safetyIndex/service003.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      .chart_num_text {
+        width: 5vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 14px;
+      }
+      .chart_num_value {
+        width: 3vw;
+        height: 3vh;
+        text-align: center;
+        line-height: 3vh;
+        color: #d9e7ff;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/views/compositeIndex/components/employee.vue

@@ -0,0 +1,485 @@
+<!-- 企业员工 -->
+<template>
+  <div class="employee_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">企业员工</div>
+    </div>
+    <!-- 员工总数 -->
+    <div class="employee_num">
+      <div class="employee_num_text">员工总数</div>
+      <div class="employee_num_value">{{ this.person_sum }}</div>
+    </div>
+    <div class="chart_body">
+      <!-- 饼图 -->
+      <div class="chart_container">
+        <div :id="id" class="chart"></div>
+      </div>
+      <!-- 员工数据展示 -->
+      <div class="chart_data_body">
+        <div class="data_icon">
+          <div class="data_icon_item">
+            <div class="icon_color_blue"></div>
+          </div>
+          <div class="data_icon_item">
+            <div class="icon_color_purple"></div>
+          </div>
+          <div class="data_icon_item">
+            <div class="icon_color_yellow"></div>
+          </div>
+          <div class="data_icon_item">
+            <div class="icon_color_green"></div>
+          </div>
+        </div>
+        <!-- 员工类型 -->
+        <div class="person_type">
+          <div class="person_type_item">普通岗位</div>
+          <div class="person_type_item">重点岗位</div>
+          <div class="person_type_item">专家岗位</div>
+          <div class="person_type_item">重点人员</div>
+        </div>
+        <!-- 员工类型数量 -->
+        <div class="person_type_num">
+          <div class="person_type_num_item">
+            {{ this.person_one }}
+          </div>
+          <div class="person_type_num_item">
+            {{ this.person_two }}
+          </div>
+          <div class="person_type_num_item">
+            {{ this.person_three }}
+          </div>
+          <div class="person_type_num_item">
+            {{ this.person_four }}
+          </div>
+        </div>
+        <!-- 员工占比 -->
+        <div class="person_proportion">
+          <div class="person_proportion_item">
+            {{ this.proportion_list[0] }}
+          </div>
+          <div class="person_proportion_item">
+            {{ this.proportion_list[1] }}
+          </div>
+          <div class="person_proportion_item">
+            {{ this.proportion_list[2] }}
+          </div>
+          <div class="person_proportion_item">
+            {{ this.proportion_list[3] }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 访客和流动人员 -->
+    <div class="visitor_person_body">
+      <div class="visitor_body">
+        <div class="visitor_text">访客</div>
+        <div class="visitor_value">{{ this.visitor_num }}</div>
+      </div>
+      <div class="person_body">
+        <div class="person_text">流动人员</div>
+        <div class="person_value">{{ this.flow_person_num }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import HighCharts from "highcharts";
+import {
+  staffStatistics,
+  visitStatistics,
+  flowStatistics,
+} from "@/api/safetyIndex";
+export default {
+  name: "Employee",
+  data() {
+    return {
+      person_sum: "", // 员工总数
+      person_list: [], // 员工类型数量
+      next_person_list: [], // 员工类型数量数组，另存，以免影响3d环图
+      person_one: "", // 普通岗位人数
+      person_two: "", // 重点岗位人数
+      person_three: "", // 专家岗位人数
+      person_four: "", // 重点人员人数
+      option_data: [],
+      proportion_list: [],
+      visitor_num: 0,
+      flow_person_num: 0,
+      statusChart: null,
+      id: "DispatchProportion",
+      option: {
+        chart: {
+          type: "pie", //饼图
+          backgroundColor: "rgba(0, 0, 0, 0)", //去掉白色背景
+          options3d: {
+            enabled: true, //使用3d功能
+            alpha: 45, //延y轴向内的倾斜角度
+          },
+        },
+        title: {
+          text: "", //图表的标题文字 这个得加上，不然头部会默认有字
+        },
+        subtitle: {
+          text: "", //副标题文字
+        },
+        tooltip: {
+          formatter: function () {
+            return (
+              this.point.name +
+              '<br/><span style="color:' +
+              this.color +
+              '">\u25CF</span>占比：<b>' +
+              this.percentage.toFixed(2) +
+              "%</b>"
+            );
+          },
+          style: {
+            color: "#000",
+            fontSize: 10,
+          },
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        // 更改图例文字颜色
+        legend: {
+          itemStyle: { color: "#cfcfcf" },
+        },
+        plotOptions: {
+          pie: {
+            borderColor: "#000",
+            borderWidth: 1,
+            allowPointSelect: true, //每个扇块能否选中
+            cursor: "pointer", //鼠标指针
+            colors: ["#66C3FF", "#4D74FF", "#ECDE3D", "#37FDC7"],
+            depth: 35, //饼图的厚度
+            showInLegend: false, //显示图例
+            innerSize: 60,
+            dataLabels: {
+              enabled: false, //是否显示饼图的线形tip
+              format: "{point.name}",
+              style: {
+                //样式配置
+                textOutline: "none", //去掉文字白边
+                color: "#dfe9f9",
+                fontSize: 11,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.get_data();
+    this.get_person_data();
+    this.get_visitor_data();
+    this.get_flow_person_data()
+  },
+  // mounted() {
+
+  //根据窗口变化自动调节图表大小
+  // const that = this;
+  // window.onresize = function () {
+  //   that.changeSize();
+  // };
+  // },
+  mounted() {
+    // 你们只需要把这个数据更换成你们的就好啦
+  },
+  methods: {
+    get_data() {
+      staffStatistics().then((res) => {
+        console.log("resssss", res);
+        this.person_list = res.data.filter((item) => {
+          return item.type != "全部";
+        });
+        this.option_data = this.person_list.map((item) => {
+          return Object.assign({}, { value: item.number, name: item.type });
+        });
+        console.log("this.optionData", this.option_data);
+        this.person_sum = res.data.filter((item) => {
+          return item.type == "全部";
+        })[0].number;
+        // 求员工类型人员数量占比
+        for (let i = 0; i < this.person_list.length; i++) {
+          this.proportion_list.push(
+            Math.round(
+              (Number(this.person_list[i].number) / Number(this.person_sum)) *
+                10000
+            ) /
+              100 +
+              "%"
+          );
+        }
+        console.log("this.optionData123", this.option_data);
+        let data = [
+          ["普通岗位", Number(this.option_data[0].value)],
+          ["重点岗位", Number(this.option_data[1].value)],
+          ["专家岗位", Number(this.option_data[2].value)],
+          ["重点人员", Number(this.option_data[3].value)],
+        ];
+        this.option.series[0].data = data;
+        HighCharts.chart(this.id, this.option);
+      });
+    },
+    // 员工数量重新请求渲染 --> 原请求数据直接调用会和3d环图起冲突
+    get_person_data() {
+      staffStatistics().then((res) => {
+        let list = res.data.filter((item) => {
+          return item.type != "全部";
+        });
+        this.person_one = list[0].number;
+        this.person_two = list[1].number;
+        this.person_three = list[2].number;
+        this.person_four = list[3].number;
+      });
+    },
+    // 请求访客数量
+    get_visitor_data() {
+      visitStatistics().then((res) => {
+        this.visitor_num = res.data;
+      });
+    },
+    // 请求流动人员数量
+    get_flow_person_data() {
+      flowStatistics().then((res)=>{
+        this.flow_person_num = res.data
+      })
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.employee_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 32vh;
+  //   border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.5vh;
+      line-height: 3.5vh;
+      text-align: right;
+    }
+  }
+  .employee_num {
+    margin-top: 1vh;
+    margin-left: 2vw;
+    width: 20vw;
+    height: 5vh;
+    background: url("~@/assets/safetyIndex/7691.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    cursor: pointer;
+    .employee_num_text {
+      width: 10vw;
+      height: 5vh;
+      line-height: 5vh;
+      color: #37fdc7;
+      font-size: 20px;
+      font-weight: 500;
+      text-align: center;
+      // border: 0.1px solid #495e70;
+    }
+    .employee_num_value {
+      width: 10vw;
+      height: 5vh;
+      line-height: 5vh;
+      background: linear-gradient(#fff, #00ffd4);
+      background-clip: text;
+      color: transparent;
+      font-size: 36px;
+      font-weight: 600;
+      text-align: center;
+      // border: 0.1px solid #495e70;
+    }
+  }
+  .chart_body {
+    width: 24vw;
+    height: 16vh;
+    display: flex;
+    .chart_container {
+      width: 12vw;
+      height: 16vh;
+      // border: 0.1px solid #495e70;
+      .chart {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+    }
+    .chart_data_body {
+      width: 12vw;
+      height: 16vh;
+      // border: 0.1px solid #495e70;
+      display: flex;
+      .data_icon {
+        width: 1vw;
+        height: 16vh;
+        .data_icon_item {
+          width: 1vw;
+          height: 4vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .icon_color_blue {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #66c3ff;
+          }
+          .icon_color_purple {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #4d74ff;
+          }
+          .icon_color_yellow {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #ecde3d;
+          }
+          .icon_color_green {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #37fdc7;
+          }
+        }
+      }
+      .person_type {
+        width: 4vw;
+        height: 16vh;
+        .person_type_item {
+          width: 4vw;
+          height: 4vh;
+          color: #d9e7ff;
+          text-align: center;
+          line-height: 4vh;
+        }
+      }
+      .person_type_num {
+        width: 3vw;
+        height: 16vh;
+        .person_type_num_item {
+          width: 3vw;
+          height: 4vh;
+          color: #d9e7ff;
+          text-align: center;
+          line-height: 4vh;
+        }
+      }
+      .person_proportion {
+        width: 3vw;
+        height: 16vh;
+        // border: 0.1px solid #495e70;
+        .person_proportion_item {
+          width: 3vw;
+          height: 4vh;
+          color: #d9e7ff;
+          text-align: center;
+          line-height: 4vh;
+        }
+      }
+    }
+  }
+  .visitor_person_body {
+    width: 22vw;
+    height: 5vh;
+    // border: 0.1px solid #495e70;
+    margin-left: 1vw;
+    display: flex;
+    justify-content: space-around;
+    .visitor_body {
+      width: 10vw;
+      height: 5vh;
+      background: url("~@/assets/safetyIndex/employee01.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      .visitor_text {
+        width: 4vw;
+        height: 5vh;
+        text-align: right;
+        color: #d9e7ff;
+        line-height: 5vh;
+        font-size: 14px;
+        letter-spacing: 2px;
+        font-weight: 500;
+      }
+      .visitor_value {
+        width: 3vw;
+        height: 5vh;
+        color: #d9e7ff;
+        line-height: 5vh;
+        text-align: center;
+        font-weight: 800;
+        font-size: 18px;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+      }
+    }
+    .person_body {
+      width: 10vw;
+      height: 5vh;
+      background: url("~@/assets/safetyIndex/employee02.png") no-repeat;
+      background-size: 100% 100%;
+      // border: 0.1px solid #495e70;
+      display: flex;
+      justify-content: center;
+      .person_text {
+        width: 5.5vw;
+        height: 5vh;
+        text-align: right;
+        color: #d9e7ff;
+        line-height: 5vh;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .person_value {
+        width: 3vw;
+        height: 5vh;
+        color: #d9e7ff;
+        line-height: 5vh;
+        text-align: center;
+        font-weight: 800;
+        font-size: 18px;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+      }
+    }
+  }
+}
+</style>

src/views/compositeIndex/components/endanger.vue

@@ -0,0 +1,196 @@
+<!-- 危化物品 -->
+<template>
+  <div class="endanger_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">危化物品</div>
+    </div>
+    <!-- 危化物品表 -->
+    <div class="chart_box">
+      <div :id="id" style="height: 23vh"></div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+import HighCharts from "highcharts";
+import { indexGoods } from "@/api/safetyIndex";
+export default {
+  name: "Endanger",
+  data() {
+    return {
+      id: "danger_chart",
+      option: {
+        chart: {
+          backgroundColor: "rgba(0,0,0,0)",
+          type: "column",
+          options3d: {
+            enabled: true,
+            alpha: 16, //俯瞰角度
+            beta: 10, //旋转角度
+            depth: 0, //景深
+          },
+        },
+        title: {
+          text: "",
+          style: {
+            color: "#8fe3fd",
+            fontSize: "18px",
+          },
+        },
+        subtitle: {
+          text: "",
+        },
+        // 去掉底部水印的文字
+        credits: {
+          enabled: false,
+        },
+        exporting: {
+          enabled: false, //隐藏导出按钮
+        },
+        plotOptions: {
+          column: {
+            borderWidth: 0,
+            //borderColor: "",//去边框
+            //shadow: false,		//去阴影
+            dataLabels: {
+              //柱状图数据标签
+              enabled: false, //是否显示数据标签
+              color: "#8fe3fd", //数据标签字体颜色
+              style: {
+                fontSize: "8px",
+              },
+              formatter: function () {
+                //格式化输出显示
+                return this.y;
+              },
+            },
+          },
+        },
+        xAxis: {
+          gridLineWidth: 0,
+          categories: ["放射源", "易制毒", "易制爆", "民爆"],
+          labels: {
+            style: {
+              color: "#8fe3fd",
+              fontSize: "12px",
+            },
+          },
+        },
+        yAxis: {
+          min: 0,
+          gridLineWidth: "0px",
+          title: {
+            text: "",
+            style: {
+              color: "#8fe3fd",
+              fontSize: "12px",
+            },
+          },
+          labels: {
+            style: {
+              color: "#8fe3fd",
+              fontSize: "12px",
+            },
+          },
+        },
+        series: [
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">存储</b>',
+            color: "#6633f0",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">生产</b>',
+            color: "#3ccee5",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">购买</b>',
+            color: "#34E0B2",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">销售</b>',
+            color: "#E0D234",
+            data: [],
+          },
+          {
+            name: '<b style="color:#8fe3fd; font-size: 12px">使用</b>',
+            color: "#E04234",
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      indexGoods().then((res) => {
+        let chart_list = res.data;
+        console.log("chart_list", chart_list);
+        let data_one = [Number(chart_list[0].storage), Number(chart_list[1].storage), Number(chart_list[2].storage), Number(chart_list[3].storage)];
+        let data_two = [Number(chart_list[0].produce), Number(chart_list[1].produce), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        let data_three = [Number(chart_list[0].purchase), Number(chart_list[1].purchase), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        let data_four = [Number(chart_list[0].sale), Number(chart_list[1].sale), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        let data_five = [Number(chart_list[0].use), Number(chart_list[1].use), Number(chart_list[2].produce), Number(chart_list[3].produce)];
+        this.option.series[0].data = data_one;
+        this.option.series[1].data = data_two;
+        this.option.series[2].data = data_three;
+        this.option.series[3].data = data_four;
+        this.option.series[4].data = data_five;
+        HighCharts.chart(this.id, this.option);
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.endanger_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 28vh;
+  // border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+  .chart_box {
+    margin-top: 1vh;
+    margin-left: 1vw;
+    width: 22vw;
+    height: 22vh;
+  }
+}
+</style>

src/views/compositeIndex/components/notification.vue

@@ -0,0 +1,183 @@
+<!-- 警情通报 -->
+<template>
+  <div class="notification_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+      </div>
+      <div class="title_text">警情通报</div>
+    </div>
+    <div class="carousel_box">
+      <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
+        <li v-for="(item, index) in this.notification_list" :key="index">
+          <!-- {{ item.caseAddress }} -->
+          <div class="icon_box">
+            <div class="icon_item"></div>
+          </div>
+          <div class="message_box">
+            <div class="top_message">
+              {{ item.caseName }}
+            </div>
+            <div class="bottom_message">
+              <div class="bottom_message_company">企业名称：{{ item.caseAddress }}</div>
+              <div class="bottom_message_time">时间：{{ item.registerTime }}</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import { caseList } from "@/api/safetyIndex";
+export default {
+  name: "Notification",
+  data() {
+    return {
+      animateUp: false,
+      notification_list: [],
+      timer: null,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  mounted() {
+    this.timer = setInterval(this.scrollAnimate, 1500);
+  },
+  methods: {
+    getList() {
+      caseList().then((res) => {
+        this.notification_list = res.data;
+        console.log("this.notification_list", this.notification_list);
+      });
+    },
+    // 滚动
+    scrollAnimate() {
+      this.animateUp = true;
+      setTimeout(() => {
+        this.notification_list.push(this.notification_list[0]);
+        this.notification_list.shift();
+        this.animateUp = false;
+      }, 500);
+    },
+    destroyed() {
+      clearInterval(this.timer);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.notification_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 32vh;
+  // border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.5vh;
+      line-height: 3.5vh;
+      text-align: right;
+    }
+  }
+  .carousel_box {
+    width: 22vw;
+    height: 25vh;
+    margin-top: 2vh;
+    margin-left: 1vw;
+    overflow: hidden;
+    .marquee-list {
+      padding: 10px;
+      height: 25vh;
+      margin: 0px;
+      li {
+        width: 100%;
+        height: 7vh;
+        margin-bottom: 1vh;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 40px;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        font-weight: 400;
+        display: flex;
+        .icon_box {
+          width: 3vw;
+          height: 7vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .icon_item {
+            width: 2.5vw;
+            height: 5vh;
+            background: url("~@/assets/safetyIndex/red02.png") no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .message_box {
+          width: 18vw;
+          height: 7vh;
+          .top_message {
+            width: 18vw;
+            height: 3.5vh;
+            line-height: 3.5vh;
+            color: #d9e7ff;
+            text-align: left;
+            font-size: 16px;
+            font-weight: 600;
+          }
+          .bottom_message {
+            width: 18vw;
+            height: 3.5vh;
+            display: flex;
+            .bottom_message_company {
+              width: 11vw;
+              height: 3.5vh;
+              text-align: left;
+              line-height: 3.5vh;
+              color: #fff;
+              font-size: 14px;
+            }
+            .bottom_message_time {
+              width: 7vw;
+              height: 3.5vh;
+              color: #fff;
+              font-size: 14px;
+              line-height: 3.5vh;
+            }
+          }
+        }
+      }
+    }
+    .animate-up {
+      transition: all 0.5s ease-in-out;
+      transform: translateY(-7vh);
+    }
+  }
+}
+</style>

src/views/compositeIndex/index.vue

@@ -3,23 +3,46 @@
   <div>
     <!-- 最底层地图框 -->
     <div class="map_box">
-      <!-- 企业总量 -->
+      <div class="left_box">
-      <CompanyNum ref="companyNum"></CompanyNum>
+        <!-- 园区企业 -->
+        <CompanyNum ref="companyNum"></CompanyNum>
+        <!-- 企业员工 -->
+        <Employee ref="employee"></Employee>
+        <!-- 园区车辆 -->
+        <CompanyCar ref="companyCar"></CompanyCar>
+      </div>
+      <div class="right_box">
+        <!-- 惠企服务 -->
+        <CompanyService ref="companyService"></CompanyService>
+        <!-- 警情通报 -->
+        <Notification ref="notification"></Notification>
+        <!-- 危化物品 -->
+        <Endanger ref="endanger"></Endanger>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import CompanyNum from "./components/companyNum";
+import Employee from "./components/employee";
+import CompanyCar from "./components/companyCar";
+import CompanyService from "./components/companyService";
+import Notification from "./components/notification";
+import Endanger from "./components/endanger"
 export default {
   name: "CompositeIndex",
   components: {
     CompanyNum,
+    Employee,
+    CompanyCar,
+    CompanyService,
+    Notification,
+    Endanger
   },
   data() {
     return {};
   },
-  methods: {
+  methods: {},
-  },
 };
 </script>
 <style lang="less" scoped>
@@ -27,6 +50,17 @@ export default {
   width: 100%;
   height: calc(100% - 80px);
   box-sizing: border-box;
+  position: relative;
   //   border: 0.1px solid #495e70;
+  .left_box {
+    position: absolute;
+    width: 24vw;
+    left: 20px;
+  }
+  .right_box {
+    position: absolute;
+    width: 24vw;
+    right: 20px;
+  }
 }
 </style>

src/views/enterpriseArchives/componets/card.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="cardBox"> 
+        <div class="cardContent">
+            <!-- 卡片展示 -->
+            <el-row :gutter="20">
+                <el-col :span="6" class="cardCol" v-for="(i, index) in cardListArr" :key="index">
+                    <div class="cardList">
+                        <div class="cardListHead">
+                            <span>{{ i.title }}</span>
+                        </div>
+                        <div class="cardListBody">
+                            <div class="bodySign">
+                                <!-- 中间标签 -->
+                                <div class="sign">
+                                    <span class="signGreen">危化企业</span>
+                                    <span class="signRed">民爆</span>
+                                    <span class="signBlue">易制毒</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="cardListFoot">
+                            <el-descriptions class="margin-top" :column="2">
+                                <el-descriptions-item label="企业员工">{{ i.num }}</el-descriptions-item>
+                                <el-descriptions-item label="是否有过处罚">
+                                    <template slot-scope="scope">
+                                        <span v-if="scope.row.isHandle == 1">是</span>
+                                        <span v-else>否</span>
+                                    </template>
+                                </el-descriptions-item>
+                                <el-descriptions-item label="企业安全责任人电话">{{ i.phone }}</el-descriptions-item>
+                            </el-descriptions>
+                            <div class="address">
+                                <img src="@/assets/enterpriseArchives/address.png" alt="">
+                                <span>{{ i.address }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        cardList:{
+            type:Array,
+            default:()=> []
+        }
+    },
+    watch:{
+        cardList:{
+            handler(val){
+                this.cardListArr =val
+            },
+            immediate:true     
+        }
+    },
+    data() {
+        return {
+          cardListArr:[]  
+        }
+    },
+    created() {
+        
+
+    },
+    mounted(){
+        
+    },
+    methods: {
+       
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.cardBox{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    .cardContent {
+        width: 80%;
+    }
+    .cardCol{
+        display: flex;
+        justify-content: center;
+        margin-bottom: 2vh;
+    }
+    .cardList {
+        width: 382px;
+        cursor: pointer;
+        height: 291px;
+        background: url("~@/assets/enterpriseArchives/cardBg.png") no-repeat;
+        .cardListHead {
+            height: 39px;
+            z-index: 99;
+            text-align: center;
+            position: absolute;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAAAnCAYAAAAM2fNKAAAAAXNSR0IArs4c6QAADQhJREFUeF7tXV2sXUUV/mbPPrcFWkqgfwIxaMJfq4ZIApoG5EJEWtKkxIQYCf69tA8mxmdMGjT6YiIPYjC+SnwgQVGQYlOVyINUAw9AKfEBApFQKKGUUnrP/pkxa/asfdeee869vaWVe/ZZJ9l3z55Zs2bWNzPfXnv27DsGye8R7+2GQ4fO27Bu3czWyy/3AAwACyA/Bdi3gbwC7FFgcKIo8qo0+UlT2rnK5IVBXtW1PVnXg8LAztUmL5zLC1fnpTF5ZYwtKjcojbEVxRuTl97lpbG2dI7S88q7vPA+L7zJawtbepLxeUW6PaX7vMgyWzufl1QXA9JjvfMZqLZwjUWOLijsAR/jgoALUfFPcx1kQ6SQraMqys96Y/4gzz/SF/OHYmKZra4o60bFx3qNyh+QZ91UR66zyEM6M7aV6y5s4TJT+0fpakCLtlBY2i/wCzqpLN/0jKCbsaY6Z0BmAJsBxjY9x9C1BbIMsKa5pjDLZTbKyLwkR/mjbNAjrymd9FFeRN1UZiybdFN6qAD9+CzrG/sGtWftgDraQWGyq4521hELXzdyJE/pnI+woIPTQn7KE+NCGumSejxAWHK+Nn893zVDvckGtoX7XMSk7YMyndKoKSOWJEOYtLpCRIMZ6yZ5WRaH23wR3yZTpATR1tw9qE0XlBfrE8pK8rb6qK4irWnQWEdZVyHDZY3ChsuiPsBlhL7AZppmPI3UEW0MabHsMBbjdYBN4hnDrX55LeQ69s3bNuNdMXCuWOXccAZuOKjccBXq4aCuy1Xez61yvpjx9XDGY7gazXnGV8Xqyg9XZyjWeD88P3PD1c4O1+a+cB99VJ86cqT8wLkTVxw79v7u3bvLecNbNGTPgcftu65Hju8D/g6YbHMYVJLjuhdN5qXSOzIdYVmfhIy7SfPlLJJ/RJazG8WNeHa1npG2QLgiZ6jaCqqfNOqMmmxMpjPSdUYIz2caC+sZ4n2G2T6mFWcpOztHZ0ndJ6aG/dlPokOlRvONjeNP4zod7uRAOP8WjHkKdfkg/vLE85EQWgNlt2vCO+56Cja7HeTV6E8RUAQUAUVg8hAgJ712+/HkH+6IlQ+kP/+Mdv31OTZ9+k3Ab5g867TGioAioAgoAgsRMEfx9huX4bnnKpoPmPfw79x1EB43KGSKgCKgCCgCPULA4F/482M3Bg9/79692f3/fmEHMvN4eImkP0VAEVAEFIH+IEAvoF2585Hv3Luv8fC37/o7DG7pj4VqiSKgCCgCikCLgMfT2PfYbEP4O7/u9SWtdg5FQBFQBHqKAL3EffxRYzZv377hyOCCd1DRnL7+FAFFQBFQBHqHQJ5j48lis7nw5q9e+cG6C/+jHn7vmlgNUgQUAUWgQcBarP3o1NVK+NohFAFFQBHoOwJM+Gu3zV594uKLX1EPv+8trvYpAorA1CJAhH/ixLVm7ZdvuebE+ksOK+FPbVdQwxUBRaDvCFiLNcePb1HC73tDq32KgCKgCATCP7rFrLnxpi0fbtx4SD187ROKgCKgCPQUASL89977nFnzpZuv/XDDhpeV8Hva0GqWIqAIKAJE+O+/v9WsuemmLR9epB6+9ghFQBFQBHqLQOvh65ROb9tYDVMEFAFFICDQEv4yPfx0z43F4eQNBlhKXMfgAn20kZJJ9lNZrJCl5On/+tNnxfpTBBQBRWAcAvSPI4l45C5fy0Ur3U/lHGxyc1r8m9Juh/C3bdtabLz8pdx75NYitxmstbAZhS2yLIPNM9gsR5ZnyEJcPHILk1FcDmNtc+S0XVkThs0bso1pPrPweXPtYjydvc3D4WwW4p3NUecZXDZAnVu4zKLOc9TxXOU2hMt8gNpmKCl/+I9w1Ghxu7mwtSGAo28DD/wCOHlyuc2n8oqAIjANCJQlcOtXgJ3bxZaIYnvEsNVhvG63huStI5MtGFmuzSPk2q0l57dBHAznkA+HmJkbIi+asJ2bgy1L5MNTMGWBbFggKwuY4RCG6kpHUQBVCV+U8FUJV1ZwVYm6qsO5qirUVYWyrkO4hMF5x4593qy+4YbPlOsv/Y0FSpMZGGOMpT8mQ2YMKC6L+5TSNe3tmAW5Zv9QCvM+pkT+YU8VTg9pzd6kPohn8GHPUTKYiD9eZwYuluFBBE/7RtogS4fLGjkifkey8dojQ53RjSFuZxs6p/gXz87XmJ29DYN8FX79EPDaa2Ify2noyWqjIqAILIoAzQDcczfwxeuAFw89j9f/e3SBl9/Z85e0Ja47cVfwqlOXPvrjC+Ln98e1roKta5iqjOfmmhbRmLpC5mqYkvY5djAVxVfIwn7LDq528L6CqT18XcP7Gs434bBdsnO+9rVvtkv2gwveeXc31Wht3Bl1EHd65trIW9zk9prNF63CH//xJC5ccy1+/yjw9NPAgEzVnyKgCEw1AnkO7PkecNmlwOGXf4hvfPNhAH0gB7r98EEeMO1XS5uZh1sPEX4et7DnM5P9OZiF+r90Md60l+2YwzMHH8SmTXfj4LPAbx8GqLH1pwgoAtOHALm8l1wM7PkuOX8OB/62A/fd95Jw3UfNgk8STinh079CJuKviBAviJ49k33q4a+ELd2XC/b8Xr3zz18F/vTkt3HVNT/HG68DD/4K+i+hlwuryisCE45A7YAtVzXTOEVxBD/56W3Yt+8D4RGTgcx5k8p9KeEHsidPn4jxfDGVQ8tZJt275x6Zkj7dyDwe+OV1uGX2CRRFFkj/3Xc/3pv5Ce//Wn1FYGoQoJedt882x3vHn8XsrXdF7iNClCQpSX9S4ZH20JROmNohUlwdp3PCq1JB+CPeTkyU7ZLw5Y0sw513rcP9e/+KmZlPhemdF17UpZsT1bRaWUVgmQjQW8x77wa+sBV4862HcMeOH0XuIyJkwufzpBO+fEKhMNvoiBRnBNHz+2hJlpP0WJO+c2B7+GbGxE/nGs/881GsX78N+/cDh19JpvC4Q40wP0Sl8eki3Jif5gvb3xgoSUbWvJNH1KPNvkTZneS0/GQl74KyFrGX67hkPeLrIWkTr1Roz9GfaGV4eVs8h3heviYe2ji+XVLAMumKCNYjKiFNZ7u5LaVNHcjiRUcuLvltuwHLSNmYmOpP9XQmENKZhFGv0BJM/LiVIOP8NQFCZ/XIYq/rEgxDc7Cecfm4PdMHbjEc+IMb2a+CWsrL40nmH/HRTbAhlU3L9MCuHcCmTcDhw7txz7ceE549e7+8vE+S/iQSf6eXRyTaGxol0tw9D592GC3z/rlSxDsUEyvFTy10JqKX5znsP7AXV3z2B7SmNXScQATiPCouleHrxWQ/th4mkNgv2zqI/knLtYKYeEIlOb6hhHCSn27+wWQaTB5w8kkwwaOTV+jhvKQoLq8FLdENBy3DjWe+zmwTHw4hMyovpS/IL/XJMkR8WP5rxcc0/PFdxIZsIVvJ8wtr2MgFiOEQx2nxTDZ24uroN3GeRL6jO8lL5QR9I8rhfHIdt1wHHrhWDNf2BjgirrMWXPhyLdHL9eU8dKKedt05x9O66jiiqJ2Y9FtdnC4oZJTcqHXqnXXuoh6j7GzXsiflMQ4jdWXAqVMl9u37Gn78M/Ls2OttpzqSVS2n4aWtFMpbsh6dAU0wsdcrb4vyLrGkxhUokPTelujZXrKZ7XbYs+dKlGYnjPftMv5MrOcnA9tLCrQLc7vr/jtALJE/qKABPw49TiBB+W0By4978JL5RMVTcZMU3KZL+8ZWLtYpfuwmTZDQME4tZ7AtQigE43Unmcg7xYZuEOI2ngpIXa3amEF6kUHFKOzHxaVtIMCU/YI+IKF+04mL5kn/UbZnB3fhj6WYdrrdAmASoNL+mcinWLTryMc5yyPabdFBH9spHSqhvWSfWsSOtkjqY9yP036TVmKMvjw7jgMHfodXXyWC5xUrpJWu6Qi3+57N4zOHd25eFCmnccY9G61ATl+qx7Xp0sMf5eUz8bPcUs+qk4aF1lcRmDYEmOR4LMs5eunVy+kcOZWzmKczaVgypwdMJn0KZxz4cmpHEjmFFyN9ObU1zoWetAbX+ioC04aAfIbhKQ326OVZhuXUB+HVy/E/as67T50jndph8pdTOjyvz087Mk+fsFBbFIFpQSCdg2fvXXr3FCeP9I1537BqPfy+Gcb2LPUClz19Jnr5JMBPP33FRu1SBPqOABM4T8/IufqU6Nm7l5j03sPvYwcYRfrSk+cpHhmnHn4fe4LaNG0ISBLnVTlyLp/DU0P20+LFStKX7y14vl569uk7jTTvtA0atVcRmEQE0ukZOY+frDvuzNX30quXDTgthDaK9AmHziI/8eXVtOAyiYNZ66wInA4C40g/9fxZV+/Jflo8/HE3uHFz/LLhlfhPZ2ipjCKwchBIx+844u/9fP2oJplGQhvn7fMNcCru9CtnfGpNFIFzhkC6PHNUQVM13qeR8KfxyeacjShVrAisUAT4o6vFqjdVZE9A/A8Y9zIClLo3hgAAAABJRU5ErkJggg==) no-repeat;
+            width: 382px;
+        }
+        .cardListHead span{
+            color: #FFFFFF;
+            display: inline-block;
+            margin-top: 2px;
+        }
+        .cardListBody{
+            width: 100%;
+            display: flex;
+            height: 200px;
+            justify-content: center;
+        }
+        .bodySign {
+            width: 95%;
+            background: url("~@/assets/enterpriseArchives/build.jpg") no-repeat;
+            background-size: cover;
+            position: relative;
+            .sign {
+                position: absolute;
+                bottom: 5px;
+                width: 60%;
+                color: #fff;
+                display: flex;
+                justify-content: space-around;
+                .signGreen{
+                    font-size: 14px;
+                    background: url("~@/assets/enterpriseArchives/signGreen.png") no-repeat;
+                }
+                .signRed{
+                    background: url("~@/assets/enterpriseArchives/signRed.png") no-repeat;
+                }.signBlue{
+                    background: url("~@/assets/enterpriseArchives/signBlue.png") no-repeat;
+                }
+            }
+        }
+        .cardListFoot{
+            color: #fff;
+            padding: 0 10px 0 10px;
+            margin-top: 5px;
+            .address{
+                font-size: 14px;
+                margin-top: 1px;
+                img{
+                    vertical-align: middle;
+                }
+            }
+        }
+        ::v-deep .el-descriptions{
+            width: 80%!important;
+        }
+        ::v-deep .el-descriptions__body{
+            color: #fff;
+            background-color: transparent!important;
+        }
+        ::v-deep .el-descriptions-item__cell{
+            padding-bottom: 3px!important;
+        }
+    }
+}
+</style>

src/views/enterpriseArchives/index.vue

@@ -1,23 +1,29 @@
 <template>
     <div class="main">
-        <div class="searchBody" v-show="!isShow">
+        <div class="searchMain" v-show="!isShow">
-            <div class="topLogo">
+            <div class="searchBox">
-                <img src="../../assets/companyFile/档案981.png" alt="">
+                <div class="searchBody" >
-                企业档案
+                    <div class="topLogo">
-            </div>
+                        <img src="../../assets/companyFile/档案981.png" alt="">
-            <div class="totalNum">
+                        企业档案
-                <span>共有</span><i class="numItem" v-for="(item, index) in numList" :key="index">{{ item
+                    </div>
-                }}</i><span>家企业</span>
+                    <div class="totalNum">
-            </div>
+                        <span>共有</span><i class="numItem" v-for="(item, index) in numList" :key="index">{{ item
-            <div class="zhcxBox"><input type="text" class="zhcxBoxIPT" placeholder="请输入企业名称/员工姓名/车牌号检索"
+                        }}</i><span>家企业</span>
-                    v-model.trim="searchVal">
+                    </div>
-                <el-button type="primary" icon="el-icon-search" class="ssBtn" @click="showResult(searchVal)"><span>搜索</span>
+                    <div class="zhcxBox"><input type="text" class="zhcxBoxIPT" placeholder="请输入企业名称/员工姓名/车牌号检索"
-                </el-button>
+                            v-model.trim="searchVal">
-            </div>
+                        <el-button type="primary" icon="el-icon-search" class="ssBtn" @click="showResult(searchVal)"><span>搜索</span>
-            <div class="zjssBox">
+                        </el-button>
-                最近搜索 <div class="ssgs" v-for="(item, index) in historyList" :key="index"><span @click="showResult(item)">{{
+                    </div>
-                    item }}</span></div>
+                    <div class="zjssBox">
+                        <span style="color: #37FDC7;">最近搜索 </span>
+                        <div class="ssgs" v-for="(item, index) in historyList" :key="index"><span class="hisSpan" @click="showResult(item)">{{
+                            item }}</span></div>
+                    </div>
+                </div>
             </div>
+            <card :cardList="cardList"></card>
         </div>
         <result :searchVal="searchVal" :total="total" :historyList="historyList" :resultList="resultList"
             @clearInput="clearInput()" v-if="isShow">
@@ -27,10 +33,12 @@
 
 <script>
 import result from './result.vue'
-import { listTotal, historyList, searchList } from '@/api/enterpriseArchives'
+import card from './componets/card.vue'
+import { listTotal, historyList, searchList,cardLists } from '@/api/enterpriseArchives'
 export default {
     components: {
         result,
+        card
     },
     data() {
         return {
@@ -50,7 +58,75 @@ export default {
         this.resultList1 = JSON.parse(JSON.stringify(this.resultList))
 
     },
+    mounted(){
+        this.getCardList()
+    },
     methods: {
+        getCardList(){
+            cardLists().then((res) => {
+                if(res.code == 200) {
+                    this.cardList = res.data
+                }
+            })
+            this.cardList = [
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区B区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'221人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                }
+            ]
+        },
         showResult(val) {
             if (!val) {
                 this.$message.warning('请输入要查询的关键词')
@@ -105,12 +181,20 @@ export default {
     /deep/.el-scrollbar__wrap {
         margin: 0;
     }
-
+    .searchMain {
+        width: 100%;
+    }
+    .searchBox {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+    }
     .searchBody {
         width: 1050px;
         height: 320px;
-        margin-top: 160px;
+        // margin-top: 160px;
-        border-bottom: 1px solid #6C8097;
+        margin-top: 60px;
+        // border-bottom: 1px solid #6C8097;
 
         .topLogo {
             width: 260px;
@@ -129,7 +213,6 @@ export default {
             }
         }
     }
-
     .totalNum {
         margin-top: 30px;
         width: 100%;
@@ -207,7 +290,7 @@ export default {
 
     .zjssBox {
         height: 40px;
-        margin-top: 60px;
+        margin-top: 20px;
         font-size: 14px;
         color: rgba(208, 222, 238, 0.7);
         letter-spacing: 1px;
@@ -219,6 +302,7 @@ export default {
         .ssgs {
             margin-left: 10px;
             height: 28px;
+            border-radius: 2px;
             width: auto;
             background: rgba(255, 255, 255, 0.2);
             display: flex;
@@ -226,6 +310,9 @@ export default {
             cursor: pointer;
             // background: url('~@/assets/companyFile/矩形.png') no-repeat;
             // background-size: 100% 100%;
+            .hisSpan {
+                padding: 0px 7px 0px 7px;
+            }
 
         }
     }

src/views/head2.vue

@@ -1,70 +1,90 @@
 <template>
   <div class="mainHD">
-    <div class="topHeader">
+    <div v-if="menu_box_show" class="top_box">
-      <!-- 首页标题 -->
+      <div class="topHeader">
-      <div class="safe_title" @mouseenter="handle_mouse_enter">
+        <!-- 首页标题 -->
-        <div class="iconbg">
+        <div class="safe_title" @mouseenter="handle_mouse_enter">
-          <img
+          <div class="iconbg">
-            src="../assets/companyFile/police.png"
+            <img
-            style="width: 60px; height: 60px"
+              src="../assets/companyFile/police.png"
-          />
+              style="width: 60px; height: 60px"
+            />
+          </div>
+          <div class="headText">镇海平安企业（园区）</div>
         </div>
-        <div class="headText">镇海平安企业（园区）</div>
+        <div class="jingGuan">
-      </div>
+          <div class="jgtx" @click="check_user">
-      <div class="jingGuan">
+            <img src="../assets/companyFile/12110.png" />
-        <div class="jgtx" @click="check_user">
+          </div>
-          <img src="../assets/companyFile/12110.png" />
+          &nbsp;&nbsp; 王警官
         </div>
-        &nbsp;&nbsp; 王警官
+        <div class="user_box" v-show="user_show">
-      </div>
+          <div class="user_box_body">
-      <div class="user_box" v-show="user_show">
+            <!-- 用户个人中心 -->
-        <div class="user_box_body">
+            <div class="user_center">修改密码</div>
-          <!-- 用户个人中心 -->
+            <!-- 用户退出登录 -->
-          <div class="user_center">修改密码</div>
+            <div class="user_check_login" @click="logout">退出登录</div>
-          <!-- 用户退出登录 -->
+          </div>
-          <div class="user_check_login" @click="logout">退出登录</div>
         </div>
       </div>
-    </div>
+      <div class="menu_box" v-show="menu_show">
-    <div class="menu_box" v-show="menu_show">
+        <div class="menu_item">
-      <div class="menu_item">
+          <el-menu
-        <el-menu
+            :default-active="activeIndex"
-          :default-active="activeIndex"
+            class="el-menu-demo topMenu"
-          class="el-menu-demo topMenu"
+            mode="horizontal"
-          mode="horizontal"
+            @select="handleSelect"
-          @select="handleSelect"
+            :router="true"
-          :router="true"
-        >
-          <div class="shu"></div>
-          <el-menu-item index="1" route="/home/safetyIndex"
-            >综合指数</el-menu-item
-          >
-          <div class="shu"></div>
-          <el-menu-item index="6" route="/home/applySupermarket"
-            >安商惠企</el-menu-item
-          >
-          <div class="shu"></div>
-          <el-menu-item index="2" route="/home/realtimeWarning"
-            >实时预警</el-menu-item
-          >
-          <div class="shu"></div>
-          <el-menu-item index="3" route="/home/closeLoopDispose"
-            >闭环处置</el-menu-item
           >
-          <div class="shu"></div>
+            <div class="shu"></div>
-          <el-menu-item index="4" route="/home/factorResources"
+            <el-menu-item index="1" route="/home/safetyIndex" @click="menu_first_change"
-            >要素资源</el-menu-item
+              >综合指数</el-menu-item
-          >
+            >
-          <div class="shu"></div>
+            <div class="shu"></div>
-          <el-menu-item index="5" route="/home/enterpriseArchives"
+            <el-menu-item
-            >企业档案</el-menu-item
+              index="6"
-          >
+              route="/home/applySupermarket"
-          <div class="shu"></div>
+              @click="menu_change"
-          <el-menu-item index="7" route="/home/systemManagement/safeIndex"
+              >安商惠企</el-menu-item
-            >系统管理</el-menu-item
+            >
-          >
+            <div class="shu"></div>
-          <div class="shu"></div>
+            <el-menu-item
-        </el-menu>
+              index="2"
+              route="/home/realtimeWarning"
+              @click="menu_change"
+              >实时预警</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="3"
+              route="/home/closeLoopDispose"
+              @click="menu_change"
+              >闭环处置</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="4"
+              route="/home/factorResources"
+              @click="menu_change"
+              >要素资源</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="5"
+              route="/home/enterpriseArchives"
+              @click="menu_change"
+              >企业档案</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="7"
+              route="/home/systemManagement/safeIndex"
+              @click="menu_change"
+              >系统管理</el-menu-item
+            >
+            <div class="shu"></div>
+          </el-menu>
+        </div>
       </div>
     </div>
     <router-view />
@@ -80,6 +100,7 @@ export default {
       activeIndex2: "1",
       user_show: false,
       menu_show: false,
+      menu_box_show: true,
     };
   },
   created() {
@@ -111,6 +132,10 @@ export default {
       // 跳转到登录页
       this.$router.push("/login");
     },
+    menu_first_change() {},
+    menu_change() {
+      console.log("2323232323");
+    },
   },
 };
 </script>
@@ -231,52 +256,15 @@ export default {
   top: 80px;
   z-index: 10;
   .menu_item {
-    /deep/.el-menu {
-    border: 0;
-    background-color: rgba(0, 0, 0, 0);
-    display: flex;
-    align-items: center;
-    width: 1102px;
-    margin: 0 auto;
-    .el-menu-item {
-      width: 130px;
-      height: 35px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px 20px;
-      background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
-
-      background-size: 100% 100%;
-
-      font-size: 16px;
-      color: #d9e7ff;
-      letter-spacing: 3px;
-      text-align: center;
-      font-weight: 400;
-    }
-
-    .shu {
-      border-left: 1px solid rgba(217, 231, 255, 0.4);
-      width: 0;
-      height: 24px;
-      margin: 0 10px;
-    }
-
-    .is-active {
-      background: url("~@/assets/companyFile/891772.png") no-repeat;
-
-      background-size: 100% 100%;
-    }
-
     /deep/.el-menu {
       border: 0;
       background-color: rgba(0, 0, 0, 0);
       display: flex;
       align-items: center;
-
+      width: 1102px;
+      margin: 0 auto;
       .el-menu-item {
-        width: 100px;
+        width: 130px;
         height: 35px;
         display: flex;
         justify-content: center;
@@ -301,17 +289,54 @@ export default {
       }
 
       .is-active {
-        background: url("~@/assets/companyFile/891771.png") no-repeat;
+        background: url("~@/assets/companyFile/891772.png") no-repeat;
 
         background-size: 100% 100%;
       }
 
-      .el-menu-item.is-active {
+      /deep/.el-menu {
-        border: 0 !important;
+        border: 0;
+        background-color: rgba(0, 0, 0, 0);
+        display: flex;
+        align-items: center;
+
+        .el-menu-item {
+          width: 100px;
+          height: 35px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 10px 20px;
+          background: url("~@/assets/companyFile/Rectangle Copy 4.png")
+            no-repeat;
+
+          background-size: 100% 100%;
+
+          font-size: 16px;
+          color: #d9e7ff;
+          letter-spacing: 3px;
+          text-align: center;
+          font-weight: 400;
+        }
+
+        .shu {
+          border-left: 1px solid rgba(217, 231, 255, 0.4);
+          width: 0;
+          height: 24px;
+          margin: 0 10px;
+        }
+
+        .is-active {
+          background: url("~@/assets/companyFile/891771.png") no-repeat;
+
+          background-size: 100% 100%;
+        }
+
+        .el-menu-item.is-active {
+          border: 0 !important;
+        }
       }
     }
   }
-  }
-  
 }
 </style>

src/views/head3.vue

@@ -0,0 +1,489 @@
+<template>
+  <div class="mainHD">
+    <!-- 首页导航样式 -->
+    <div v-if="menu_box_show" class="top_box">
+      <div class="topHeader">
+        <!-- 首页标题 -->
+        <div class="safe_title" @mouseenter="handle_mouse_enter">
+          <div class="iconbg">
+            <img
+              src="../assets/companyFile/police.png"
+              style="width: 60px; height: 60px"
+            />
+          </div>
+          <div class="headText">镇海平安企业（园区）</div>
+        </div>
+        <div class="jingGuan">
+          <div class="jgtx" @click="check_user">
+            <img src="../assets/companyFile/12110.png" />
+          </div>
+          &nbsp;&nbsp; 王警官
+        </div>
+        <div class="user_box" v-show="user_show">
+          <div class="user_box_body">
+            <!-- 用户个人中心 -->
+            <div class="user_center">修改密码</div>
+            <!-- 用户退出登录 -->
+            <div class="user_check_login" @click="logout">退出登录</div>
+          </div>
+        </div>
+      </div>
+      <div class="menu_box" v-show="menu_show">
+        <div class="menu_item">
+          <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo topMenu"
+            mode="horizontal"
+            @select="handleSelect"
+            :router="true"
+          >
+            <div class="shu"></div>
+            <el-menu-item index="1" route="/home/safetyIndex"
+              >综合指数</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="6"
+              route="/home/applySupermarket"
+              @click="menu_change"
+              >安商惠企</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="2"
+              route="/home/realtimeWarning"
+              @click="menu_change"
+              >实时预警</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="3"
+              route="/home/closeLoopDispose"
+              @click="menu_change"
+              >闭环处置</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="4"
+              route="/home/factorResources"
+              @click="menu_change"
+              >要素资源</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="5"
+              route="/home/enterpriseArchives"
+              @click="menu_change"
+              >企业档案</el-menu-item
+            >
+            <div class="shu"></div>
+            <el-menu-item
+              index="7"
+              route="/home/systemManagement/safeIndex"
+              @click="menu_change"
+              >系统管理</el-menu-item
+            >
+            <div class="shu"></div>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <!-- 旧版导航样式 -->
+    <div v-else class="topHeader">
+      <div class="iconbg">
+        <img
+          src="../assets/companyFile/police.png"
+          style="width: 60px; height: 60px"
+        />
+      </div>
+      <div class="headText">镇海平安企业（园区）</div>
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo topMenu"
+        mode="horizontal"
+        @select="handleSelect"
+        :router="true"
+      >
+        <div class="shu"></div>
+        <el-menu-item
+          index="1"
+          route="/home/safetyIndex"
+          @click="menu_first_change"
+          >综合指数</el-menu-item
+        >
+        <div class="shu"></div>
+        <el-menu-item index="6" route="/home/applySupermarket"
+          >安商惠企</el-menu-item
+        >
+        <div class="shu"></div>
+        <el-menu-item index="2" route="/home/realtimeWarning"
+          >实时预警</el-menu-item
+        >
+        <div class="shu"></div>
+        <el-menu-item index="3" route="/home/closeLoopDispose"
+          >闭环处置</el-menu-item
+        >
+        <div class="shu"></div>
+        <el-menu-item index="4" route="/home/factorResources"
+          >要素资源</el-menu-item
+        >
+        <div class="shu"></div>
+        <el-menu-item index="5" route="/home/enterpriseArchives"
+          >企业档案</el-menu-item
+        >
+        <div class="shu"></div>
+        <el-menu-item index="7" route="/home/systemManagement/safeIndex"
+          >系统管理</el-menu-item
+        >
+        <div class="shu"></div>
+      </el-menu>
+      <div class="jingGuan">
+        <div class="jgtx" @click="check_user">
+          <img src="../assets/companyFile/12110.png" />
+        </div>
+        &nbsp;&nbsp; 王警官
+      </div>
+      <div class="user_box" v-show="user_show">
+        <div class="user_box_body">
+          <!-- 用户个人中心 -->
+          <div class="user_center">修改密码</div>
+          <!-- 用户退出登录 -->
+          <div class="user_check_login" @click="logout">退出登录</div>
+        </div>
+      </div>
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Head",
+  data() {
+    return {
+      activeIndex: "1",
+      activeIndex2: "1",
+      user_show: false,
+      menu_show: false,
+      menu_box_show: true,
+    };
+  },
+  created() {
+    this.activeIndex = sessionStorage.getItem("activeIndex")
+      ? sessionStorage.getItem("activeIndex")
+      : "1";
+  },
+  methods: {
+    handleSelect(key) {
+      sessionStorage.setItem("activeIndex", key);
+    },
+    // 点击显示退出登录界面
+    check_user() {
+      if (this.user_show) {
+        this.user_show = false;
+      } else {
+        this.user_show = true;
+      }
+    },
+    // 鼠标移入出现头部导航
+    handle_mouse_enter() {
+      this.menu_show = true;
+    },
+    // 退出登录
+    logout() {
+      // 清空token
+      window.sessionStorage.clear();
+      // 跳转到登录页
+      this.$router.push("/login");
+    },
+    // 综合指数点击切换新版导航
+    menu_first_change() {
+      this.menu_box_show = true;
+    },
+    // 新版切换回旧版导航
+    menu_change() {
+      this.menu_box_show = false;
+    },
+  },
+};
+</script>
+ 
+<style lang="less" scoped>
+.mainHD {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.topHeader {
+  width: 100%;
+  height: 80px;
+  background: url("~@/assets/companyFile/导航栏上.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+
+  .iconbg {
+    height: 35px;
+    width: 50px;
+    margin: 0 25px;
+    // background: url("~@/assets/companyFile/矩形2111.png") no-repeat;
+    // background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .img {
+      height: 35px;
+      width: 50px;
+    }
+  }
+  .safe_title {
+    display: flex;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+  .headText {
+    font-family: YouSheBiaoTiHei;
+    font-size: 38px;
+    color: #edf6ff;
+    letter-spacing: 4px;
+    text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
+    font-weight: 400;
+    margin-right: 30px;
+  }
+
+  .jingGuan {
+    position: absolute;
+    right: 30px;
+    display: flex;
+    color: #edf6ff;
+    align-items: center;
+
+    .jgtx {
+      width: 40px;
+      height: 40px;
+      background: url("~@/assets/companyFile/矩形21112222.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+
+      img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+  .user_box {
+    position: absolute;
+    top: 70px;
+    right: 10px;
+    width: 180px;
+    height: 100px;
+    // border: 0.1px solid #33cccc;
+    padding: 10px;
+    background: url("~@/assets/archives/023.png") no-repeat;
+    background-size: 100% 100%;
+    z-index: 2;
+    .user_box_body {
+      width: 160px;
+      height: 80px;
+      // border: 0.1px solid #33cccc;
+    }
+    .user_center {
+      width: 160px;
+      height: 40px;
+      color: #d9e7ff;
+      text-align: center;
+      line-height: 40px;
+      cursor: pointer;
+    }
+    .user_check_login {
+      width: 160px;
+      height: 40px;
+      color: #d9e7ff;
+      text-align: center;
+      line-height: 40px;
+      cursor: pointer;
+    }
+    .user_center:hover,
+    .user_center:focus {
+      text-shadow: 0 0 20px rgba(21, 255, 198, 0.64);
+    }
+    .user_check_login:hover,
+    .user_check_login:focus {
+      text-shadow: 0 0 20px rgba(21, 255, 198, 0.64);
+    }
+  }
+  /deep/.el-menu {
+    border: 0;
+    background-color: rgba(0, 0, 0, 0);
+    display: flex;
+    align-items: center;
+
+    .el-menu-item {
+      width: 130px;
+      height: 35px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 20px;
+      background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
+
+      background-size: 100% 100%;
+
+      font-size: 16px;
+      color: #d9e7ff;
+      letter-spacing: 3px;
+      text-align: center;
+      font-weight: 400;
+    }
+
+    .shu {
+      border-left: 1px solid rgba(217, 231, 255, 0.4);
+      width: 0;
+      height: 24px;
+      margin: 0 10px;
+    }
+
+    .is-active {
+      background: url("~@/assets/companyFile/891772.png") no-repeat;
+
+      background-size: 100% 100%;
+    }
+
+    /deep/.el-menu {
+      border: 0;
+      background-color: rgba(0, 0, 0, 0);
+      display: flex;
+      align-items: center;
+
+      .el-menu-item {
+        width: 100px;
+        height: 35px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 20px;
+        background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
+
+        background-size: 100% 100%;
+
+        font-size: 16px;
+        color: #d9e7ff;
+        letter-spacing: 3px;
+        text-align: center;
+        font-weight: 400;
+      }
+
+      .shu {
+        border-left: 1px solid rgba(217, 231, 255, 0.4);
+        width: 0;
+        height: 24px;
+        margin: 0 10px;
+      }
+
+      .is-active {
+        background: url("~@/assets/companyFile/891771.png") no-repeat;
+
+        background-size: 100% 100%;
+      }
+
+      .el-menu-item.is-active {
+        border: 0 !important;
+      }
+    }
+  }
+}
+/* 导航盒子 */
+.menu_box {
+  width: 100%;
+  height: 60px;
+  border: 0.1px solid #d9e7ff;
+  position: absolute;
+  top: 80px;
+  z-index: 10;
+  .menu_item {
+    /deep/.el-menu {
+      border: 0;
+      background-color: rgba(0, 0, 0, 0);
+      display: flex;
+      align-items: center;
+      width: 1102px;
+      margin: 0 auto;
+      .el-menu-item {
+        width: 130px;
+        height: 35px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 20px;
+        background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
+
+        background-size: 100% 100%;
+
+        font-size: 16px;
+        color: #d9e7ff;
+        letter-spacing: 3px;
+        text-align: center;
+        font-weight: 400;
+      }
+
+      .shu {
+        border-left: 1px solid rgba(217, 231, 255, 0.4);
+        width: 0;
+        height: 24px;
+        margin: 0 10px;
+      }
+
+      .is-active {
+        background: url("~@/assets/companyFile/891772.png") no-repeat;
+
+        background-size: 100% 100%;
+      }
+
+      /deep/.el-menu {
+        border: 0;
+        background-color: rgba(0, 0, 0, 0);
+        display: flex;
+        align-items: center;
+
+        .el-menu-item {
+          width: 100px;
+          height: 35px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 10px 20px;
+          background: url("~@/assets/companyFile/Rectangle Copy 4.png")
+            no-repeat;
+
+          background-size: 100% 100%;
+
+          font-size: 16px;
+          color: #d9e7ff;
+          letter-spacing: 3px;
+          text-align: center;
+          font-weight: 400;
+        }
+
+        .shu {
+          border-left: 1px solid rgba(217, 231, 255, 0.4);
+          width: 0;
+          height: 24px;
+          margin: 0 10px;
+        }
+
+        .is-active {
+          background: url("~@/assets/companyFile/891771.png") no-repeat;
+
+          background-size: 100% 100%;
+        }
+
+        .el-menu-item.is-active {
+          border: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/realtimeWarning/index.vue

@@ -21,7 +21,7 @@
         <div class="totalTitle">
           <div class="titleText">预警列表</div>
           <span
-            >&nbsp;（ <span class="redText">{{ total }}</span> ）</span
+            >( <span class="redText">{{ total }}</span> )</span
           >
           <div class="searchBox">
             <el-form :model="formInline" class="search">
@@ -293,7 +293,7 @@ export default {
           font-size: 16px;
           color: #ebfff4;
           letter-spacing: 2px;
-          width: 120px;
+          width: 80px;
           text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
           font-weight: 400;
         }

src/views/safetyIndex/anjian.vue

@@ -1,22 +1,38 @@
 <template>
-    <div class="asj">
+  <div class="asj">
-        <div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">案事件</div>
+    <div class="title">
-        <div class="qyclBody">
+      <img src="../../assets/safetyIndex/装饰009991.png" alt="" />案事件
-            <swiper :options="swiperOption1" class="swiper" ref="mySwiper1" v-if="caseTotalList.length">
+    </div>
-                <swiper-slide v-for="(item, index) of caseTotalList" :key="index" class="today">
+    <div class="qyclBody">
-                    <div class="todayChild" @click="showfangkeVisible(item)">
+      <swiper
-                        <div class="caseDetail">{{ item.caseName }}</div>
+        :options="swiperOption1"
-                        <div class="caseMsg">
+        class="swiper"
-                            <div>企业名称：{{ item.caseAddress }}</div>
+        ref="mySwiper1"
-                            <div>时间：{{ item.registerTime }}</div>
+        v-if="caseTotalList.length"
-                        </div>
+      >
-                    </div>
+        <swiper-slide
-                </swiper-slide>
+          v-for="(item, index) of caseTotalList"
-            </swiper>
+          :key="index"
-        </div>
+          class="today"
-        <el-dialog title="案件详情" :visible.sync="fangkeVisible" class="picForm" v-if="anjianDetail">
+        >
-            <div class="jibenx">
+          <div class="todayChild" @click="showfangkeVisible(item)">
-                <!-- <div class="jibenhang">
+            <div class="caseDetail">{{ item.caseName }}</div>
+            <div class="caseMsg">
+              <div>企业名称：{{ item.caseAddress }}</div>
+              <div>时间：{{ item.registerTime }}</div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <el-dialog
+      title="案件详情"
+      :visible.sync="fangkeVisible"
+      class="picForm"
+      v-if="anjianDetail"
+    >
+      <div class="jibenx">
+        <!-- <div class="jibenhang">
         <div class="jibenhangTitle">企业名称</div>
         <div class="jibenhangleftText">
             <span v-html="anjianDetail.caseName"></span>
@@ -26,411 +42,396 @@
             <div>{{ anjianDetail.caseName }}</div>
         </div>
     </div> -->
-                <div class="jibenhang">
+        <div class="jibenhang">
-                    <div class="jibenhangTitle">案件编号</div>
+          <div class="jibenhangTitle">案件编号</div>
-                    <div class="jibenhangleftText">
+          <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.caseNo"></span>
+            <span v-html="anjianDetail.caseNo"></span>
-                    </div>
+          </div>
-                    <div class="jibenhangTitle">案件名称</div>
+          <div class="jibenhangTitle">案件名称</div>
-                    <div class="jibenhangrightText">
+          <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.caseName }}</div>
+            <div>{{ anjianDetail.caseName }}</div>
-                    </div>
+          </div>
-                </div>
+        </div>
-                <div class="jibenhang">
+        <div class="jibenhang">
-                    <div class="jibenhangTitle">案件分类</div>
+          <div class="jibenhangTitle">案件分类</div>
-                    <div class="jibenhangleftText">
+          <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.caseType"></span>
+            <span v-html="anjianDetail.caseType"></span>
-                    </div>
+          </div>
-                    <div class="jibenhangTitle">案件类别</div>
+          <div class="jibenhangTitle">案件类别</div>
-                    <div class="jibenhangrightText">
+          <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.caseCategory }}</div>
+            <div>{{ anjianDetail.caseCategory }}</div>
-                    </div>
+          </div>
-                </div>
+        </div>
-                <div class="jibenhang">
+        <div class="jibenhang">
-                    <div class="jibenhangTitle">发案区划</div>
+          <div class="jibenhangTitle">发案区划</div>
-                    <div class="jibenhangleftText">
+          <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.policeDistrictCode"></span>
+            <span v-html="anjianDetail.policeDistrictCode"></span>
-                    </div>
+          </div>
-                    <div class="jibenhangTitle">派出所</div>
+          <div class="jibenhangTitle">派出所</div>
-                    <div class="jibenhangrightText">
+          <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.policeDistrictCn }}</div>
+            <div>{{ anjianDetail.policeDistrictCn }}</div>
-                    </div>
+          </div>
-                </div>
+        </div>
-                <div class="jibenhang">
+        <div class="jibenhang">
-                    <div class="jibenhangTitle">破案情况</div>
+          <div class="jibenhangTitle">破案情况</div>
-                    <div class="jibenhangleftText">
+          <div class="jibenhangleftText">
-                        <span v-html="anjianDetail.caseState"></span>
+            <span v-html="anjianDetail.caseState"></span>
-                    </div>
+          </div>
-                    <div class="jibenhangTitle">发案地点</div>
+          <div class="jibenhangTitle">发案地点</div>
-                    <div class="jibenhangrightText">
+          <div class="jibenhangrightText">
-                        <div>{{ anjianDetail.caseAddress }}</div>
+            <div>{{ anjianDetail.caseAddress }}</div>
-                    </div>
+          </div>
-                </div>
+        </div>
-                <div class="jibenhang1 jibenhang">
+        <div class="jibenhang1 jibenhang">
-                    <div class="jibenhangTitle">简要案情</div>
+          <div class="jibenhangTitle">简要案情</div>
-                    <div class="jibenhangText">
+          <div class="jibenhangText">
-                        <span>{{ anjianDetail.caseDetail }}</span>
+            <span>{{ anjianDetail.caseDetail }}</span>
-                    </div>
+          </div>
-
+        </div>
-                </div>
+      </div>
-            </div>
+    </el-dialog>
-        </el-dialog>
+  </div>
-    </div>
 </template>
 
 <script>
 import "swiper/dist/css/swiper.min.css";
-import { swiper, swiperSlide } from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
+import {
-import { caseList } from '@/api/safetyIndex'
+  swiper,
+  swiperSlide,
+} from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
+import { caseList } from "@/api/safetyIndex";
 export default {
-    components: {
+  components: {
-        swiper,
+    swiper,
-        swiperSlide
+    swiperSlide,
+  },
+  data() {
+    return {
+      staffStatisticsList: [],
+      staffDetailList: [],
+      listTotal: {},
+      fangkeVisible: false,
+      fangkepageSize: 10,
+      fangkepageNum: 1,
+      fangketotal: 0,
+      fangkeList: [],
+      intotal: 0,
+      outtotal: 0,
+      ziyouTotal: 0,
+      zulintotal: 0,
+      useType: 0,
+      caseTotalList: [],
+      anjianDetail: {},
+      swiperOption1: {
+        direction: "vertical",
+        // cubeEffect:true,
+        grabCursor: true,
+        // centeredSlides: true,
+        slidesPerView: "auto",
+        loop: true, // 循环模式选项 设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
+        loopedSlides: 2, //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false,
+        },
+        //滑动速度
+        speed: 1000,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      caseList().then((res) => {
+        this.caseTotalList = res.data;
+      });
     },
-    data() {
+    tableRowStyle({ rowIndex }) {
+      if ((rowIndex + 1) % 2 == 1) {
+        return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
+      } else {
         return {
-            staffStatisticsList: [],
+          background: "rgba(61, 85, 102, 0.16)",
-            staffDetailList: [],
+          border: "0",
-            listTotal: {},
+          color: "#fff",
-            fangkeVisible: false,
+        };
-            fangkepageSize: 10,
+      }
-            fangkepageNum: 1,
-            fangketotal: 0,
-            fangkeList: [],
-            intotal: 0,
-            outtotal: 0,
-            ziyouTotal: 0,
-            zulintotal: 0,
-            useType: 0,
-            caseTotalList: [],
-            anjianDetail: {},
-            swiperOption1: {
-                direction: "vertical",
-                // cubeEffect:true,
-                grabCursor: true,
-                // centeredSlides: true,
-                slidesPerView: 'auto',
-                loop: true, // 循环模式选项 设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
-                loopedSlides: 2, //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
-                autoplay: {
-                    delay: 3000,
-                    disableOnInteraction: false,
-                },
-                //滑动速度
-                speed: 1000,
-            }
-        }
     },
-    created() {
+    tableHeaderColor() {
-        this.getList()
+      return {
-
+        background:
+          "linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
+      };
+      // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
+    },
+    tableHeaderCellColor() {
+      return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
     },
-    methods: {
-        getList() {
-            caseList().then(res => {
-                this.caseTotalList = res.data
-            })
-        },
-        tableRowStyle({ rowIndex }) {
-            if ((rowIndex + 1) % 2 == 1) {
-                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
-            } else {
-                return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
-            }
-        },
-        tableHeaderColor() {
-            return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
-            // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
-        },
-        tableHeaderCellColor() {
-            return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
-        },
-
-        fangkeSizeChange(val) {
-            this.fangkepageNum = 1;
-            this.fangkepageSize = val;
-            this.showfangkeVisible(this.useType)
-        },
-        fangkeCurrentChange(val) {
-            this.fangkepageNum = val;
-            this.showfangkeVisible(this.useType)
-        },
 
+    fangkeSizeChange(val) {
+      this.fangkepageNum = 1;
+      this.fangkepageSize = val;
+      this.showfangkeVisible(this.useType);
+    },
+    fangkeCurrentChange(val) {
+      this.fangkepageNum = val;
+      this.showfangkeVisible(this.useType);
+    },
 
-        showfangkeVisible(val) {
+    showfangkeVisible(val) {
-            this.anjianDetail = val
+      this.anjianDetail = val;
-            this.fangkeVisible = true
+      this.fangkeVisible = true;
-        }
     },
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .asj {
-    height: 23%;
+  height: 23%;
+  width: 100%;
+  margin-bottom: 20px;
+  background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat;
+  background-size: 100% 100%;
+
+  .title {
     width: 100%;
-    margin-bottom: 20px;
+    height: 33px;
-    background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
+    background: url("~@/assets/safetyIndex/标题样式.png") no-repeat;
     background-size: 100% 100%;
+    font-size: 16px;
+    color: #d9e7ff;
+    letter-spacing: 1px;
+    text-align: center;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 16px;
+      height: 16px;
+      margin: 0 12px;
+    }
+  }
 
+  .qyclBody {
+    width: 100%;
+    height: calc(100% - 33px);
+    padding: 0 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-content: space-around;
+    flex-wrap: wrap;
+    overflow: hidden;
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
 
+    .today {
+      width: 100%;
+      height: 50%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 0;
+      box-sizing: border-box;
 
-    .title {
+      .todayChild {
         width: 100%;
-        height: 33px;
+        height: 100%;
-        background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
-        background-size: 100% 100%;
-        font-size: 16px;
-        color: #D9E7FF;
-        letter-spacing: 1px;
-        text-align: center;
-        font-weight: 500;
         display: flex;
         align-items: center;
-
-        img {
-            width: 16px;
-            height: 16px;
-            margin: 0 12px;
-        }
-    }
-
-    .qyclBody {
-        width: 100%;
-        height: calc(100% - 33px);
-        padding: 0 20px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: center;
-        align-content: space-around;
         flex-wrap: wrap;
-        overflow: hidden;
+        box-sizing: border-box;
-
+        position: relative;
-        .swiper {
+        padding: 10px 8px;
-            width: 100%;
+        background: rgba(0, 0, 0, 0);
-            height: 100%;
+        z-index: 200;
+        cursor: pointer;
+
+        .caseDetail {
+          width: 100%;
+          height: 60%;
+          font-size: 16px;
+          color: #ffe6d9;
+          letter-spacing: 0;
+          line-height: 16px;
+          text-shadow: 0 0 8px rgba(255, 119, 52, 0.5);
+          font-weight: 400;
+          // display: flex;
+          // align-items: center;
+          overflow: hidden;
+          white-space: nowrap; //禁止换行
+          text-overflow: ellipsis; //...
         }
 
-        .today {
+        .caseMsg {
-            width: 100%;
+          width: 100%;
-            height: 50%;
+          height: 40%;
-            display: flex;
+          font-size: 14px;
-            justify-content: space-between;
+          color: #d0deee;
-            align-items: center;
+          letter-spacing: 0;
-            padding: 5px 0;
+          line-height: 16px;
-            box-sizing: border-box;
+          font-weight: 400;
-
+          display: flex;
-
+          justify-content: space-between;
-            .todayChild {
+          align-items: center;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                flex-wrap: wrap;
-                box-sizing: border-box;
-                position: relative;
-                padding: 10px 8px;
-                background: rgba(0, 0, 0, 0);
-                z-index: 200;
-                cursor: pointer;
-
-                .caseDetail {
-                    width: 100%;
-                    height: 60%;
-                    font-size: 16px;
-                    color: #FFE6D9;
-                    letter-spacing: 0;
-                    line-height: 16px;
-                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
-                    font-weight: 400;
-                    // display: flex;
-                    // align-items: center;
-                    overflow: hidden;
-                    white-space: nowrap; //禁止换行
-                    text-overflow: ellipsis; //...
-                }
-
-                .caseMsg {
-                    width: 100%;
-                    height: 40%;
-                    font-size: 14px;
-                    color: #D0DEEE;
-                    letter-spacing: 0;
-                    line-height: 16px;
-                    font-weight: 400;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-
-            }
-
-            .todayChild::after {
-                content: "";
-                background: url('~@/assets/safetyIndex/0091.png') no-repeat;
-                background-size: 100% 100%;
-                opacity: 0.5;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                position: absolute;
-                z-index: -1;
-            }
-
         }
+      }
 
-
+      .todayChild::after {
+        content: "";
+        background: url("~@/assets/safetyIndex/0091.png") no-repeat;
+        background-size: 100% 100%;
+        opacity: 0.5;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+        z-index: -1;
+      }
     }
-
+  }
-
-
 }
 
-
 .picForm {
+  /deep/ .el-dialog {
+    background-color: rgba(0, 0, 0, 0);
+    background: url("~@/assets/companyFile/背景2.png") no-repeat;
+    background-size: 100% 100%;
+    width: 811px;
+    height: 420px;
+    position: relative;
 
+    .el-dialog__title {
+      font-size: 16px;
+      color: #ebfff4;
+      letter-spacing: 2px;
 
-    /deep/ .el-dialog {
+      text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
-        background-color: rgba(0, 0, 0, 0);
+      font-weight: 400;
-        background: url('~@/assets/companyFile/背景2.png') no-repeat;
+    }
-        background-size: 100% 100%;
-        width: 811px;
-        height: 420px;
-        position: relative;
-
-        .el-dialog__title {
-            font-size: 16px;
-            color: #EBFFF4;
-            letter-spacing: 2px;
-
-            text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
-            font-weight: 400;
-        }
-
-        .el-dialog__body {
-            box-sizing: border-box;
-            height: 360px;
-
-
-            .jibenx {
-                width: 100%;
-                height: 100%;
-                border: 1px solid rgba(91, 116, 140, 0.6);
-
-                .jibenhang {
-                    height: 19%;
-                    width: 100%;
-                    display: flex;
-                    border-bottom: 1px solid rgba(91, 116, 140, 0.6);
-
-                    .jibenhangTitle {
-                        box-sizing: border-box;
-                        padding-left: 10px;
-                        width: 15%;
-                        height: 100%;
-                        background: rgba(108, 128, 151, 0.20);
-                        line-height: 48px;
-                        border-right: 1px solid rgba(91, 116, 140, 0.6);
-                        font-size: 14px;
-                        color: rgba(255, 255, 255, 0.8);
-                        letter-spacing: 0;
-                        font-weight: 400;
 
-                    }
+    .el-dialog__body {
+      box-sizing: border-box;
+      height: 360px;
 
-                    .jibenhangleftText {
+      .jibenx {
-                        width: 30%;
+        width: 100%;
-                        box-sizing: border-box;
+        height: 100%;
-                        padding-left: 10px;
+        border: 1px solid rgba(91, 116, 140, 0.6);
-                        height: 100%;
-                        border-right: 1px solid rgba(91, 116, 140, 0.6);
-                        line-height: 48px;
-                        font-size: 12px;
-                        color: #FFFFFF;
-                        letter-spacing: 0;
-                        font-weight: 400;
-                    }
 
-                    .jibenhangrightText {
+        .jibenhang {
-                        box-sizing: border-box;
+          height: 19%;
-                        padding-left: 10px;
+          width: 100%;
-                        width: 40%;
+          display: flex;
-                        height: 100%;
+          border-bottom: 1px solid rgba(91, 116, 140, 0.6);
-                        line-height: 48px;
-                        font-size: 12px;
-                        color: #FFFFFF;
-                        letter-spacing: 0;
-                        font-weight: 400;
-                        overflow: hidden;
-                    }
 
-                    .jibenhangText {
+          .jibenhangTitle {
-                        padding-left: 10px;
+            box-sizing: border-box;
-                        width: 85%;
+            padding-left: 10px;
-                        height: 100%;
+            width: 15%;
-                        display: flex;
+            height: 100%;
-                        align-items: center;
+            background: rgba(108, 128, 151, 0.2);
-                        font-size: 12px;
+            line-height: 48px;
-                        color: #FFFFFF;
+            border-right: 1px solid rgba(91, 116, 140, 0.6);
-                    }
+            font-size: 14px;
-                }
+            color: rgba(255, 255, 255, 0.8);
+            letter-spacing: 0;
+            font-weight: 400;
+          }
 
-                .jibenhang1 {
+          .jibenhangleftText {
-                    height: 24%;
+            width: 30%;
-                    width: 100%;
+            box-sizing: border-box;
-                    border-bottom: 0;
+            padding-left: 10px;
-                    box-sizing: border-box;
+            height: 100%;
+            border-right: 1px solid rgba(91, 116, 140, 0.6);
+            line-height: 48px;
+            font-size: 12px;
+            color: #ffffff;
+            letter-spacing: 0;
+            font-weight: 400;
+          }
 
-                    .jibenhangTitle {
+          .jibenhangrightText {
+            box-sizing: border-box;
+            padding-left: 10px;
+            width: 40%;
+            height: 100%;
+            line-height: 48px;
+            font-size: 12px;
+            color: #ffffff;
+            letter-spacing: 0;
+            font-weight: 400;
+            overflow: hidden;
+          }
 
-                        padding-left: 12px;
+          .jibenhangText {
-                        width: 15%;
+            padding-left: 10px;
-                        height: 100%;
+            width: 85%;
-                        background: rgba(108, 128, 151, 0.20);
+            height: 100%;
-                        line-height: 57px;
+            display: flex;
-                        border-right: 1px solid rgba(91, 116, 140, 0.6);
+            align-items: center;
-                        font-size: 14px;
+            font-size: 12px;
-                        color: rgba(255, 255, 255, 0.8);
+            color: #ffffff;
-                        letter-spacing: 0;
+          }
-                        font-weight: 400;
+        }
 
-                    }
+        .jibenhang1 {
+          height: 24%;
+          width: 100%;
+          border-bottom: 0;
+          box-sizing: border-box;
 
-                    .jibenhangText {
+          .jibenhangTitle {
-                        padding-left: 10px;
+            padding-left: 12px;
-                        width: 84.8%;
+            width: 15%;
-                        height: 100%;
+            height: 100%;
-                        display: flex;
+            background: rgba(108, 128, 151, 0.2);
-                        align-items: center;
+            line-height: 57px;
-                        font-size: 12px;
+            border-right: 1px solid rgba(91, 116, 140, 0.6);
-                        color: #FFFFFF;
+            font-size: 14px;
-                        box-sizing: border-box;
+            color: rgba(255, 255, 255, 0.8);
-                    }
+            letter-spacing: 0;
-                }
+            font-weight: 400;
-            }
+          }
 
+          .jibenhangText {
+            padding-left: 10px;
+            width: 84.8%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #ffffff;
+            box-sizing: border-box;
+          }
         }
+      }
     }
+  }
 }
 
-
-
 /deep/.el-input__inner {
-    // background: url('~@/assets/companyFile/2121.png') no-repeat;
+  // background: url('~@/assets/companyFile/2121.png') no-repeat;
-    background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
+  background: url("~@/assets/companyFile/矩形备份 18.png") no-repeat;
-    background-size: 100% 100%;
+  background-size: 100% 100%;
-    border: 1px solid rgba(40, 132, 126, 1);
+  border: 1px solid rgba(40, 132, 126, 1);
-    color: rgba(234, 246, 255, 0.7);
+  color: rgba(234, 246, 255, 0.7);
-    ;
+  .el-range-separator {
-
+    color: #ccc;
-    .el-range-separator {
+  }
-        color: #ccc;
+
-    }
+  .el-range-input {
-
+    background: rgba(0, 0, 0, 0);
-    .el-range-input {
+    color: #ccc;
-        background: rgba(0, 0, 0, 0);
+  }
-        color: #ccc;
-    }
 }
 </style>

src/views/safetyIndex/wupin.vue

@@ -186,6 +186,7 @@ export default {
         getindexGoods() {
             indexGoods().then(res => {
                 this.fangkeList = res.data
+                console.log('resssss',res.data);
                 this.fangkeList.forEach(item => {
                     if (item.goodsType == 1) {
                         this.fsyData = item

yarn.lock

@@ -4575,306 +4575,306 @@ globby@^9.2.0:
   integrity sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==
   dependencies:
     "@types/glob" "^7.1.1"
-    array-union "^1.0.2"
+    "array-union" "^1.0.2"
-    dir-glob "^2.2.2"
+    "dir-glob" "^2.2.2"
-    fast-glob "^2.2.6"
+    "fast-glob" "^2.2.6"
-    glob "^7.1.3"
+    "glob" "^7.1.3"
-    ignore "^4.0.3"
+    "ignore" "^4.0.3"
-    pify "^4.0.1"
+    "pify" "^4.0.1"
-    slash "^2.0.0"
+    "slash" "^2.0.0"
-
+
-gopd@^1.0.1:
+"gopd@^1.0.1":
-  version "1.0.1"
+  "integrity" "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA=="
-  resolved "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz"
+  "resolved" "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  "version" "1.0.1"
-  dependencies:
+  dependencies:
-    get-intrinsic "^1.1.3"
+    "get-intrinsic" "^1.1.3"
-
+
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+"graceful-fs@^4.1.11", "graceful-fs@^4.1.15", "graceful-fs@^4.1.2", "graceful-fs@^4.1.6":
-  version "4.2.11"
+  "integrity" "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
-  resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  "resolved" "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz"
-  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+  "version" "4.2.11"
-
+
-gzip-size@^5.0.0:
+"gzip-size@^5.0.0":
-  version "5.1.1"
+  "integrity" "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA=="
-  resolved "https://registry.npmmirror.com/gzip-size/-/gzip-size-5.1.1.tgz"
+  "resolved" "https://registry.npmmirror.com/gzip-size/-/gzip-size-5.1.1.tgz"
-  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  "version" "5.1.1"
-  dependencies:
+  dependencies:
-    duplexer "^0.1.1"
+    "duplexer" "^0.1.1"
-    pify "^4.0.1"
+    "pify" "^4.0.1"
-
+
-handle-thing@^2.0.0:
+"handle-thing@^2.0.0":
-  version "2.0.1"
+  "integrity" "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
-  resolved "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz"
+  "resolved" "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz"
-  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
+  "version" "2.0.1"
-
+
-har-schema@^2.0.0:
+"har-schema@^2.0.0":
-  version "2.0.0"
+  "integrity" "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
-  resolved "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz"
-  integrity sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==
+  "version" "2.0.0"
-
+
-har-validator@~5.1.3:
+"har-validator@~5.1.3":
-  version "5.1.5"
+  "integrity" "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w=="
-  resolved "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz"
+  "resolved" "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  "version" "5.1.5"
-  dependencies:
+  dependencies:
-    ajv "^6.12.3"
+    "ajv" "^6.12.3"
-    har-schema "^2.0.0"
+    "har-schema" "^2.0.0"
-
+
-has-bigints@^1.0.1, has-bigints@^1.0.2:
+"has-bigints@^1.0.1", "has-bigints@^1.0.2":
-  version "1.0.2"
+  "integrity" "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
-  resolved "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz"
+  "resolved" "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz"
-  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+  "version" "1.0.2"
-
+
-has-flag@^3.0.0:
+"has-flag@^3.0.0":
-  version "3.0.0"
+  "integrity" "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
-  resolved "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz"
-  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+  "version" "3.0.0"
-
+
-has-flag@^4.0.0:
+"has-flag@^4.0.0":
-  version "4.0.0"
+  "integrity" "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-  resolved "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+  "version" "4.0.0"
-
+
-has-property-descriptors@^1.0.0:
+"has-property-descriptors@^1.0.0":
-  version "1.0.0"
+  "integrity" "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ=="
-  resolved "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
-  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  "version" "1.0.0"
-  dependencies:
+  dependencies:
-    get-intrinsic "^1.1.1"
+    "get-intrinsic" "^1.1.1"
-
+
-has-proto@^1.0.1:
+"has-proto@^1.0.1":
-  version "1.0.1"
+  "integrity" "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
-  resolved "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz"
+  "resolved" "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz"
-  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+  "version" "1.0.1"
-
+
-has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
+"has-symbols@^1.0.1", "has-symbols@^1.0.2", "has-symbols@^1.0.3":
-  version "1.0.3"
+  "integrity" "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
-  resolved "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz"
+  "resolved" "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz"
-  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+  "version" "1.0.3"
-
+
-has-tostringtag@^1.0.0:
+"has-tostringtag@^1.0.0":
-  version "1.0.0"
+  "integrity" "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ=="
-  resolved "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
-  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  "version" "1.0.0"
-  dependencies:
+  dependencies:
-    has-symbols "^1.0.2"
+    "has-symbols" "^1.0.2"
-
+
-has-value@^0.3.1:
+"has-value@^0.3.1":
-  version "0.3.1"
+  "integrity" "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q=="
-  resolved "https://registry.npmmirror.com/has-value/-/has-value-0.3.1.tgz"
+  "resolved" "https://registry.npmmirror.com/has-value/-/has-value-0.3.1.tgz"
-  integrity sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==
+  "version" "0.3.1"
-  dependencies:
+  dependencies:
-    get-value "^2.0.3"
+    "get-value" "^2.0.3"
-    has-values "^0.1.4"
+    "has-values" "^0.1.4"
-    isobject "^2.0.0"
+    "isobject" "^2.0.0"
-
+
-has-value@^1.0.0:
+"has-value@^1.0.0":
-  version "1.0.0"
+  "integrity" "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw=="
-  resolved "https://registry.npmmirror.com/has-value/-/has-value-1.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/has-value/-/has-value-1.0.0.tgz"
-  integrity sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==
+  "version" "1.0.0"
-  dependencies:
+  dependencies:
-    get-value "^2.0.6"
+    "get-value" "^2.0.6"
-    has-values "^1.0.0"
+    "has-values" "^1.0.0"
-    isobject "^3.0.0"
+    "isobject" "^3.0.0"
-
+
-has-values@^0.1.4:
+"has-values@^0.1.4":
-  version "0.1.4"
+  "integrity" "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ=="
-  resolved "https://registry.npmmirror.com/has-values/-/has-values-0.1.4.tgz"
+  "resolved" "https://registry.npmmirror.com/has-values/-/has-values-0.1.4.tgz"
-  integrity sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==
+  "version" "0.1.4"
-
+
-has-values@^1.0.0:
+"has-values@^1.0.0":
-  version "1.0.0"
+  "integrity" "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ=="
-  resolved "https://registry.npmmirror.com/has-values/-/has-values-1.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/has-values/-/has-values-1.0.0.tgz"
-  integrity sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==
+  "version" "1.0.0"
-  dependencies:
+  dependencies:
-    is-number "^3.0.0"
+    "is-number" "^3.0.0"
-    kind-of "^4.0.0"
+    "kind-of" "^4.0.0"
-
+
-has@^1.0.0, has@^1.0.3:
+"has@^1.0.0", "has@^1.0.3":
-  version "1.0.3"
+  "integrity" "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw=="
-  resolved "https://registry.npmmirror.com/has/-/has-1.0.3.tgz"
+  "resolved" "https://registry.npmmirror.com/has/-/has-1.0.3.tgz"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  "version" "1.0.3"
-  dependencies:
+  dependencies:
-    function-bind "^1.1.1"
+    "function-bind" "^1.1.1"
-
+
-hash-base@^3.0.0:
+"hash-base@^3.0.0":
-  version "3.1.0"
+  "integrity" "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA=="
-  resolved "https://registry.npmmirror.com/hash-base/-/hash-base-3.1.0.tgz"
+  "resolved" "https://registry.npmmirror.com/hash-base/-/hash-base-3.1.0.tgz"
-  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  "version" "3.1.0"
-  dependencies:
+  dependencies:
-    inherits "^2.0.4"
+    "inherits" "^2.0.4"
-    readable-stream "^3.6.0"
+    "readable-stream" "^3.6.0"
-    safe-buffer "^5.2.0"
+    "safe-buffer" "^5.2.0"
-
+
-hash-sum@^1.0.2:
+"hash-sum@^1.0.2":
-  version "1.0.2"
+  "integrity" "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
-  resolved "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz"
+  "resolved" "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz"
-  integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==
+  "version" "1.0.2"
-
+
-hash-sum@^2.0.0:
+"hash-sum@^2.0.0":
-  version "2.0.0"
+  "integrity" "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
-  resolved "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+  "version" "2.0.0"
-
+
-hash.js@^1.0.0, hash.js@^1.0.3:
+"hash.js@^1.0.0", "hash.js@^1.0.3":
-  version "1.1.7"
+  "integrity" "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA=="
-  resolved "https://registry.npmmirror.com/hash.js/-/hash.js-1.1.7.tgz"
+  "resolved" "https://registry.npmmirror.com/hash.js/-/hash.js-1.1.7.tgz"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
+  "version" "1.1.7"
-  dependencies:
+  dependencies:
-    inherits "^2.0.3"
+    "inherits" "^2.0.3"
-    minimalistic-assert "^1.0.1"
+    "minimalistic-assert" "^1.0.1"
-
+
-he@^1.2.0, he@1.2.x:
+"he@^1.2.0", "he@1.2.x":
-  version "1.2.0"
+  "integrity" "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
-  resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz"
+  "resolved" "https://registry.npmmirror.com/he/-/he-1.2.0.tgz"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+  "version" "1.2.0"
-
+
-hex-color-regex@^1.1.0:
+"hex-color-regex@^1.1.0":
-  version "1.1.0"
+  "integrity" "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
-  resolved "https://registry.npmmirror.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
+  "resolved" "https://registry.npmmirror.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+  "version" "1.1.0"
-
+
-highcharts-vue@^1.4.3:
+"highcharts-vue@^1.4.3":
-  version "1.4.3"
+  "integrity" "sha512-qIy9EFuLIgOw+reNkTvu0pvMBcSE0BAPtONAqZoEl0qaAIpGxiyXqhRNPDufWieSC0YlybpCznxE8EK19Kcg+A=="
-  resolved "https://registry.npmmirror.com/highcharts-vue/-/highcharts-vue-1.4.3.tgz"
+  "resolved" "https://registry.npmjs.org/highcharts-vue/-/highcharts-vue-1.4.3.tgz"
-  integrity sha512-qIy9EFuLIgOw+reNkTvu0pvMBcSE0BAPtONAqZoEl0qaAIpGxiyXqhRNPDufWieSC0YlybpCznxE8EK19Kcg+A==
+  "version" "1.4.3"
-
+
-highcharts@>=5.0.0:
+"highcharts@^11.1.0", "highcharts@>=5.0.0":
-  version "11.1.0"
+  "integrity" "sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g=="
-  resolved "https://registry.npmjs.org/highcharts/-/highcharts-11.1.0.tgz"
+  "resolved" "https://registry.npmjs.org/highcharts/-/highcharts-11.1.0.tgz"
-  integrity sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g==
+  "version" "11.1.0"
-
+
-highlight.js@^10.7.1:
+"highlight.js@^10.7.1":
-  version "10.7.3"
+  "integrity" "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
-  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz"
+  "resolved" "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz"
-  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+  "version" "10.7.3"
-
+
-hmac-drbg@^1.0.1:
+"hmac-drbg@^1.0.1":
-  version "1.0.1"
+  "integrity" "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg=="
-  resolved "https://registry.npmmirror.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
+  "resolved" "https://registry.npmmirror.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
-  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
+  "version" "1.0.1"
-  dependencies:
+  dependencies:
-    hash.js "^1.0.3"
+    "hash.js" "^1.0.3"
-    minimalistic-assert "^1.0.0"
+    "minimalistic-assert" "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
+    "minimalistic-crypto-utils" "^1.0.1"
-
+
-hoopy@^0.1.4:
+"hoopy@^0.1.4":
-  version "0.1.4"
+  "integrity" "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
-  resolved "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz"
+  "resolved" "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz"
-  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
+  "version" "0.1.4"
-
+
-hosted-git-info@^2.1.4:
+"hosted-git-info@^2.1.4":
-  version "2.8.9"
+  "integrity" "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
-  resolved "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
+  "resolved" "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
-  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+  "version" "2.8.9"
-
+
-hpack.js@^2.1.6:
+"hpack.js@^2.1.6":
-  version "2.1.6"
+  "integrity" "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ=="
-  resolved "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz"
+  "resolved" "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz"
-  integrity sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==
+  "version" "2.1.6"
-  dependencies:
+  dependencies:
-    inherits "^2.0.1"
+    "inherits" "^2.0.1"
-    obuf "^1.0.0"
+    "obuf" "^1.0.0"
-    readable-stream "^2.0.1"
+    "readable-stream" "^2.0.1"
-    wbuf "^1.1.0"
+    "wbuf" "^1.1.0"
-
+
-hsl-regex@^1.0.0:
+"hsl-regex@^1.0.0":
-  version "1.0.0"
+  "integrity" "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A=="
-  resolved "https://registry.npmmirror.com/hsl-regex/-/hsl-regex-1.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/hsl-regex/-/hsl-regex-1.0.0.tgz"
-  integrity sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==
+  "version" "1.0.0"
-
+
-hsla-regex@^1.0.0:
+"hsla-regex@^1.0.0":
-  version "1.0.0"
+  "integrity" "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA=="
-  resolved "https://registry.npmmirror.com/hsla-regex/-/hsla-regex-1.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/hsla-regex/-/hsla-regex-1.0.0.tgz"
-  integrity sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==
+  "version" "1.0.0"
-
+
-html-entities@^1.3.1:
+"html-entities@^1.3.1":
-  version "1.4.0"
+  "integrity" "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA=="
-  resolved "https://registry.npmmirror.com/html-entities/-/html-entities-1.4.0.tgz"
+  "resolved" "https://registry.npmmirror.com/html-entities/-/html-entities-1.4.0.tgz"
-  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
+  "version" "1.4.0"
-
+
-html-minifier@^3.2.3:
+"html-minifier@^3.2.3":
-  version "3.5.21"
+  "integrity" "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA=="
-  resolved "https://registry.npmmirror.com/html-minifier/-/html-minifier-3.5.21.tgz"
+  "resolved" "https://registry.npmmirror.com/html-minifier/-/html-minifier-3.5.21.tgz"
-  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  "version" "3.5.21"
-  dependencies:
+  dependencies:
-    camel-case "3.0.x"
+    "camel-case" "3.0.x"
-    clean-css "4.2.x"
+    "clean-css" "4.2.x"
-    commander "2.17.x"
+    "commander" "2.17.x"
-    he "1.2.x"
+    "he" "1.2.x"
-    param-case "2.1.x"
+    "param-case" "2.1.x"
-    relateurl "0.2.x"
+    "relateurl" "0.2.x"
-    uglify-js "3.4.x"
+    "uglify-js" "3.4.x"
-
+
-html-tags@^2.0.0:
+"html-tags@^2.0.0":
-  version "2.0.0"
+  "integrity" "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g=="
-  resolved "https://registry.npmmirror.com/html-tags/-/html-tags-2.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/html-tags/-/html-tags-2.0.0.tgz"
-  integrity sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==
+  "version" "2.0.0"
-
+
-html-tags@^3.1.0:
+"html-tags@^3.1.0":
-  version "3.3.1"
+  "integrity" "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ=="
-  resolved "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz"
+  "resolved" "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz"
-  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+  "version" "3.3.1"
-
+
-html-webpack-plugin@^3.2.0, html-webpack-plugin@>=2.26.0:
+"html-webpack-plugin@^3.2.0", "html-webpack-plugin@>=2.26.0":
-  version "3.2.0"
+  "integrity" "sha512-Br4ifmjQojUP4EmHnRBoUIYcZ9J7M4bTMcm7u6xoIAIuq2Nte4TzXX0533owvkQKQD1WeMTTTyD4Ni4QKxS0Bg=="
-  resolved "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz"
+  "resolved" "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz"
-  integrity sha512-Br4ifmjQojUP4EmHnRBoUIYcZ9J7M4bTMcm7u6xoIAIuq2Nte4TzXX0533owvkQKQD1WeMTTTyD4Ni4QKxS0Bg==
+  "version" "3.2.0"
-  dependencies:
+  dependencies:
-    html-minifier "^3.2.3"
+    "html-minifier" "^3.2.3"
-    loader-utils "^0.2.16"
+    "loader-utils" "^0.2.16"
-    lodash "^4.17.3"
+    "lodash" "^4.17.3"
-    pretty-error "^2.0.2"
+    "pretty-error" "^2.0.2"
-    tapable "^1.0.0"
+    "tapable" "^1.0.0"
-    toposort "^1.0.0"
+    "toposort" "^1.0.0"
-    util.promisify "1.0.0"
+    "util.promisify" "1.0.0"
-
+
-htmlparser2@^6.1.0:
+"htmlparser2@^6.1.0":
-  version "6.1.0"
+  "integrity" "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A=="
-  resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz"
+  "resolved" "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz"
-  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  "version" "6.1.0"
-  dependencies:
+  dependencies:
-    domelementtype "^2.0.1"
+    "domelementtype" "^2.0.1"
-    domhandler "^4.0.0"
+    "domhandler" "^4.0.0"
-    domutils "^2.5.2"
+    "domutils" "^2.5.2"
-    entities "^2.0.0"
+    "entities" "^2.0.0"
-
+
-http-deceiver@^1.2.7:
+"http-deceiver@^1.2.7":
-  version "1.2.7"
+  "integrity" "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
-  resolved "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz"
+  "resolved" "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz"
-  integrity sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==
+  "version" "1.2.7"
-
+
-http-errors@~1.6.2:
+"http-errors@~1.6.2":
-  version "1.6.3"
+  "integrity" "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A=="
-  resolved "https://registry.npmmirror.com/http-errors/-/http-errors-1.6.3.tgz"
+  "resolved" "https://registry.npmmirror.com/http-errors/-/http-errors-1.6.3.tgz"
-  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
+  "version" "1.6.3"
-  dependencies:
+  dependencies:
-    depd "~1.1.2"
+    "depd" "~1.1.2"
-    inherits "2.0.3"
+    "inherits" "2.0.3"
-    setprototypeof "1.1.0"
+    "setprototypeof" "1.1.0"
-    statuses ">= 1.4.0 < 2"
+    "statuses" ">= 1.4.0 < 2"
-
+
-http-errors@2.0.0:
+"http-errors@2.0.0":
-  version "2.0.0"
+  "integrity" "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="
-  resolved "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz"
+  "resolved" "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz"
-  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  "version" "2.0.0"
-  dependencies:
+  dependencies:
-    depd "2.0.0"
+    "depd" "2.0.0"
-    inherits "2.0.4"
+    "inherits" "2.0.4"
-    setprototypeof "1.2.0"
+    "setprototypeof" "1.2.0"
-    statuses "2.0.1"
+    "statuses" "2.0.1"
-    toidentifier "1.0.1"
+    "toidentifier" "1.0.1"
-
+
-http-parser-js@>=0.5.1:
+"http-parser-js@>=0.5.1":
-  version "0.5.8"
+  "integrity" "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
-  resolved "https://registry.npmmirror.com/http-parser-js/-/http-parser-js-0.5.8.tgz"
+  "resolved" "https://registry.npmmirror.com/http-parser-js/-/http-parser-js-0.5.8.tgz"
-  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
+  "version" "0.5.8"
-
+
-http-proxy-middleware@^1.0.0:
+"http-proxy-middleware@^1.0.0":
-  version "1.3.1"
+  "integrity" "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg=="
-  resolved "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz"
+  "resolved" "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz"
-  integrity sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==
+  "version" "1.3.1"
   dependencies:
     "@types/http-proxy" "^1.17.5"
     http-proxy "^1.18.1"