feat: 设备状态接口对接

Gary Gu

5 days ago e7c05e5d214a149bdaba12f2e84ad0e8136f8726

feat: 设备状态接口对接

 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,27 +13,27 @@

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
})
});

export default defineConfig(({ mode }) => {
    return {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, './src'),
        "@": path.resolve(__dirname, "./src"),
                "@css": path.resolve("./src/assets/css"),
                'worker-loader': require.resolve('worker-loader'),
        "worker-loader": require.resolve("worker-loader"),
            },
        },
        worker: {
            // 例如，设置一个worker的入口文件
            // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
            // entry: '/path/to/worker/entry.js',
            options: { inline: true, name: 'workerName.[hash].js' }
      options: { inline: true, name: "workerName.[hash].js" },
        },
        plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
        css: {
@@ -44,9 +44,9 @@
            },
            loaderOptions: {
                postcss: {
                    plugins: [postcss]
                }
            }
          plugins: [postcss],
        },
      },
        },
        server: {
            proxy: {
@@ -57,7 +57,7 @@
                    changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
                },
            },
            port: 3000,
      port: 8081,
            host: "0.0.0.0",
            cors: true,
            open: true,
@@ -67,9 +67,16 @@
            drop: mode === "production" ? ["console", "debugger"] : [],
        },
        chainWebpack(config) {
            config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({
      config.module
        .rule("css")
        .test(/\.css$/)
        .oneOf("vue")
        .use("px2rem-loader")
        .loader("px2rem-loader")
        .options({
                remUnit: 192,
            }).end();
        })
        .end();
        },
        build: {
            minify: "esbuild",