0906问题列表修复（隐藏默认筛选、项目管理添加经营状态）

package.json

@@ -37,10 +37,12 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "amfe-flexible": "^2.2.1",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
+    "echarts-gl": "^2.0.9",
     "element-ui": "2.15.13",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
@@ -51,6 +53,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "jspdf": "^2.5.1",
     "nprogress": "0.2.0",
+    "postcss-pxtorem": "^5.1.1",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/App.vue

@@ -11,14 +11,18 @@ import ThemePicker from "@/components/ThemePicker";
 export default {
   name: "App",
   components: { ThemePicker },
-    metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
-    }
+  metaInfo() {
+    return {
+      title:
+        this.$store.state.settings.dynamicTitle &&
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
 };
 </script>
 <style scoped>

src/components/RightToolbar/index.vue

 <template>
   <div class="top-right-btn" :style="style">
     <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="showSearch ? '隐藏搜索' : '显示搜索'"
+        placement="top"
+        v-if="search"
+      >
+        <el-button
+          size="mini"
+          circle
+          icon="el-icon-search"
+          @click="toggleSearch()"
+        />
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+        <el-button
+          size="mini"
+          circle
+          icon="el-icon-refresh"
+          @click="refresh()"
+        />
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="显隐列"
+        placement="top"
+        v-if="columns"
+      >
+        <el-button
+          size="mini"
+          circle
+          icon="el-icon-menu"
+          @click="showColumn()"
+        />
       </el-tooltip>
     </el-row>
     <el-dialog :title="title" :visible.sync="open" append-to-body>
@@ -34,10 +61,11 @@ export default {
       open: false,
     };
   },
+
   props: {
     showSearch: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     columns: {
       type: Array,
@@ -58,7 +86,7 @@ export default {
         ret.marginRight = `${this.gutter / 2}px`;
       }
       return ret;
-    }
+    },
   },
   created() {
     // 显隐列初始默认隐藏列
@@ -68,6 +96,10 @@ export default {
       }
     }
   },
