大屏企业员工模块

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/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/utils/request.js

@@ -7,8 +7,8 @@ const request = axios.create({
   //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://192.168.0.188:8888/zhapi',
-  //baseURL: 'http://121.41.91.94:12002/zhapi',
+  baseURL: 'http://121.41.91.94:12002/zhapi',
-  baseURL: `http://${window.location.host}/zhapi`,
+  //baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
 })

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/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) /
@@ -187,7 +188,7 @@ export default {
   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 +212,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 +226,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 +241,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 +252,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 +263,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/employee.vue

@@ -0,0 +1,335 @@
+<!-- 企业员工 -->
+<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_list[0].number }}
+          </div>
+          <div class="person_type_num_item">
+            {{ this.person_list[1].number }}
+          </div>
+          <div class="person_type_num_item">
+            {{ this.person_list[2].number }}
+          </div>
+          <div class="person_type_num_item">
+            {{ this.person_list[3].number }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import HighCharts from "highcharts";
+import { staffStatistics } from "@/api/safetyIndex";
+export default {
+  name: "Employee",
+  data() {
+    return {
+      person_sum: "", // 员工总数
+      person_list: [], // 员工类型数量
+      option_data: [],
+      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();
+  },
+  // 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;
+        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);
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.employee_box {
+  margin-top: 10px;
+  margin-left: 20px;
+  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;
+        border: 0.1px solid #495e70;
+        .person_type_num_item {
+          width: 3vw;
+          height: 4vh;
+          color: #d9e7ff;
+          text-align: center;
+          line-height: 4vh;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/compositeIndex/index.vue

@@ -3,23 +3,26 @@
   <div>
     <!-- 最底层地图框 -->
     <div class="map_box">
-      <!-- 企业总量 -->
+      <!-- 园区企业 -->
       <CompanyNum ref="companyNum"></CompanyNum>
+      <!-- 企业员工 -->
+      <Employee ref="employee"></Employee>
     </div>
   </div>
 </template>
 <script>
 import CompanyNum from "./components/companyNum";
+import Employee from "./components/employee";
 export default {
   name: "CompositeIndex",
   components: {
     CompanyNum,
+    Employee,
   },
   data() {
     return {};
   },
-  methods: {
+  methods: {},
-  },
 };
 </script>
 <style lang="less" scoped>

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>

yarn.lock

@@ -4740,7 +4740,7 @@
   "resolved" "https://registry.npmjs.org/highcharts-vue/-/highcharts-vue-1.4.3.tgz"
   "version" "1.4.3"
 
-"highcharts@>=5.0.0":
+"highcharts@^11.1.0", "highcharts@>=5.0.0":
   "integrity" "sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g=="
   "resolved" "https://registry.npmjs.org/highcharts/-/highcharts-11.1.0.tgz"
   "version" "11.1.0"