~ganjingjun/jiaotongdaxue.git

parent: 36e04428 | patch | commit | ignore whitespace

Gary Gu

4 days ago e7c05e5d214a149bdaba12f2e84ad0e8136f8726

feat: 设备状态接口对接

2 files modified

	src/views/EquipmentView.vue	360 ●●●●● patch \| view \| raw \| blame \| history
	vite.config.js	209 ●●●●● patch \| view \| raw \| blame \| history

 src/views/EquipmentView.vue

@@ -49,7 +49,7 @@
        >
        </div>
        <div class="equipment-status" :style="sectionStyle">
          <el-select v-model="equipmentSelected" placeholder="请选择">
          <el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div
@@ -171,6 +171,7 @@

<script>
  import V2Echarts from "@/components/V2Echarts.vue";
  import { HomeAPI } from "@/api/home";
  export default {
    name: "EquipmentView",
    components: {
@@ -184,44 +185,23 @@
    },
    data() {
      return {
        equipmentSelected: "",
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        deviceSelected: "",
        options: [],
        backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
        titleImage: new URL("@/assets/images/titles/renyuan.png", import.meta.url).href,
        middleImage: new URL("@/assets/images/titles/shebei.png", import.meta.url).href,
        bottomImage: new URL("@/assets/images/titles/huanjing.png", import.meta.url).href,
        bgImage: new URL("@/assets/images/titles/title_second.png", import.meta.url).href,
        enviorImage: new URL("@/assets/images/titles/wendu_bg.png", import.meta.url).href,
        deviceOnline: 1,
        deviceTotal: 27,
        deviceOnline: 0,
        deviceTotal: 0,
        currentTab: "塔吊监控",
        circleItems: [
          {
            id: "zaixianChartBox",
            name: "总在线",
            value: 22,
            percentage: 81.5,
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
@@ -308,8 +288,8 @@
          {
            id: "lixianChartBox",
            name: "总离线",
            value: 5,
            percentage: 33,
            value: 0,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
@@ -397,7 +377,7 @@
            id: "baojingChartBox",
            name: "总报警",
            value: 0,
            percentage: 20,
            percentage: 0,
            options: {
              tooltip: {
                trigger: "item",
@@ -507,12 +487,330 @@
        handler(newVal) {
          console.log("设备界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
          this.getDeviceTypes(newVal);
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
    },
    mounted() {},
    methods: {
      /**
       * 处理设备选择变化
       * @param val
       */
      handleSelectChange(val) {
        this.getDeviceState(val);
      },
      /**
       * 获取设备类型
       * @param bindId
       */
      getDeviceTypes(bindId) {
        const params = {
          bindId,
        };
        HomeAPI.GetDeviceType(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result.length > 0) {
              this.options = result.map((item) => ({
                value: item.Id,
                label: item.Name,
              }));
              this.deviceSelected = this.options[0].value; // 默认选中第一个项目
              this.getDeviceState(this.deviceSelected);
            } else {
              this.options = [];
            }
          }
        });
      },
      /**
       * 获取设备状态
       * @param deviceTypeId
       */
      getDeviceState(deviceTypeId) {
        const params = {
          bindId: this.selectedId || "",
          deviceTypeId,
        };
        HomeAPI.GetJSCDeviceState(params).then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result) {
              this.deviceOnline = result.TotalOnlineNumber;
              this.deviceTotal = result.TotalOnlineNumber + result.TotalOfflineNumber;
              this.circleItems = [
                {
                  id: "zaixianChartBox",
                  name: "总在线",
                  value: result.TotalOnlineNumber,
                  percentage: result.TotalOnlineRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalOnlineRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalOnlineRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
                {
                  id: "lixianChartBox",
                  name: "总离线",
                  value: result.TotalOfflineNumber,
                  percentage: result.TotalOfflineRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalOfflineRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalOfflineRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
                {
                  id: "baojingChartBox",
                  name: "总报警",
                  value: result.TotalAlarmsNumber,
                  percentage: result.TotalAlarmsRate,
                  options: {
                    tooltip: {
                      trigger: "item",
                      show: false,
                    },
                    legend: {
                      itemWidth: 8,
                      itemHeight: 8,
                      top: "5%",
                      left: "center",
                      show: false,
                    },
                    series: [
                      {
                        type: "pie",
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 5,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: 100,
                            name: "",
                            itemStyle: {
                              color: "#234E84",
                            },
                          },
                        ],
                      },
                      {
                        type: "pie",
                        radius: ["70%", "100%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        itemStyle: {
                          normal: {
                            label: {
                              show: false,
                            },
                            labelLine: {
                              show: false,
                            },
                            shadowBlur: 40,
                            borderWidth: 10,
                            shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
                          },
                        },
                        data: [
                          {
                            value: result.TotalAlarmsRate,
                            name: "",
                            itemStyle: {
                              color: "#00FFFF",
                            },
                          },
                          {
                            value: 100 - result.TotalAlarmsRate,
                            name: "",
                            itemStyle: {
                              color: "transparent",
                            },
                          },
                        ],
                      },
                    ],
                  },
                },
              ];
            }
          }
        });
      },
      handleControlBtnClick(tab) {
        this.currentTab = tab;
      },

 vite.config.js

@@ -13,111 +13,118 @@

import PluginForViteVue2 from "@vitejs/plugin-vue2";
// 屏幕适配
const px2rem = require("postcss-px2rem")
    // 配置基本大小
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
    //配rem基准值 基准大小 baseSize
    remUnit: 192, // 设稿尺1920/10
})
  //配rem基准值 基准大小 baseSize
  remUnit: 192, // 设稿尺1920/10
});