+  mounted() {
+    // 默认关闭搜索
+    this.$emit("update:showSearch", false);
+  },
   methods: {
     // 搜索
     toggleSearch() {

src/main.js

@@ -13,6 +13,7 @@ import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+import "amfe-flexible"
 
 import './assets/icons' // icon
 import './permission' // permission control

src/router/index.js

@@ -30,6 +30,11 @@ import Layout from "@/layout";
 
 // 公共路由
 export const constantRoutes = [
+  {
+    path: "/map",
+    component: () => import('@/views/map.vue'),
+    hidden: true,
+  },
   {
     path: "/redirect",
     component: Layout,
@@ -41,6 +46,7 @@ export const constantRoutes = [
       },
     ],
   },
+
   {
     path: "/login",
     component: () => import("@/views/login"),

src/views/ledger/project/index.vue

@@ -78,6 +78,7 @@
           />
         </el-select>
       </el-form-item>
+
       <el-form-item>
         <el-button
           type="primary"
@@ -206,7 +207,7 @@
 
     <!-- 添加或修改基础数据-项目对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="84px">
         <el-form-item label="项目名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入项目名称" />
         </el-form-item>
@@ -247,6 +248,15 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="经营状态" prop="businessStatus">
+          <el-radio-group v-model="form.businessStatus">
+            <el-radio label="自营">自营</el-radio>
+            <el-radio label="租赁">租赁</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否为物业" prop="propertyManagement">
+          <el-checkbox v-model="form.propertyManagement">备选项</el-checkbox>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -316,7 +326,9 @@ export default {
         status: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        businessStatus: "",
+      },
       // 表单校验
       rules: {},
     };

src/views/map.vue

+<template>
+  <div class="map-layout">
+    <div class="map-header">
+      <div class="map-header-center">
+        <div class="map-header-center-title">融通地产危险源辨识系统</div>
+        <div class="map-header-center-tip">
+          Rongtong Real Estate Hazard Identification System
+        </div>
+      </div>
+    </div>
+    <div class="map-content">
+      <div class="map-content-left">
+        <map-item-container title="评估数据统计">
+          <div ref="leftTop" style="width: 100%; height: 100%"></div>
+        </map-item-container>
+        <map-item-container title="评估数据统计">
+          <mapTable />
+        </map-item-container>
+        <map-item-container title="评估数据统计">
+          <echartMap />
+        </map-item-container>
+      </div>
+      <div ref="myEchart" class="echart-instance"></div>
+      <div class="map-content-right">
+        <map-item-container title="事故类型统计">
+          <div
+            v-for="item in 10"
+            :key="item"
+            :style="randomCircle()"
+            class="map-circle-item"
+          ></div>
+        </map-item-container>
+      </div>
+    </div>
+
+    <div class="map-footer"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import axios from "axios";
+import echartMap from "./pie.vue";
+import echartMap2 from "./pie2.vue";
+import { mapTable, mapItemContainer } from "@/views/map/index.js";
+export default {
+  name: "echarts",
+  components: {
+    echartMap,
+    echartMap2,
+    mapTable,
+    mapItemContainer,
+  },
+  data() {
+    return {
+      name: 100000,
+      myMap: null,
+      mapData: [],
+    };
+  },
+  mounted() {
+    this.myMap = echarts.init(this.$refs.myEchart);
+    this.initMap();
+    this.initListeners();
+    this.initEcharts();
+  },
+  methods: {
+    randomCircle() {
+      const w = parseInt(Math.random() * 160 - 100);
+      let r = Math.floor(Math.random() * 256); //0-255.999999
+      let g = Math.floor(Math.random() * 256);
+      let b = Math.floor(Math.random() * 256);
+      return {
+        width: w + "px",
+        height: w + "px",
+        backgroundColor: `rgba(${r},${g},${b},0.4)`,
+      };
+    },
+    initMap(code = 100000) {
+      if (code != this.name) {
+        this.myMap.clear();
+      }
+      this.name = code == 100000 ? "china" : code + "";
+      axios
+        .get(
+          `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
+        )
+        .then((geoJson) => {
+          if (!geoJson.data) {
+            return;
+          }
+          echarts.registerMap(this.name, { geoJSON: geoJson.data });
+          this.mapData = geoJson.data.features;
+          this.myMap.setOption(
+            {
+              series: [
+                {
+                  type: "map3D",
+                  boxWidth: 85,
+                  map: this.name,
+                  regionHeight: 4,
+                  itemStyle: {},
+                  viewControl: {
+                    alpha: 60,
+                  },
+                  label: {
+                    show: true,
+                    formatter: (params) => {
+                      return params.name + " ";
+                    },
+                    textStyle: {
+                      color: "#2cb0e2",
+                      fontSize: 10,
+                    },
+                  },
+                  itemStyle: {
+                    borderWidth: 2,
+                    borderColor: "#2cb0e2",
+                    color: "rgba(0, 0, 0, 0.3)",
+                    // opacity: 0.6,
+                    shadowColor: "rgba(0, 0, 0, 1)",
+                    shadowBlur: 1,
+                  },
+                },
+              ],
+            },
+            {
+              notMerge: true,
+            }
+          );
+        });
+    },
+    initListeners() {
+      const _this = this;
+      this.myMap.on("click", "series.map3D", function (params) {
+        const selectData = _this.mapData.find(
+          (x) => x.properties.name == params.name
+        );
+        if (selectData) {
+          _this.initMap(selectData.properties.adcode);
+        }
+      });
+    },
+    initEcharts() {
+      this.myLeft = echarts.init(this.$refs.leftTop);
+      this.myLeft.setOption({
+        series: [
+          {
+            name: "Pressure",
+            type: "gauge",
+            progress: {
+              show: true,
+            },
+            detail: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
+              width: 1,
+              length: "80%",
+              offsetCenter: [0, "8%"],
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 8,
+              color: "green",
+              itemStyle: {
+                borderWidth: 2,
+              },
+            },
+            data: [
+              {
+                value: 50,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    resetEcharts() {},
+    map2d() {
+      this.myMap.setOption({
+        geo: {
+          map: "china",
+          label: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: "#2cb0e2",
+            color: "#1f7fad",
+            color: "rgba(0, 0, 0, 0.3)",
+            opacity: 0.6,
+            shadowColor: "rgba(0, 0, 0, 1)",
+            shadowBlur: 1,
+          },
+          emphasis: {
+            label: {
+              show: true,
+              distance: 10,
+              formatter: "{a}",
+              color: "#fff",
+              fontSize: 10,
+            },
+            itemStyle: {
+              borderWidth: 2,
+              borderColor: "#5ad8ff",
+              color: "rgb(51 203 254)",
+              opacity: 0.8,
+            },
+          },
+          postEffect: {
+            enable: true,
+            bloom: {
+              enable: false,
+            },
+          },
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.map-layout {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  background: url("../assets/map/bg.png") no-repeat;
+  background-size: 100% 100%;
+
+  .map-header {
+    height: 83px;
+    z-index: 10;
+    color: #fff;
+    padding: 5px 16px;
+    background: url("../assets/map/top.png") no-repeat;
+    background-size: 100% 100%;
+    box-shadow: border-box;
+    &-center {
+      text-align: center;
+      &-title {
+        text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
+        font-weight: 700;
+        font-size: 24px;
+      }
+      &-tip {
+        font-family: "微软雅黑", sans-serif;
+        font-size: 16px;
+        color: rgba(215, 215, 215, 0.4);
+      }
+    }
+  }
+  .map-footer {
+    background: url("../assets/map/bottom.png") no-repeat;
+    background-size: 100% 100%;
+    height: 44px;
+  }
+  .map-content {
+    width: 100%;
+    height: calc(100% - 128px);
+    &-left,
+    &-right {
+      width: 25%;
+      height: 100%;
+      float: left;
+      position: relative;
+    }
+    &-left::after,
+    &-right::after {
+      content: "";
+      width: 44px;
+      height: 84%;
+      background: url("../assets/map/hud-left.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      z-index: 10;
+      transform: translateY(-52%);
+    }
+    &-right::after {
+      background-image: url("../assets/map/hud-right.png");
+      position: absolute;
+      right: 0;
+      left: auto;
+    }
+  }
+
+  .echart-instance {
+    width: 50%;
+    height: 100%;
+    margin: 0 auto;
+    float: left;
+  }
+  .map-circle-item {
+    border-radius: 50%;
+  }
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/map/index.js

+export { default as mapItemContainer } from './map-item-container.vue';
+export { default as mapTable } from './map-table.vue';
\ No newline at end of file

src/views/map/map-item-container.vue

+<template>
+  <div class="map-content-item">
+    <div class="map-content-title">{{ title }}</div>
+    <div class="map-content-inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.map-content-item {
+  width: 100%;
+  height: 35%;
+  overflow: hidden;
+  padding-left: 30px;
+  .map-content-inner {
+    height: 100%;
+    padding: 10px;
+  }
+
+  .map-content-title {
+    width: 100%;
+    height: 40px;
+    background: url("../../assets/map/title.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    color: #fff;
+    padding-left: 64px;
+    font-weight: 500;
+  }
+}
+</style>
\ No newline at end of file

src/views/map/map-table.vue

+<template>
+  <div class="map-table-container" ref="mapTableContainer">
+    <ul class="map-table-list" ref="mapTableList">
+      <li class="map-table-list-item" v-for="item in 10" :key="item">
+        <div class="serial">{{ item }}</div>
+        <div class="name">高德大厦</div>
+        <div class="province">广东区域</div>
+        <div class="city">珠海市</div>
+        <div class="num">22</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      mapTableListHeight: 0,
+      mapTableContainerHeight: 0,
+      h: 0,
+    };
+  },
+  mounted() {
+    this.getHeight();
+    this.compareH();
+  },
+  methods: {
+    // 获取map-table-list的高度
+    getHeight() {
+      // 获取map-table-list的高度
+      let mapTableContainer = this.$refs.mapTableContainer;
+      this.mapTableContainerHeight = mapTableContainer.offsetHeight;
+    },
+    // 比较map-table-list高度
+    compareH() {
+      let mapTableList = this.$refs.mapTableList;
+      this.mapTableListHeight = mapTableList.offsetHeight;
+      if (this.mapTableContainerHeight < this.mapTableListHeight) {
+        console.log(this.mapTableContainerHeight, this.mapTableListHeight);
+        // 添加定时器滚动map-table-list-item
+        setInterval(() => {
+          this.h -= 25;
+          if (Math.abs(this.h) > this.mapTableListHeight) {
+            this.h = 0;
+          }
+          this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
+        }, 1500);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.map-table-container {
+  height: 100%;
+  overflow: auto;
+}
+.map-table-list {
+  transition: all 1s;
+  &-item {
+    display: flex;
+    height: 30px;
+    margin-bottom: 5px;
+    line-height: 30px;
+    color: #fff;
+    text-align: center;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 102, 153, 1) 0%,
+      rgba(0, 102, 153, 1) 17%,
+      rgba(9, 60, 106, 1) 100%,
+      rgba(9, 60, 106, 1) 100%
+    );
+    .serial {
+      width: 40px;
+      height: 100%;
+      position: relative;
+      text-align: center;
+      background: #2a719d;
+      color: #fff;
+      font-weight: bold;
+      font-size: 16px;
+      &::after {
+        position: absolute;
+        right: -14px;
+        top: 0;
+        content: "";
+        display: block;
+        border-top: 16px solid transparent;
+        border-bottom: 16px solid transparent;
+        border-left: 16px solid #2a719d;
+      }
+    }
+    .name {
+      width: 30%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-left: 18px;
+    }
+    .province,
+    .city,
+    .num {
+      width: 20%;
+    }
+    .province {
+      color: #02a7f0;
+    }
+    // #FFEA00
+    .city {
+      color: #ffea00;
+    }
+    .num {
+      color: rgba(217, 0, 27, 0.9);
+      font-size: 12px;
+    }
+  }
+  &-item:hover {
+    background: rgba(255, 166, 0, 0.802);
+    color: #000;
+    .province,
+    .city {
+      color: #000;
+    }
+    .serial {
+      background: linear-gradient(#ff6048 0%, #ff7346 100%);
+      &::after {
+        border-left-color: #ff7346;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/pie2.vue

+<template>
+  <div ref="myEchart" style="width: 100%; height: 180px"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+export default {
+  data() {
+    return {
+      pieChart: [
+        {
+          name: "a",
+          value: 25,
+          itemStyle: {
+            color: "#00d8ff",
+          },
+        },
+        {
+          name: "b",
+          value: 5,
+          itemStyle: {
+            color: "#018ef1",
+          },
+        },
+        {
+          name: "c",
+          value: 4,
+          itemStyle: {
+            color: "#f8bc87",
+          },
+        },
+        {
+          name: "d",
+          value: 3,
+          itemStyle: {
+            color: "#ffa130",
+          },
+        },
+        {
+          name: "e",
+          value: 2,
+          itemStyle: {
+            color: "#c23531",
+          },
+        },
+        {
+          name: "f",
+          value: 1,
+          itemStyle: {
+            color: "#fd5d48",
+          },
+        },
+      ],
+    };
+  },
+  mounted() {
+    // this.getPie3D(this.pieChart, 0.59);
+    this.myMap = echarts.init(this.$refs.myEchart);
+    this.myMap.setOption(this.getPie3D(this.pieChart, 0.71));
+  },
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2;
+
+      let startRadian = startRatio * Math.PI * 2;
+      let endRadian = endRatio * Math.PI * 2;
+      let midRadian = midRatio * Math.PI * 2;
+
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== "undefined" ? k : 1 / 3;
+
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1;
+
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u);
+          }
+          return Math.sin(v) > 0 ? 1 : -1;
+        },
+      };
+    },
+
+    // 生成模拟 3D 饼图的配置项
+    getPie3D(pieData, internalDiameterRatio) {
+      let series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      let legendData = [];
+      let k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value;
+
+        let seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+
+        if (typeof pieData[i].itemStyle != "undefined") {
+          let itemStyle = {};
+
+          typeof pieData[i].itemStyle.color != "undefined"
+            ? (itemStyle.color = pieData[i].itemStyle.color)
+            : null;
+          typeof pieData[i].itemStyle.opacity != "undefined"
+            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+            : null;
+
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value;
+
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          true,
+          false,
+          1
+        );
+
+        startValue = endValue;
+
+        legendData.push(series[i].name);
+      }
+
+      // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+      series.push({
+        name: "mouseoutSeries",
+        type: "surface",
+        parametric: true,
+        wireframe: {
+          show: false,
+        },
+        itemStyle: {
+          opacity: 1,
+          color: "rgba(18,236,252,.5)",
+        },
+        parametricEquation: {
+          u: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+          v: {
+            min: 0,
+            max: Math.PI,
+            step: Math.PI / 1.4,
+          },
+          x: function (u, v) {
+            return Math.sin(v) * Math.sin(u) + Math.sin(u);
+          },
+          y: function (u, v) {
+            return Math.sin(v) * Math.cos(u) + Math.cos(u);
+          },
+          z: function (u, v) {
+            return Math.cos(v) > 0 ? 0.1 : -0.1;
+          },
+        },
+      });
+
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        //animation: false,
+        legend: {
+          show: true,
+          data: legendData,
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (params.seriesName !== "mouseoutSeries") {
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${option.series[params.seriesIndex].pieData.value}`;
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1.3,
+          max: 1.3,
+        },
+        yAxis3D: {
+          min: -1.3,
+          max: 1.3,
+        },
+        zAxis3D: {
+          min: -1.3,
+          max: 1.3,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 10,
+          // top: '30%',
+          left: "0",
+          bottom: "50%",
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 20,
+            // beta: 40,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: true,
+            //   autoRotateSpeed: 5,
+            //   autoRotateAfterStill: 10
+          },
+        },
+        series: series,
+      };
+      return option;
+    },
+  },
+  // 传入数据生成 option
+};
+</script>
+
+<style lang="scss" scoped></style>

