Initial commit

package.json

@@ -7,7 +7,11 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.25.0",
     "core-js": "^3.8.3",
+    "dayjs": "^1.11.19",
+    "echarts": "^5.2.2",
+    "element-ui": "^2.15.14",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-09 10:19:49
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 09:51:11
+ * @FilePath: /chuanganqi/src/App.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div id="app">
-    <nav>
+    <!-- <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
+    </nav> -->
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
+  // width: 1920px;
+  // height: 100vh;
+  overflow: hidden;
+  // background: black  ;
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+}
+html,body{
+  padding:0;
+  margin:0;
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
 }
 </style>

src/api/httpRequest.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2023-09-22 09:37:24
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-10-19 15:41:20
+ * @FilePath: /smart-and-safe-city/src/assets/api/httpRequest.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import request from "@/utils/request.js";
+
+export const getData = (dataType) => {
+  return request({
+    url: "/getSettingInfo",
+    method: "post",
+    data: [dataType],
+  });
+};
+// 查询视频地址
+export function getPreviewURLs(query) {
+  return request({
+    url: '/artemis/getPreviewURLs',
+    method: 'get',
+    params: query
+  })
+}
+
+
+

src/assets/css/public.css

+.f-c {
+  display: flex;
+  justify-content: space-between;
+}
+.f-d-c {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

src/components/DeviceScrollTable.vue

+<template>
+  <div class="device-scroll-table" :style="rootStyle">
+    <div class="header-row">
+      <div class="col id">编号</div>
+      <div class="col type">老化总数</div>
+      <div class="col date">状态</div>
+      <div class="col status">运行时长</div>
+      <div class="col jindu">任务进度</div>
+    </div>
+    <div
+      class="body"
+      ref="body"
+      @mouseenter="isPaused = true"
+      @mouseleave="isPaused = false"
+    >
+      <div
+        class="scroll"
+        :class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
+        :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
+      >
+        <div v-for="row in rows" :key="row.id + row.date" class="row">
+          <div class="col id">{{ row.id }}</div>
+          <div class="col type">{{ row.type }}</div>
+          <div class="col date">{{ row.date }}</div>
+          <div class="col status">
+            {{ row.status }}
+          </div>
+          <div class="col jindu txt">{{ row.jindu }}</div>
+        </div>
+        <template v-if="shouldScroll">
+          <div
+            v-for="(row, index) in rows"
+            :key="'clone-' + index + row.id"
+            class="row"
+          >
+            <div class="col id">{{ row.id }}</div>
+            <div class="col type">{{ row.type }}</div>
+            <div class="col date">{{ row.date }}</div>
+            <div class="col status">
+              {{ row.status }}
+            </div>
+            <div class="col jindu txt">{{ row.jindu }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeviceScrollTable",
+  props: {
+    rows: {
+      type: Array,
+      default() {
+        return [
+          {
+            id: "2505151",
+            type: "200",
+            date: "云顶",
+            status: "150",
+            jindu: "96%",
+          },
+          {
+            id: "2505152",
+            type: "200",
+            date: "云顶",
+            status: "150",
+            jindu: "96%",
+          },
+          {
+            id: "2505153",
+            type: "200",
+            date: "云顶",
+            status: "150",
+            jindu: "96%",
+          },
+          {
+            id: "2505154",
+            type: "200",
+            date: "云顶",
+            status: "150",
+            jindu: "96%",
+          },
+          {
+            id: "2505155",
+            type: "200",
+            date: "云顶",
+            status: "150",
+            jindu: "96%",
+          },
+        ];
+      },
+    },
+    speed: {
+      type: Number,
+      default: 20,
+    },
+    height: {
+      type: Number,
+      default: 180,
+    },
+  },
+  data() {
+    return {
+      shouldScroll: false,
+      isPaused: false,
+    };
+  },
+  computed: {
+    scrollDuration() {
+      const rowsCount = this.rows.length || 1;
+      return Math.max(6, rowsCount * this.speed * 0.1);
+    },
+    rootStyle() {
+      return this.height ? { height: this.height + "px" } : { height: "100%" };
+    },
+  },
+  mounted() {
+    this.updateScrollState();
+    window.addEventListener("resize", this.updateScrollState);
+  },
+  updated() {
+    this.updateScrollState();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.updateScrollState);
+  },
+  methods: {
+    updateScrollState() {
+      this.$nextTick(() => {
+        const body = this.$refs.body;
+        if (!body) {
+          this.shouldScroll = false;
+          return;
+        }
+        this.shouldScroll = body.scrollHeight > body.clientHeight;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.device-scroll-table {
+  width: 100%;
+  color: #ffffff;
+  font-size: 14px;
+  // background: #000;
+  overflow: hidden;
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+  height: 42px;
+  // background: rgba(0, 124, 225, 0.4);
+  background: linear-gradient(
+    180deg,
+    rgba(69, 204, 255, 0.63) 6%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  font-weight: 600;
+}
+
+.body {
+  padding: 6px 0;
+  height: calc(100% - 42px);
+  overflow: hidden;
+}
+
+.scroll {
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll.is-scrolling {
+  animation-name: tableScroll;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.scroll.is-paused {
+  animation-play-state: paused;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-bottom: 1px solid rgba(14, 84, 178, 0.56);
+}
+
+.col {
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.col.id {
+  width: 28%;
+  padding-left: 20px;
+}
+
+.col.type {
+  width: 20%;
+}
+
+.col.date {
+  width: 20%;
+}
+
+.col.status {
+  width: 20%;
+  // display: flex;
+  // justify-content: flex-end;
+  text-align: center;
+}
+.col.jindu {
+  width: 20%;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 30px;
+  &.txt {
+    padding-right: 40px;
+  }
+}
+
+.tag {
+  display: inline-block;
+  min-width: 40px;
+  text-align: center;
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.tag-blue {
+  background: #1ea7ff;
+}
+
+.tag-orange {
+  background: #ff6a00;
+}
+
+@keyframes tableScroll {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+</style>

src/components/HazardOverviewB.vue

+<template>
+  <div class="hazard-overview">
+    <div ref="chart" class="hazard-ring"></div>
+    <div class="legend">
+      <div v-for="item in items" :key="item.name" class="legend-item">
+        <span class="dot" :style="{ backgroundColor: item.color }"></span>
+        <span class="label">{{ item.name }}</span>
+        <span class="value">{{ item.value }}</span>
+        <span class="value2">{{ item.value2 }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HazardOverview",
+  props: {
+    items: {
+      type: Array,
+      default() {
+        return [
+          { name: "信号低数量", value: 30, value2: "30%", color: "#FF5656" },
+          { name: "信号高数量", value: 19, value2: "19%", color: "#468AFF" },
+          { name: "不通电数量", value: 21, value2: "21%", color: "#F2C343" },
+          { name: "基线不稳数量", value: 16, value2: "16%", color: "#26D5DB" },
+          { name: "阻抗异常数量", value: 14, value2: "14%", color: "#B676FE" },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  computed: {
+    totalValue() {
+      return this.items.reduce((sum, item) => {
+        const value = Number(item.value) || 0;
+        return sum + value;
+      }, 0);
+    },
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  watch: {
+    items: {
+      handler(obj) {
+        this.updateChart();
+        console.log(123,obj)
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.chart) {
+        return;
+      }
+      this.chart = this.$echarts.init(this.$refs.chart);
+      this.updateChart();
+    },
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    updateChart() {
+      if (!this.chart) {
+        return;
+      }
+      const data = this.items.map((item) => ({
+        name: item.name,
+        value: Number(item.value) || 0,
+      }));
+
+      this.chart.setOption({
+        color: this.items.map((item) => item.color),
+        title: {
+          text: String(this.totalValue),
+          subtext: "总数",
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 32,
+            fontWeight: "bold",
+          },
+          subtextStyle: {
+            color: "#ffffff",
+            fontSize: 14,
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["68%", "86%"],
+            center: ["50%", "50%"],
+            startAngle: 90,
+            label: { show: false },
+            labelLine: { show: false },
+            emphasis: { scale: false },
+            itemStyle: {
+              borderWidth: 3,
+              borderColor: "rgba(3, 16, 28, 0.9)",
+            },
+            data,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.hazard-overview {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.hazard-ring {
+  // width: 200px;
+  // height: 200px;
+  width: 100%;
+  height: 100%;
+}
+
+.legend {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-left: 16px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  height: 30px;
+  padding: 0 12px;
+  // background: linear-gradient(
+  //   90deg,
+  //   rgba(64, 156, 255, 0.35) 0%,
+  //   rgba(64, 156, 255, 0.08) 100%
+  // );
+  // border: 1px solid rgba(64, 156, 255, 0.5);
+  color: #ffffff;
+  background: rgba(34, 131, 248,.16);
+  
+  // box-shadow: inset 0 0 14px rgba(64, 156, 255, 0.25);
+}
+
+.dot {
+  width: 16px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.label {
+  // flex: 1;
+  width: 150px;
+  font-size: 14px;
+  white-space: nowrap;
+  // margin-right: 100px;
+}
+
+.value {
+  font-size: 16px;
+  font-weight: 600;
+  width: 50px;
+  text-align: center;
+}
+.value2 {
+  font-size: 16px;
+  font-weight: 600;
+  width: 100px;
+  text-align: right;
+}
+</style>

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Title.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-10 09:16:21
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-10 09:46:20
+ * @FilePath: /chuanganqi/src/components/Title.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="title">
+    {{ text }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    text: {
+      type: String,
+      default: "设备实时运行状态",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+  .title{
+    font-size: 22px;
+    color:#fff;
+  }
+
+</style>

src/components/UserTypeBarChart.vue

+<template>
+  <div ref="chart" class="user-type-bar-chart"></div>
+</template>
+
+<script>
+export default {
+  name: "UserTypeBarChart",
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return [
+          "11/8",
+          "11/9",
+          "11/10",
+          "11/10",
+          "11/11",
+    
+        ];
+      },
+    },
+    residential: {
+      type: Array,
+      default() {
+        return [26, 34, 18, 22, 24, 28, 10];
+      },
+    },
+    industrial: {
+      type: Array,
+      default() {
+        return [18, 24, 8, 18, 20, 26, 22];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+  watch: {
+    categories() {
+      this.updateChart();
+    },
+    residential() {
+      this.updateChart();
+    },
+    industrial() {
+      this.updateChart();
+    },
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.chart) {
+        return;
+      }
+      this.chart = this.$echarts.init(this.$refs.chart);
+      this.updateChart();
+    },
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    updateChart() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.setOption({
+        grid: {
+          left: 8,
+          right: 8,
+          top: 30,
+          bottom: 20,
+          containLabel: true,
+        },
+        legend: {
+          top: 0,
+          right: 10,
+          itemWidth: 16,
+          itemHeight: 8,
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 12,
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: this.categories,
+          axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
+          axisTick: { show: false },
+          axisLabel: {
+            color: "#ffffff",
+            fontSize: 11,
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { show: true,color:'#fff' },
+          splitLine: {
+            lineStyle: { color: "rgba(255,255,255,0.2)" },
+          },
+        },
+        series: [
+          {
+            name: "通过率",
+            type: "bar",
+            data: this.residential,
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: [2, 2, 0, 0],
+              // color: "#98F4FF",
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#98F4FF" }, // 0% 处的颜色
+                { offset: 1, color: "#45CCFF" }, // 100% 处的颜色
+              ]),
+            },
+          },
+          {
+            name: "异常率",
+            type: "bar",
+            data: this.industrial,
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: [2, 2, 0, 0],
+              // color: "#FF4545",
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#FFB898" }, // 0% 处的颜色
+                { offset: 1, color: "#FF4545" }, // 100% 处的颜色
+              ]),
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-type-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/ccCom.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-10 13:19:12
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 16:39:31
+ * @FilePath: /chuanganqi/src/components/ccCom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div
+    class="cc-pic"
+    @click="
+      $router.push({
+        path: '/ind2',
+        query: { ...itemData},
+      })
+    "
+  >
+    <div class="l">
+      <div class="t">编号</div>
+      <div class="b">{{ itemData.code }}</div>
+    </div>
+    <div class="r">
+      <div class="t">容量</div>
+      <div class="b">
+        <span class="num">{{ itemData.allNum }}</span>
+        <span>枚</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    itemData: {
+      string: Object,
+      default: () => {
+        return {
+          code: 25051,
+          startTime: "2026-3-10 12:12",
+          jd: "90%",
+          allNum: 2768,
+        };
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.cc-pic {
+  cursor: pointer;
+  width: 226px;
+  height: 60px;
+  background: url("~@/assets/Ind/ccPic.png") no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  color: #fff;
+  padding-left: 20px;
+  padding-top: 8px;
+  box-sizing: border-box;
+  .l {
+    margin-right: 54px;
+    .t {
+      font-size: 16px;
+    }
+    .b {
+      font-size: 18px;
+    }
+  }
+  .r {
+    font-size: 16px;
+    .b {
+      position: relative;
+      top: -5px;
+
+      .num {
+        font-size: 22px;
+      }
+    }
+  }
+}
+</style>

src/components/picText.vue

+<template>
+  <div class="pic-text">
+    <img class="img" :src="src" alt="" />
+    <div class="r">
+      <div class="t1">{{text1}}</div>
+      <div class="t2">{{text2}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cl1 from "@/assets/Ind/cl1.png";
+export default {
+  name: "",
+  props: {
+    src: {
+      type: String,
+      default: cl1,
+    },
+    text1: {
+      type: String,
+      default: "运行设备数量",
+    },
+    text2: {
+      type: [String, Number],
+      default: 15,
+    },
+  },
+  data() {
+    return {
+      cl1,
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.pic-text {
+  // width: 194px;
+  height: 64px;
+  display: flex;
+}
+.r {
+  margin-left: 20px;
+}
+.t1,
+.t2 {
+  color: #fff;
+}
+.t1 {
+  font-size: 18px;
+}
+.t2 {
+  font-size: 30px;
+}
+</style>

src/main.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-09 10:19:49
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 10:32:29
+ * @FilePath: /chuanganqi/src/main.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import "@/assets/css/public.css"
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+
+import * as echarts from "echarts";
+Vue.prototype.$echarts = echarts;
+let dayjs = require("dayjs");
+import axios from "axios";
+
+Vue.prototype.$dayjs = dayjs;
+Vue.prototype.$axios = axios;
 
 Vue.config.productionTip = false
 
+
+Vue.use(ElementUI);
 new Vue({
   router,
   store,

src/router/index.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-09 10:19:49
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 14:13:39
+ * @FilePath: /chuanganqi/src/router/index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Index from '@/views/Index.vue'
+import Ind2 from "@/views/Ind2";
+
 
 Vue.use(VueRouter)
 
@@ -8,16 +18,13 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: Index
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+    path: '/ind2',
+    name: 'ind2',
+    component: Ind2
+  },
 ]
 
 const router = new VueRouter({

src/utils/reques1.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2023-05-25 10:37:11
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-05-25 10:50:40
+ * @FilePath: /city-wisdom/src/utils/reques1.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import axios from 'axios'
+// import { Notification, MessageBox, Message } from 'element-ui'
+// import store from '@/store'
+// import { getToken } from '@/utils/auth'
+// import errorCode from '@/utils/errorCode'
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: '/api',
+  // 超时
+  timeout: 10000
+})
+export default service
+
+
+

src/utils/request.js

+import axios from 'axios'
+import { Notification, MessageBox, Message } from 'element-ui'
+// import store from '@/store'
+// import { getToken } from '@/utils/auth'
+// import errorCode from '@/utils/errorCode'
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: '/api',
+  // 超时
+  timeout: 10000
+})
+export default service
+
+
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  // const isToken = (config.headers || {}).isToken === false
+  // if (getToken() && !isToken) {
+  //   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  // }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?';
+    for (const propName of Object.keys(config.params)) {
+      const value = config.params[propName];
+      var part = encodeURIComponent(propName) + "=";
+      if (value !== null && typeof(value) !== "undefined") {
+        if (typeof value === 'object') {
+          for (const key of Object.keys(value)) {
+            let params = propName + '[' + key + ']';
+            var subPart = encodeURIComponent(params) + "=";
+            url += subPart + encodeURIComponent(value[key]) + "&";
+          }
+        } else {
+          url += part + encodeURIComponent(value) + "&";
+        }
+      }
+    }
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    // const msg = errorCode[code] || res.data.msg || errorCode['default']
+    let msg ='';
+    if (code === 401) {
+      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+        // 重新登录
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        store.dispatch('LogOut').then(() => {
+          location.href = '/index';
+        })
+      }).catch(() => {});
+    } else if (code === 500) {
+      Message({
+        message: msg,
+        type: 'error'
+      })
+
+      return Promise.reject(new Error(500))
+    } else if (code !== 200) {
+      Notification.error({
+        title: msg
+      })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    }
+    else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    }
+    else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+// export default service

src/views/AboutView.vue

-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/Ind.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-09 13:59:46
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 17:01:29
+ * @FilePath: /chuanganqi/src/views/Ind.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="ind f-d-c">
+    <div class="top">
+      <div class="time">
+        <div class="l">{{ YYYY }}</div>
+        <div>{{ HHHH }}</div>
+      </div>
+      <div class="qw">
+        <div class="a">{{ arr[0] }}°C</div>
+        <div class="b">{{ arr[1] }}</div>
+        <div class="c">{{ arr[2] }}</div>
+        <div class="d">{{ arr[3] }}</div>
+      </div>
+    </div>
+
+    <div class="center f-c">
+      <div class="cl f-d-c">
+        <div class="tlt">
+          <TITLE />
+        </div>
+        <div class="box f-d-c">
+          <PICTEXT
+            v-for="item in pictextArr"
+            :key="item.text1"
+            :src="item.src"
+            :text1="item.text1"
+            :text2="item.text2"
+          />
+        </div>
+      </div>
+      <div class="cc f-d-c">
+        <div class="tlt">
+          <TITLE text="设备分布" />
+        </div>
+        <div class="box">
+          <CCCOM v-for="item in comData" :itemData="item" :key="item.code" />
+        </div>
+      </div>
+      <div class="cr f-d-c">
+        <div class="tlt">
+          <TITLE text="老化结果统计（近一周）" />
+        </div>
+        <div class="text f-c">
+          <div class="cr-tx" v-for="item in crtxArr" :key="item.text">
+            <div class="t">{{ item.text }}</div>
+            <div class="b">{{ item.num }}</div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="chars-title">良率统计直方图</div>
+          <UserTypeBarChart
+            :categories="categories"
+            :residential="residential"
+            :industrial="industrial"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="bottom f-c">
+      <div class="bl">
+        <div class="tlt">
+          <TITLE text="传感器异常统计（近一周）" />
+        </div>
+        <div class="box">
+          <HazardOverviewB :items="items" v-if="items.length > 0" />
+        </div>
+      </div>
+      <div class="br">
+        <div class="tlt">
+          <TITLE text="设备运行日志" />
+        </div>
+        <div class="box">
+          <DeviceScrollTable :rows="tableRows" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TITLE from "@/components/Title.vue";
+import PICTEXT from "@/components/picText";
+import CCCOM from "@/components/ccCom";
+import UserTypeBarChart from "@/components/UserTypeBarChart";
+import HazardOverviewB from "@/components/HazardOverviewB";
+import DeviceScrollTable from "@/components/DeviceScrollTable";
+
+import cl1 from "@/assets/Ind/cl1.png";
+import cl2 from "@/assets/Ind/cl2.png";
+import cl3 from "@/assets/Ind/cl3.png";
+import cl4 from "@/assets/Ind/cl4.png";
+
+import { getData } from "@/api/httpRequest.js";
+
+export default {
+  name: "",
+  components: {
+    TITLE,
+    PICTEXT,
+    CCCOM,
+    UserTypeBarChart,
+    HazardOverviewB,
+    DeviceScrollTable,
+  },
+  data() {
+    return {
+      YYYY: "",
+      HHHH: "",
+      comData: [],
+      pictextArr: [
+        {
+          src: cl1,
+          text1: "运行设备数量",
+          text2: "15",
+        },
+        {
+          src: cl2,
+          text1: "空闲设备数量",
+          text2: "3",
+        },
+        {
+          src: cl3,
+          text1: "停机设备数量",
+          text2: "0",
+        },
+        {
+          src: cl4,
+          text1: "维护设备数量",
+          text2: "2",
+        },
+      ],
+      crtxArr: [
+        {
+          text: "完成总数",
+          num: "490",
+        },
+        {
+          text: "通过数量",
+          num: "466",
+        },
+        {
+          text: "异常数量",
+          num: "24",
+        },
+        {
+          text: "通过率",
+          num: "95%",
+        },
+      ],
+      categories: [],
+      residential: [],
+      industrial: [],
+      items: [],
+      tableRows: [],
+      arr: [],
+    };
+  },
+  created() {
+    setInterval(() => {
+      this.YYYY = this.$dayjs().format("YYYY-MM-DD");
+      this.HHHH = this.$dayjs().format("HH:mm:ss");
+    }, 1000);
+    this.init();
+  },
+  methods: {
+    init() {
+      getData("cgq-a").then((res) => {
+        const data = JSON.parse(res.data[0].jsonDataStr);
+        this.pictextArr.forEach((item, index) => {
+          item.text2 = data.arr[index];
+        });
+      });
+      getData("cgq-b").then((res) => {
+        const data = JSON.parse(res.data[0].jsonDataStr);
+
+        this.comData = data.arr;
+      });
+      getData("cgq-c").then((res) => {
+        const data = JSON.parse(res.data[0].jsonDataStr);
+        this.crtxArr.forEach((item, index) => {
+          item.num = data.arr[index];
+        });
+        this.categories = data.chars.a;
+        this.residential = data.chars.b;
+        this.industrial = data.chars.c;
+      });
+      getData("cgq-d").then((res) => {
+        const data = JSON.parse(res.data[0].jsonDataStr);
+        this.items = data.chars;
+      });
+      getData("cgq-e").then((res) => {
+        const data = JSON.parse(res.data[0].jsonDataStr);
+        console.log(data);
+        this.tableRows = data.table;
+      });
+        getData("cgq-f").then((res) => {
+        const data = JSON.parse(res.data[0].jsonDataStr);
+        console.log(data);
+        this.arr = data.arr
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ind {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+}
+
+.time {
+  font-size: 28px;
+  top: 66px;
+  left: 48px;
+  display: flex;
+  position: absolute;
+  color: #fff;
+  z-index: 9999;
+  .l {
+    margin-right: 20px;
+  }
+}
+.qw {
+  width: 290px;
+  height: 50px;
+  background: url("~@/assets/Ind/qw.png") repeat center center;
+  background-size: 100%;
+  position: absolute;
+  top: 60px;
+  right: 60px;
+  z-index: 9999;
+  color: #fff;
+  font-size: 28px;
+  .a {
+    position: absolute;
+    top: -3px;
+    left: 27px;
+  }
+  .b {
+    position: absolute;
+    top: -3px;
+
+    left: 154px;
+  }
+  .c {
+    position: absolute;
+    top: -6px;
+    left: 264px;
+  }
+  .d {
+    position: absolute;
+    top: 31px;
+    right: -23px;
+    font-size: 14px;
+  }
+}
+.top {
+  width: 1920px;
+  height: 108px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: url("~@/assets/Ind/top.png") no-repeat center -12px;
+  // background-size:100% 100%;
+  // margin-bottom:30px
+}
+.center,
+.bottom {
+  > div {
+    box-sizing: border-box;
+    padding-top: 20px;
+    padding-left: 35px;
+    padding-bottom: 30px;
+    padding-right: 30px;
+    overflow: hidden;
+    .tlt {
+      margin-bottom: 20px;
+    }
+    .text {
+      margin-bottom: 20px;
+      .cr-tx {
+        color: #fff;
+        .t {
+          font-size: 16px;
+        }
+        .b {
+          font-size: 28px;
+        }
+      }
+    }
+    .box {
+      flex: 1;
+      // background: red;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      overflow: hidden;
+    }
+  }
+}
+.center {
+  width: 100%;
+  height: 48.1%;
+  margin-bottom: 25px;
+  box-sizing: border-box;
+  padding: 0 40px;
+
+  // background: red;
+  .cl {
+    width: 280px;
+    height: 100%;
+    background: url("~@/assets/Ind/cl.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .cc {
+    width: 1040px;
+    height: 100%;
+
+    background: url("~@/assets/Ind/cc.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .cr {
+    width: 448px;
+    height: 100%;
+    background: url("~@/assets/Ind/cr.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+}
+
+.bottom {
+  width: 100%;
+  height: 32.4%;
+  box-sizing: border-box;
+
+  padding: 0 40px;
+  .bl {
+    width: 672px;
+    height: 100%;
+    background: url("~@/assets/Ind/bl.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .br {
+    width: 1136px;
+    height: 100%;
+    background: url("~@/assets/Ind/br.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+}
+.chars-title {
+  color: #fff;
+}
+</style>

src/views/Ind2.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-11 09:36:51
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 17:02:21
+ * @FilePath: /chuanganqi/src/views/ind2.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="device-box f-d-c">
+    <div class="back">
+      <el-link @click="$router.back()" type="primary">返回</el-link>
+    </div>
+    <div class="t f-c">
+      <div class="title" v-for="(item, index) in titleArr" :key="item.text">
+        <div class="text">{{ item.text }}</div>
+        <div class="num" :class="index == 1 ? 'small-text' : ''">
+          {{ item.num }}
+        </div>
+      </div>
+    </div>
+    <div class="b">
+      <div
+        class="item"
+        v-for="item in itemArr.filter((item, index) => {
+          return index >= (currentPage - 1) * 28 && index < currentPage * 28;
+        })"
+        :style="{ opacity: item.i > total ? 0 : 1 }"
+        :key="item.a"
+      >
+        <div class="text">{{ item.a }}</div>
+        <div class="circle" :class="item.b ? 'yes' : 'no'"></div>
+        <div class="bottom">电压：{{ item.b ? item.c : "0" }}V</div>
+        <div class="bottom">状态：{{ item.b ? "正常" : "异常" }}</div>
+      </div>
+    </div>
+    <div class="block">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page.sync="currentPage"
+        :page-size="28"
+        layout="prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      currentPage: 1,
+      itemArr: [],
+      total: 2001,
+      titleArr: [
+        {
+          text: "柜子编号",
+          num: 111,
+        },
+        {
+          text: "开始时间",
+          num: 111,
+        },
+        {
+          text: "老化进度",
+          num: 111,
+        },
+        {
+          text: "老化设备总数",
+          num: 111,
+        },
+        {
+          text: "正常设备",
+          num: 111,
+        },
+        {
+          text: "故障设备",
+          num: 111,
+        },
+      ],
+    };
+  },
+  created(e) {
+    this.titleArr[0].num = this.$route.query.code;
+    this.titleArr[1].num = this.$route.query.startTime;
+    this.titleArr[2].num = this.$route.query.jd;
+    this.change(+this.$route.query.allNum);
+  },
+  methods: {
+    change(n) {
+      const num = n;
+      console.log(n);
+      this.total = n;
+      const itemArr = [];
+      const add = num % 7;
+      const myNum = num + (7 - add);
+
+      console.log(myNum);
+
+      // 先弄弄出来故障设备
+      const gzNum = Math.ceil(50 * Math.random());
+      this.titleArr[3].num = num;
+      this.titleArr[4].num = num - gzNum;
+      this.titleArr[5].num = gzNum;
+
+      for (let i = 0; i < myNum; i++) {
+        let data = {
+          a: "DEV-" + (i + 1),
+          i: i + 1,
+          c: 30 + Math.ceil(Math.random() * 4),
+        };
+        if (i >= num) {
+          data = {
+            i: i + 1,
+          };
+        }
+
+        itemArr.push(data);
+      }
+
+      const a = itemArr.sort(() => {
+        return Math.random() - 0.5;
+      });
+      a.forEach((item, index) => {
+        if (index < gzNum) {
+          item.b = false;
+        } else {
+          item.b = true;
+        }
+      });
+      a.sort((a, b) => {
+        return a.i - b.i;
+      });
+      this.itemArr = a;
+    },
+    handleCurrentChange() {
+      console.log(this.currentPage);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.device-box {
+  width: 100%;
+  height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.t {
+  box-sizing: border-box;
+  .title {
+    background: #fff;
+    flex: 1;
+    margin: 10px;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    text-align: center;
+    .text {
+    }
+    .num {
+      font-size: 35px;
+      font-weight: 700;
+      margin-top: 8px;
+    }
+  }
+}
+.b {
+  flex: 1;
+  margin: 10px;
+  background: #fff;
+  border-radius: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  // justify-content: center;
+  box-sizing: border-box;
+  padding-top: 10px;
+  justify-content: center;
+
+  .item {
+    width: 14%;
+    height: 22%;
+    margin-bottom: 2px;
+    border-radius: 12px;
+    margin-right: 2px;
+    margin-left: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    text-align: center;
+    box-sizing: border-box;
+    padding: 20px;
+    &:nth-child(7n) {
+      // background: red;
+      margin-left: 0px;
+      // margin-right: 0px;
+    }
+
+    .text {
+      font-weight: 600;
+      margin-bottom: 10px;
+      font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+    .circle {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin: 0 auto;
+      margin-bottom: 10px;
+
+      &.yes {
+        background: linear-gradient(135deg, #2ecc71, #27ae60);
+      }
+      &.no {
+        background: linear-gradient(135deg, #e74c3c, #c0392b);
+      }
+    }
+  }
+}
+.block {
+  position: relative;
+  top: -55px;
+  // background: #fff;
+  text-align: center;
+  width: 100%;
+}
+.small-text {
+  font-size: 22px !important;
+}
+.back {
+  position: fixed;
+  left: 34px;
+  top: 0px;
+}
+</style>

src/views/Index.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-01-05 10:39:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-11 14:15:58
+ * @FilePath: /huaxindd-web/src/views/Index/index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div
+    class="index"
+    :style="{
+      transform: `scale(${scaleX},${scaleX})`,
+      top: `-${((1 - scaleX) * innerHeight) / 2}px`,
+    }"
+  >
+    <!-- <div class="back" @click="back">跳转后台</div> -->
+
+    <component :is="currentTabComponent"></component>
+
+  </div>
+</template>
+
+<script>
+
+import Ind from "./Ind.vue";
+
+export default {
+  name: "",
+  components: {
+
+
+  },
+  data() {
+    return {
+      scaleX: 1,
+      innerWidth: 0,
+      innerHeight: 0,
+      currentTabComponent: Ind,
+    };
+  },
+  created() {
+    this.innerWidth = window.innerWidth;
+    this.innerHeight = window.innerHeight;
+    // this.scaleX = window.innerWidth / 2880;
+    this.scaleX = window.innerWidth / 1920;
+  },
+  methods: {
+    back() {
+      // this.$router.push("/checktask/jmchacktask");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.index {
+  // width:2880px;
+  width: 1920px;
+  height: 100vh;
+
+  background: black;
+  position: relative;
+  left: 50%;
+  top: 0px;
+  // margin-left: -1440px;
+  margin-left: -960px;
+  overflow: hidden;
+  // .back {
+  //   position: absolute;
+  //   border: 1px solid rgba(0, 124, 225, 1);
+  //   border-radius: 5px;
+  //   cursor: pointer;
+  //   padding: 5px 10px;
+  //   color: #fff;
+  //   font-size: 16px;
+  //   right: 436px;
+  //   top: 113px;
+  //   &:hover {
+  //     background: rgba(0, 124, 225, 0.4);
+  //   }
+  // }
+}
+</style>

vue.config.js

-const { defineConfig } = require('@vue/cli-service')
+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2026-03-09 10:19:49
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2026-03-09 16:51:20
+ * @FilePath: /chuanganqi/vue.config.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
-  transpileDependencies: true
-})
+  // eslint屏蔽
+  transpileDependencies: true,
+  // 代理
+  devServer: {
+    //开启代理服务器 (方式1)   配置多个代理
+    proxy: {
+      "/api": {
+        //'/api'是自行设置的请求前缀
+        target: "http://36.148.1.253:8448/screenSetting",
+        pathRewrite: { "^/api": "" }, //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
+        // ws: true, //用于支持websocket
+        // changeOrigin: true, //用于控制请求头中的host值
+      },
+    },
+  },
+});