export default defineConfig(({ mode }) => {
    return {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, './src'),
                "@css": path.resolve("./src/assets/css"),
                'worker-loader': require.resolve('worker-loader'),
            },
  return {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "@css": path.resolve("./src/assets/css"),
        "worker-loader": require.resolve("worker-loader"),
      },
    },
    worker: {
      // 例如，设置一个worker的入口文件
      // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
      // entry: '/path/to/worker/entry.js',
      options: { inline: true, name: "workerName.[hash].js" },
    },
    plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: "@import '@css/sass.scss';",
        },
        worker: {
            // 例如，设置一个worker的入口文件
            // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
            // entry: '/path/to/worker/entry.js',
            options: { inline: true, name: 'workerName.[hash].js' }
      },
      loaderOptions: {
        postcss: {
          plugins: [postcss],
        },
        plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: "@import '@css/sass.scss';",
                },
            },
            loaderOptions: {
                postcss: {
                    plugins: [postcss]
                }
      },
    },
    server: {
      proxy: {
        "^/api/": {
          // target: "http://47.117.124.20:2002/",
          target: "http://101.201.155.10:4011/",
          rewrite: (path) => path.replace(/^\/api\//, ""),
          changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
        },
      },
      port: 8081,
      host: "0.0.0.0",
      cors: true,
      open: true,
    },
    esbuild: {
      treeShaking: true,
      drop: mode === "production" ? ["console", "debugger"] : [],
    },
    chainWebpack(config) {
      config.module
        .rule("css")
        .test(/\.css$/)
        .oneOf("vue")
        .use("px2rem-loader")
        .loader("px2rem-loader")
        .options({
          remUnit: 192,
        })
        .end();
    },
    build: {
      minify: "esbuild",
      chunkSizeWarningLimit: 500, //kbs
      rollupOptions: {
        output: {
          chunkFileNames: "assets/js/[name]-[hash].js",
          entryFileNames: "assets/js/[name]-[hash].js",
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
          // manualChunks(id) {
          //   if (id.includes("/node_modules/")) {
          //     const name = id.split("/node_modules/")[1].split("/")[0];
          //     for (const key of Object.keys(ChunksMap)) {
          //       if (ChunksMap[key].includes(name)) {
          //         return key;
          //       }
          //     }
          //     return "vendor";
          //   }
          // },

          // eslint-disable-next-line no-unused-vars
          // manualChunks(id, { getModuleInfo, getModuleIds }) {
          //   const getShouldBeVendor = splitVendorChunk();
          //   const chunkName = getShouldBeVendor(id, { getModuleInfo });
          //   if (chunkName === "vendor") {
          //     //1 在node_modules文件夹下
          //     //2 不是css类请求
          //     //3 是被静态引入的
          //     return chunkName;
          //   } else if (id.includes("src")) {
          //     const moduleInfo = getModuleInfo(id);
          //     // console.log(id, "importers", moduleInfo.importers);
          //     // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
          //     if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
          //       return "manifest";
          //     }
          //   }
          // },

          // eslint-disable-next-line no-unused-vars
          manualChunks(id) {
            if (id.includes("/node_modules/")) {
              return id.split("/node_modules/")[1].split("/")[0];
            }
          },
        },
        server: {
            proxy: {
                "^/api/": {
                    // target: "http://47.117.124.20:2002/",
                    target: "http://101.201.155.10:4011/",
                    rewrite: (path) => path.replace(/^\/api\//, ""),
                    changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
                },
            },
            port: 3000,
            host: "0.0.0.0",
            cors: true,
            open: true,
        },
        esbuild: {
            treeShaking: true,
            drop: mode === "production" ? ["console", "debugger"] : [],
        },
        chainWebpack(config) {
            config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({
                remUnit: 192,
            }).end();
        },
        build: {
            minify: "esbuild",
            chunkSizeWarningLimit: 500, //kbs
            rollupOptions: {
                output: {
                    chunkFileNames: "assets/js/[name]-[hash].js",
                    entryFileNames: "assets/js/[name]-[hash].js",
                    assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
                    // manualChunks(id) {
                    //   if (id.includes("/node_modules/")) {
                    //     const name = id.split("/node_modules/")[1].split("/")[0];
                    //     for (const key of Object.keys(ChunksMap)) {
                    //       if (ChunksMap[key].includes(name)) {
                    //         return key;
                    //       }
                    //     }
                    //     return "vendor";
                    //   }
                    // },

                    // eslint-disable-next-line no-unused-vars
                    // manualChunks(id, { getModuleInfo, getModuleIds }) {
                    //   const getShouldBeVendor = splitVendorChunk();
                    //   const chunkName = getShouldBeVendor(id, { getModuleInfo });
                    //   if (chunkName === "vendor") {
                    //     //1 在node_modules文件夹下
                    //     //2 不是css类请求
                    //     //3 是被静态引入的
                    //     return chunkName;
                    //   } else if (id.includes("src")) {
                    //     const moduleInfo = getModuleInfo(id);
                    //     // console.log(id, "importers", moduleInfo.importers);
                    //     // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
                    //     if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
                    //       return "manifest";
                    //     }
                    //   }
                    // },

                    // eslint-disable-next-line no-unused-vars
                    manualChunks(id) {
                        if (id.includes("/node_modules/")) {
                            return id.split("/node_modules/")[1].split("/")[0];
                        }
                    },
                },
            },
        },
    };
});
      },
    },
  };
});

			@@ -49,7 +49,7 @@
			>
			</div>
			<div class="equipment-status" :style="sectionStyle">
			<el-select v-model="equipmentSelected" placeholder="请选择">
			<el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<div
			@@ -171,6 +171,7 @@

			<script>
			import V2Echarts from "@/components/V2Echarts.vue";
			import { HomeAPI } from "@/api/home";
			export default {
			name: "EquipmentView",
			components: {
			@@ -184,44 +185,23 @@
			},
			data() {
			return {
			equipmentSelected: "",
			options: [
			{
			value: "选项1",
			label: "黄金糕",
			},
			{
			value: "选项2",
			label: "双皮奶",
			},
			{
			value: "选项3",
			label: "蚵仔煎",
			},
			{
			value: "选项4",
			label: "龙须面",
			},
			{
			value: "选项5",
			label: "北京烤鸭",
			},
			],
			deviceSelected: "",
			options: [],
			backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
			titleImage: new URL("@/assets/images/titles/renyuan.png", import.meta.url).href,
			middleImage: new URL("@/assets/images/titles/shebei.png", import.meta.url).href,
			bottomImage: new URL("@/assets/images/titles/huanjing.png", import.meta.url).href,
			bgImage: new URL("@/assets/images/titles/title_second.png", import.meta.url).href,
			enviorImage: new URL("@/assets/images/titles/wendu_bg.png", import.meta.url).href,
			deviceOnline: 1,
			deviceTotal: 27,
			deviceOnline: 0,
			deviceTotal: 0,
			currentTab: "塔吊监控",
			circleItems: [
			{
			id: "zaixianChartBox",
			name: "总在线",
			value: 22,
			percentage: 81.5,
			value: 0,
			percentage: 0,
			options: {
			tooltip: {
			trigger: "item",
			@@ -308,8 +288,8 @@
			{
			id: "lixianChartBox",
			name: "总离线",
			value: 5,
			percentage: 33,
			value: 0,
			percentage: 0,
			options: {
			tooltip: {
			trigger: "item",
			@@ -397,7 +377,7 @@
			id: "baojingChartBox",
			name: "总报警",
			value: 0,
			percentage: 20,
			percentage: 0,
			options: {
			tooltip: {
			trigger: "item",
			@@ -507,12 +487,330 @@
			handler(newVal) {
			console.log("设备界面接收到的数据:", newVal);
			// 处理数据变化的逻辑
			this.getDeviceTypes(newVal);
			},
			deep: true, // 深度监听对象内部变化
			immediate: true, // 立即执行一次
			},
			},
			mounted() {},
			methods: {
			/**
			* 处理设备选择变化
			* @param val
			*/
			handleSelectChange(val) {
			this.getDeviceState(val);
			},
			/**
			* 获取设备类型
			* @param bindId
			*/
			getDeviceTypes(bindId) {
			const params = {
			bindId,
			};
			HomeAPI.GetDeviceType(params).then((res) => {
			if (res.Ret === 1) {
			const result = res.Data;
			if (result.length > 0) {
			this.options = result.map((item) => ({
			value: item.Id,
			label: item.Name,
			}));
			this.deviceSelected = this.options[0].value; // 默认选中第一个项目
			this.getDeviceState(this.deviceSelected);
			} else {
			this.options = [];
			}
			}
			});
			},
			/**
			* 获取设备状态
			* @param deviceTypeId
			*/
			getDeviceState(deviceTypeId) {
			const params = {
			bindId: this.selectedId \|\| "",
			deviceTypeId,
			};
			HomeAPI.GetJSCDeviceState(params).then((res) => {
			if (res.Ret === 1) {
			const result = res.Data;
			if (result) {
			this.deviceOnline = result.TotalOnlineNumber;
			this.deviceTotal = result.TotalOnlineNumber + result.TotalOfflineNumber;
			this.circleItems = [
			{
			id: "zaixianChartBox",
			name: "总在线",
			value: result.TotalOnlineNumber,
			percentage: result.TotalOnlineRate,
			options: {
			tooltip: {
			trigger: "item",
			show: false,
			},
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			top: "5%",
			left: "center",
			show: false,
			},
			series: [
			{
			type: "pie",
			radius: ["70%", "80%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 5,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: 100,
			name: "",
			itemStyle: {
			color: "#234E84",
			},
			},
			],
			},
			{
			type: "pie",
			radius: ["70%", "100%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: result.TotalOnlineRate,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 100 - result.TotalOnlineRate,
			name: "",
			itemStyle: {
			color: "transparent",
			},
			},
			],
			},
			],
			},
			},
			{
			id: "lixianChartBox",
			name: "总离线",
			value: result.TotalOfflineNumber,
			percentage: result.TotalOfflineRate,
			options: {
			tooltip: {
			trigger: "item",
			show: false,
			},
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			top: "5%",
			left: "center",
			show: false,
			},
			series: [
			{
			type: "pie",
			radius: ["70%", "80%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 5,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: 100,
			name: "",
			itemStyle: {
			color: "#234E84",
			},
			},
			],
			},
			{
			type: "pie",
			radius: ["70%", "100%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: result.TotalOfflineRate,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 100 - result.TotalOfflineRate,
			name: "",
			itemStyle: {
			color: "transparent",
			},
			},
			],
			},
			],
			},
			},
			{
			id: "baojingChartBox",
			name: "总报警",
			value: result.TotalAlarmsNumber,
			percentage: result.TotalAlarmsRate,
			options: {
			tooltip: {
			trigger: "item",
			show: false,
			},
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			top: "5%",
			left: "center",
			show: false,
			},
			series: [
			{
			type: "pie",
			radius: ["70%", "80%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 5,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: 100,
			name: "",
			itemStyle: {
			color: "#234E84",
			},
			},
			],
			},
			{
			type: "pie",
			radius: ["70%", "100%"],
			center: ["50%", "50%"],
			avoidLabelOverlap: false,
			hoverAnimation: false,
			startAngle: 90,
			itemStyle: {
			normal: {
			label: {
			show: false,
			},
			labelLine: {
			show: false,
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: "rgba(0, 0, 0, 0)", // 边框阴影
			},
			},
			data: [
			{
			value: result.TotalAlarmsRate,
			name: "",
			itemStyle: {
			color: "#00FFFF",
			},
			},
			{
			value: 100 - result.TotalAlarmsRate,
			name: "",
			itemStyle: {
			color: "transparent",
			},
			},
			],
			},
			],
			},
			},
			];
			}
			}
			});
			},
			handleControlBtnClick(tab) {
			this.currentTab = tab;
			},

			@@ -13,111 +13,118 @@

			import PluginForViteVue2 from "@vitejs/plugin-vue2";
			// 屏幕适配
			const px2rem = require("postcss-px2rem")
			// 配置基本大小
			const px2rem = require("postcss-px2rem");
			// 配置基本大小
			const postcss = px2rem({
			//配rem基准值基准大小 baseSize
			remUnit: 192, // 设稿尺1920/10
			})
			//配rem基准值基准大小 baseSize
			remUnit: 192, // 设稿尺1920/10
			});

			export default defineConfig(({ mode }) => {
			return {
			resolve: {
			alias: {
			"@": path.resolve(__dirname, './src'),
			"@css": path.resolve("./src/assets/css"),
			'worker-loader': require.resolve('worker-loader'),
			},
			return {
			resolve: {
			alias: {
			"@": path.resolve(__dirname, "./src"),
			"@css": path.resolve("./src/assets/css"),
			"worker-loader": require.resolve("worker-loader"),
			},
			},
			worker: {
			// 例如，设置一个worker的入口文件
			// 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
			// entry: '/path/to/worker/entry.js',
			options: { inline: true, name: "workerName.[hash].js" },
			},
			plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
			css: {
			preprocessorOptions: {
			scss: {
			additionalData: "@import '@css/sass.scss';",
			},
			worker: {
			// 例如，设置一个worker的入口文件
			// 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
			// entry: '/path/to/worker/entry.js',
			options: { inline: true, name: 'workerName.[hash].js' }
			},
			loaderOptions: {
			postcss: {
			plugins: [postcss],
			},
			plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
			css: {
			preprocessorOptions: {
			scss: {
			additionalData: "@import '@css/sass.scss';",
			},
			},
			loaderOptions: {
			postcss: {
			plugins: [postcss]
			}
			},
			},
			server: {
			proxy: {
			"^/api/": {
			// target: "http://47.117.124.20:2002/",
			target: "http://101.201.155.10:4011/",
			rewrite: (path) => path.replace(/^\/api\//, ""),
			changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
			},
			},
			port: 8081,
			host: "0.0.0.0",
			cors: true,
			open: true,
			},
			esbuild: {
			treeShaking: true,
			drop: mode === "production" ? ["console", "debugger"] : [],
			},
			chainWebpack(config) {
			config.module
			.rule("css")
			.test(/\.css$/)
			.oneOf("vue")
			.use("px2rem-loader")
			.loader("px2rem-loader")
			.options({
			remUnit: 192,
			})
			.end();
			},
			build: {
			minify: "esbuild",
			chunkSizeWarningLimit: 500, //kbs
			rollupOptions: {
			output: {
			chunkFileNames: "assets/js/[name]-[hash].js",
			entryFileNames: "assets/js/[name]-[hash].js",
			assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
			// manualChunks(id) {
			// if (id.includes("/node_modules/")) {
			// const name = id.split("/node_modules/")[1].split("/")[0];
			// for (const key of Object.keys(ChunksMap)) {
			// if (ChunksMap[key].includes(name)) {
			// return key;
			// }
			// }
			// return "vendor";
			// }
			// },

			// eslint-disable-next-line no-unused-vars
			// manualChunks(id, { getModuleInfo, getModuleIds }) {
			// const getShouldBeVendor = splitVendorChunk();
			// const chunkName = getShouldBeVendor(id, { getModuleInfo });
			// if (chunkName === "vendor") {
			// //1 在node_modules文件夹下
			// //2 不是css类请求
			// //3 是被静态引入的
			// return chunkName;
			// } else if (id.includes("src")) {
			// const moduleInfo = getModuleInfo(id);
			// // console.log(id, "importers", moduleInfo.importers);
			// // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
			// if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
			// return "manifest";
			// }
			// }
			// },

			// eslint-disable-next-line no-unused-vars
			manualChunks(id) {
			if (id.includes("/node_modules/")) {
			return id.split("/node_modules/")[1].split("/")[0];
			}
			},
			},
			server: {
			proxy: {
			"^/api/": {
			// target: "http://47.117.124.20:2002/",
			target: "http://101.201.155.10:4011/",
			rewrite: (path) => path.replace(/^\/api\//, ""),
			changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
			},
			},
			port: 3000,
			host: "0.0.0.0",
			cors: true,
			open: true,
			},
			esbuild: {
			treeShaking: true,
			drop: mode === "production" ? ["console", "debugger"] : [],
			},
			chainWebpack(config) {
			config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({
			remUnit: 192,
			}).end();
			},
			build: {
			minify: "esbuild",
			chunkSizeWarningLimit: 500, //kbs
			rollupOptions: {
			output: {
			chunkFileNames: "assets/js/[name]-[hash].js",
			entryFileNames: "assets/js/[name]-[hash].js",
			assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
			// manualChunks(id) {
			// if (id.includes("/node_modules/")) {
			// const name = id.split("/node_modules/")[1].split("/")[0];
			// for (const key of Object.keys(ChunksMap)) {
			// if (ChunksMap[key].includes(name)) {
			// return key;
			// }
			// }
			// return "vendor";
			// }
			// },

			// eslint-disable-next-line no-unused-vars
			// manualChunks(id, { getModuleInfo, getModuleIds }) {
			// const getShouldBeVendor = splitVendorChunk();
			// const chunkName = getShouldBeVendor(id, { getModuleInfo });
			// if (chunkName === "vendor") {
			// //1 在node_modules文件夹下
			// //2 不是css类请求
			// //3 是被静态引入的
			// return chunkName;
			// } else if (id.includes("src")) {
			// const moduleInfo = getModuleInfo(id);
			// // console.log(id, "importers", moduleInfo.importers);
			// // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
			// if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
			// return "manifest";
			// }
			// }
			// },

			// eslint-disable-next-line no-unused-vars
			manualChunks(id) {
			if (id.includes("/node_modules/")) {
			return id.split("/node_modules/")[1].split("/")[0];
			}
			},
			},
			},
			},
			};
			});
			},
			},
			};
			});