vue.config.js

 "use strict";
 const path = require("path");
+const pxtorem = require('postcss-pxtorem')
 
 function resolve(dir) {
   return path.join(__dirname, dir);
@@ -35,8 +36,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: "http://192.168.10.137:8080/",
-        // target: `http://192.168.4.232:8080`, //服务器地址
+        // target: "http://192.168.10.137:8080/",
+        target: `http://192.168.4.232:8080`, //服务器地址
         // target: `http://192.168.15.230:8081`, //晓晋本地地址
         changeOrigin: true,
         pathRewrite: {
@@ -51,6 +52,15 @@ module.exports = {
       sass: {
         sassOptions: { outputStyle: "expanded" },
       },
+      postcss: {
+        plugins: [
+          pxtorem({
+            rootValue: 192,//这个尺寸可以根据自己的图去配置，这里配置的是宽度375的图（如果用了vant插件）
+            propList: ['*'],
+            exclude: /(element-ui|node_modules)/
+          })
+        ]
+      }
     },
   },
   configureWebpack: {
@@ -126,10 +136,10 @@ module.exports = {
       });
 
       config.optimization.runtimeChunk("single"),
-        {
-          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
-          to: "./", //到根目录下
-        };
+      {
+        from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+        to: "./", //到根目录下
+      };
     });
   },
 };