AGC模块完成

src/App.vue

@@ -248,7 +248,10 @@ export default {
 
           break;
         case 5:
-          this.agcDisplay = true;
+          // this.agcDisplay = true;
+           this.$router.push({
+            path: "/agcDetail",
+          });
           break;
         case 7:
           this.webMisc = true;

src/components/agcDetail/dataDetails.vue

@@ -0,0 +1,587 @@
+<template>
+  <div class="body">
+    <div
+      :class="index < 3 ? 'showContents' : 'showContents'"
+      v-for="(item, index) in station"
+      :key="index"
+    >
+      <div class="stationName">
+        <div class="titleName">{{ item.name }}</div>
+        <div class="titleNames" v-if="item.schedulingName">
+          ({{ item.schedulingName }})
+        </div>
+        <img
+          v-if="
+            !allDate[item.id]?.Status?.value ||
+            allDate[item.id]?.Status?.value === 0
+          "
+          class="statusIcons"
+          src="../../assets/img/controlcenter/daraTrue.png"
+        />
+        <img
+          v-else
+          class="statusIcons"
+          src="../../assets/img/controlcenter/dataFalse.png"
+        />
+        <div
+          class="titleNames"
+          v-if="
+            allDate[item.id]?.Status?.value &&
+            allDate[item.id]?.Status?.value !== 0
+          "
+        >
+          {{
+            (
+              (1 -
+                this.allDate[item.id]?.PowerSet?.value /
+                  this.allDate[item.id]?.InstalledCapacity?.value) *
+              100
+            ).toFixed(2)
+          }}%
+        </div>
+      </div>
+      <div class="dataList">
+        <div
+          class="data"
+          @dblclick="dbClicks(allDate[item.id]?.PowerSet, '有功设定限值')"
+        >
+          <div class="name">有功设定限值：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.PowerSet?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+          class="data"
+          @dblclick="dbClicks(allDate[item.id]?.ActualPower, '实发有功')"
+        >
+          <div class="name">实发有功：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.ActualPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+          class="data"
+          @dblclick="dbClicks(allDate[item.id]?.AgcUp, 'AGC可调上限')"
+        >
+          <div class="name">AGC可调上限：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.AgcUp?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+          class="data"
+          @dblclick="dbClicks(allDate[item.id]?.TheoryPower, '理论功率')"
+        >
+          <div class="name">理论功率：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.TheoryPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+        <div
+          class="data"
+          @dblclick="dbClicks(allDate[item.id]?.AgcLower, 'AGC可调下限')"
+        >
+          <div class="name">AGC可调下限：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.AgcLower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+
+        <div
+          class="data"
+          @dblclick="dbClicks(allDate[item.id]?.ForecastPower, '预测功率')"
+        >
+          <div class="name">预测功率：</div>
+          <div :class="index < 3 ? 'nums' : 'nums'">
+            {{ allDate[item.id]?.ForecastPower?.value ?? 0 }}
+          </div>
+          <div class="unit">MW</div>
+        </div>
+      </div>
+      <div class="condition">
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.AgcIn?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.AgcIn?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.AgcIn?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.AgcIn?.value === ''">暂无数据</div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.AgcFar?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.AgcFar?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.AgcFar?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.AgcFar?.value === ''">暂无数据</div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.SumLock?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.SumLock?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.SumLock?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.SumLock?.value === ''">
+            暂无数据
+          </div>
+        </div>
+        <div class="status">
+          <div class="name">{{ allDate[item.id]?.SubLock?.name }}：</div>
+          <img
+            v-if="allDate[item.id]?.SubLock?.value === 0"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/daraTrue.png"
+          />
+          <img
+            v-else-if="allDate[item.id]?.SubLock?.value === 1"
+            class="statusIcon"
+            src="../../assets/img/controlcenter/dataFalse.png"
+          />
+          <div v-else-if="allDate[item.id]?.SubLock?.value === ''">
+            暂无数据
+          </div>
+        </div>
+      </div>
+      <div :id="item.id" class="echarts" @dblclick="handleClick(item.id)"></div>
+    </div>
+
+    <Details
+      @closed="closed()"
+      v-model="display"
+      :partsName="partsName"
+      echartsId="modelEcharts"
+      :datas="modelDetails"
+      :calc="this.modelData.calc"
+      @search-data="search"
+      @original-data="originalData"
+    ></Details>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Details from "../basicDataDetails.vue";
+import api from "api/index";
+import dayjs from "dayjs";
+export default {
+  components: {
+    Details,
+  },
+  data() {
+    return {
+      display: false,
+      modelData: {},
+      partsName: "",
+    };
+  },
+  props: {
+    allDate: {
+      type: String,
+      default: "",
+    },
+    allChartDate: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    station: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  updated() {
+    // this.totleErtcher()
+  },
+  mounted() {},
+  methods: {
+    dbClicks(data, partsName, timeValues) {
+      this.partsName = partsName;
+      this.display = true;
+      let modelDetails = [];
+      for (let i = 0; i < 20; i++) {
+        const value = this.BASE.randomNum(50, 80);
+        const item = {
+          ts: "2025-05-26 10:27:57",
+          doubleValue: value,
+          longValue: value,
+        };
+        modelDetails.push(item);
+      }
+      this.modelDetails = modelDetails;
+      return;
+      this.modelData = data;
+      let date = new Date();
+      let endTs = timeValues
+        ? timeValues[1] > date.getTime()
+          ? date.getTime()
+          : timeValues[1]
+        : date.getTime();
+      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+      data.tag &&
+        api
+          .getPower({
+            tagName: data.tag,
+            startTs: startTs,
+            endTs: endTs,
+            interval: 60,
+          })
+          .then((res) => {
+            if (res.data.length > 0) {
+              this.partsName = partsName;
+              this.display = true;
+              this.modelDetails = res.data;
+            } else {
+              this.modelDetails = [];
+            }
+          });
+    },
+    original(data, partsName, timeValues) {
+      this.modelData = data;
+      let date = new Date();
+      let endTs = timeValues
+        ? timeValues[1] > date.getTime()
+          ? date.getTime()
+          : timeValues[1]
+        : date.getTime();
+      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+      api
+        .getOriginalPower({
+          tagName: data.tag,
+          startTs: startTs,
+          endTs: endTs,
+        })
+        .then((res) => {
+          if (res.data.length > 0) {
+            this.partsName = partsName;
+            this.display = true;
+            this.modelDetails = res.data;
+          } else {
+            this.modelDetails = [];
+          }
+        });
+    },
+    search(values, interval) {
+      this.interval = interval;
+      this.dbClicks(this.modelData, this.partsName, values);
+    },
+    originalData(values) {
+      this.original(this.modelData, this.partsName, values);
+    },
+    totleErtcher() {
+      this.allChartDate.forEach((item) => {
+        let chartDom = document.getElementById(item.id);
+        let myChart = echarts.init(chartDom, "#ffffff");
+        let option;
+        option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            show: true,
+            data: item.value.map((t) => {
+              return t.title;
+            }),
+            right: 30,
+            icon: "circle",
+            itemWidth: 6,
+            inactiveColor: "#606769",
+            textStyle: {
+              color: "#B3BDC0",
+              fontSize: 12,
+            },
+          },
+
+          grid: {
+            top: 40,
+            left: 30,
+            right: 30,
+            bottom: 40,
+          },
+
+          xAxis: [
+            {
+              type: "category",
+              boundaryGap: false,
+              axisLabel: {
+                // interval: 60,
+                showMinLabel: true,
+                showMaxLabel: true,
+                formatter: "{value}",
+                fontSize: 14,
+                textStyle: {
+                  color: "#606769",
+                },
+              },
+              axisLine: {
+                show: false,
+              },
+              data: item.value[0].value.map((items) => {
+                return items.text;
+              }),
+            },
+          ],
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 14,
+            },
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#606769",
+                type: "dashed",
+                opacity: 0.5,
+              },
+            },
+          },
+          dataZoom: [
+            {
+              show: false,
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+          ],
+          series: [
+            {
+              name: item.value[0].title,
+              smooth: true,
+              showSymbol: false,
+              data: item.value[0].value.map((items) => {
+                return items.value;
+              }),
+              type: "line",
+              lineStyle: {
+                normal: {
+                  color: "rgba(75, 85, 174, 1)",
+                  width: 1,
+                },
+              },
+            },
+            {
+              name: item.value[1].title,
+              smooth: true,
+              showSymbol: false,
+              data: item.value[1].value.map((items) => {
+                return items.value;
+              }),
+              type: "line",
+              lineStyle: {
+                normal: {
+                  color: "rgba(05, 187, 76, 1)",
+                  width: 1,
+                },
+              },
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+      });
+    },
+    handleClick(id) {
+      this.$emit("handleClick", id);
+    },
+    opened() {},
+    closed() {
+      this.detailsDisplay = false;
+      this.display = false;
+    },
+  },
+  watch: {
+    allChartDate: {
+      handler: function (json) {
+        if (json) {
+          this.totleErtcher();
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.showTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: -10px;
+  font-size: 18px;
+  color: #ffffff;
+}
+
+.showContent {
+  width: 32%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(77, 77, 77, 1);
+  /* background-color: rgba(77, 77, 77, 1); */
+  margin-right: 10px;
+  margin-left: 10px;
+  height: 44vh;
+  margin-top: 20px;
+  align-items: center;
+}
+
+.showContents {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(77, 77, 77, 1);
+  /* background-color: rgba(77, 77, 77, 1); */
+  margin-right: 10px;
+  margin-left: 10px;
+  height: 43vh;
+  margin-top: 20px;
+  align-items: center;
+}
+
+.stationName {
+  font-size: 20px;
+  width: 400px;
+  height: 45px;
+  border: 1px solid rgba(77, 77, 77, 1);
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: center;
+  color: #ffffff;
+  background-color: #000000;
+  margin-top: -15px;
+}
+
+.titleName {
+  margin-top: 10px;
+}
+
+.titleNames {
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.body {
+  background-color: black;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: 90vh;
+  overflow-y: auto;
+}
+
+.body::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none;
+}
+
+.echarts {
+  width: 100%;
+  height: 500px;
+  margin-left: 10px;
+  padding-top: -20px;
+}
+
+.dataList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-top: 27px;
+}
+
+.data {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+  justify-content: center;
+}
+
+.name {
+  display: flex;
+  flex-direction: row-reverse;
+  font-size: 12px;
+  color: #ffffff;
+}
+
+.num {
+  margin-left: 59px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
+
+.nums {
+  margin-left: 29px;
+  font-size: 16px;
+  color: #05bb4c;
+  min-width: 40px;
+}
+
+.unit {
+  font-size: 16px;
+  color: #ffffff;
+  margin-left: 15px;
+}
+
+.condition {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #3d3d3d;
+  padding-bottom: 10px;
+}
+
+.status {
+  width: 25%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.statusIcon {
+  width: 14px;
+  height: 14px;
+  margin-left: 8px;
+}
+.statusIcons {
+  width: 14px;
+  height: 14px;
+  margin-left: 20px;
+}
+</style>

src/components/agcDetail/detailsCharts.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-dialog
+    width="70%"
+    @open="opened()"
+    @closed="closed()"
+    :show-close="true"
+    class="dialogs"
+  >
+    <template #title>
+      <div class="showTitles">
+        <div class="stationName">
+          <div class="titleName">{{ showData?.name?.name }}</div>
+          <div class="titleNames" v-if="showData?.name?.names">
+            ({{ showData?.name?.names }})
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="bodyy">
+      <div id="showEcharts" class="echarts"></div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    showData: {
+      type: String,
+      default: "",
+    },
+  },
+  updated() {
+    this.showEcharts(this.showData);
+  },
+  methods: {
+    showEcharts(showData) {
+      let chartDom = document.getElementById("showEcharts");
+        chartDom.removeAttribute("_echarts_instance_")
+      let myChart = echarts.init(chartDom, "#ffffff");
+      let option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          show: true,
+          data: showData.value.map((t) => {
+            return t.title;
+          }),
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: "#606769",
+          textStyle: {
+            color: "#B3BDC0",
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              interval: 60,
+              showMinLabel: true,
+              showMaxLabel: true,
+              formatter: "{value}",
+              fontSize: 14,
+              textStyle: {
+                color: "#606769",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            data: showData.value[0].value.map((item) => {
+              return item.text;
+            }),
+          },
+        ],
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769",
+              type: "dashed",
+            },
+          },
+        },
+        series: [
+          {
+            name: showData.value[0].title,
+            smooth: true,
+            showSymbol: false,
+            data: showData.value[0].value.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(75, 85, 174, 1)",
+                width: 1,
+              },
+            },
+          },
+          {
+            name: showData.value[1].title,
+            smooth: true,
+            showSymbol: false,
+            data: showData.value[1].value.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: "rgba(05, 187, 76, 1)",
+                width: 1,
+              },
+            },
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+    opened() {},
+    closed() {
+      this.$emit("closeds");
+    },
+  },
+};
+</script>
+<style scoped>
+.echarts {
+  width: 1300px;
+  height: 60vh;
+}
+
+.stationName {
+  font-size: 20px;
+  width: 400px;
+  height: 45px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: center;
+  color: #ffffff;
+}
+
+.titleName {
+  margin-top: 10px;
+}
+
+.titleNames {
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+</style>

src/components/agcDetail/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="agcDetailBox">
+    <DataDetails
+      ref="detailst"
+      :allDate="allDate"
+      :allChartDate="allChartDate"
+      :station="station"
+      @handleClick="handleClicks"
+    ></DataDetails>
+    <DetailsCharts
+      v-model="detailsDisplay"
+      :showData="showData"
+      @closeds="closeds"
+    ></DetailsCharts>
+  </div>
+</template>
+
+<script>
+import DataDetails from "./dataDetails";
+import DetailsCharts from "./detailsCharts";
+import api from "api/index";
+import dayjs from "dayjs";
+export default {
+  components: {
+    DataDetails,
+    DetailsCharts,
+  },
+  data() {
+    return {
+      station: [
+        {
+          id: "fc01",
+          showType: "测试",
+          name: "风场_A01",
+          createTime: "2025-05-21",
+          schedulingName: "一期",
+        },
+        {
+          id: "fc02",
+          showType: "测试",
+          name: "风场_A01",
+          createTime: "2025-05-21",
+          schedulingName: "",
+        },
+        {
+          id: "fc03",
+          showType: "测试",
+          name: "风场_A02",
+          createTime: "2025-05-21",
+          schedulingName: "",
+        },
+        {
+          id: "fc04",
+          showType: "测试",
+          name: "风场_A03",
+          createTime: "2025-05-21",
+          schedulingName: "",
+        },
+      ],
+      allDate: {
+        fc01: {
+          Status: { value: 1 },
+          InstalledCapacity: { value: 207 },
+          PowerSet: { value: 198 },
+          ActualPower: { value: 89.04 },
+          AgcUp: { value: 0.2 },
+          TheoryPower: { value: 98.67 },
+          AgcLower: { value: 0 },
+          ForecastPower: { value: 45.21 },
+          AgcIn: { name: "AGC投入", value: 1 },
+          AgcFar: { name: "AGC远方", value: 0 },
+          SumLock: { name: "有功增闭锁", value: 1 },
+          SubLock: { name: "有功减闭锁", value: 0 },
+        },
+        fc02: {
+          Status: { value: 0 },
+          InstalledCapacity: { value: 7.43 },
+          PowerSet: { value: 198 },
+          ActualPower: { value: 89.04 },
+          AgcUp: { value: 0.2 },
+          TheoryPower: { value: 98.67 },
+          AgcLower: { value: 0 },
+          ForecastPower: { value: 45.21 },
+          InstalledCapacity: { value: 7.43 },
+          PowerSet: { value: 198 },
+          ActualPower: { value: 89.04 },
+          AgcUp: { value: 0.2 },
+          TheoryPower: { value: 98.67 },
+          AgcLower: { value: 0 },
+          ForecastPower: { value: 45.21 },
+          AgcIn: { name: "AGC投入", value: 1 },
+          AgcFar: { name: "AGC远方", value: 0 },
+          SumLock: { name: "有功增闭锁", value: 1 },
+          SubLock: { name: "有功减闭锁", value: 0 },
+        },
+        fc03: {
+          Status: { value: 1 },
+          InstalledCapacity: { value: 233 },
+          PowerSet: { value: 198 },
+          ActualPower: { value: 89.04 },
+          AgcUp: { value: 0.2 },
+          TheoryPower: { value: 98.67 },
+          AgcLower: { value: 0 },
+          ForecastPower: { value: 45.21 },
+          AgcIn: { name: "AGC投入", value: 1 },
+          AgcFar: { name: "AGC远方", value: 0 },
+          SumLock: { name: "有功增闭锁", value: 1 },
+          SubLock: { name: "有功减闭锁", value: 0 },
+        },
+        fc04: {
+          Status: { value: 0 },
+          InstalledCapacity: { value: 7.43 },
+          PowerSet: { value: 198 },
+          ActualPower: { value: 89.04 },
+          AgcUp: { value: 0.2 },
+          TheoryPower: { value: 98.67 },
+          AgcLower: { value: 0 },
+          ForecastPower: { value: 45.21 },
+          InstalledCapacity: { value: 7.43 },
+          PowerSet: { value: 198 },
+          ActualPower: { value: 89.04 },
+          AgcUp: { value: 0.2 },
+          TheoryPower: { value: 98.67 },
+          AgcLower: { value: 0 },
+          ForecastPower: { value: 45.21 },
+          AgcIn: { name: "AGC投入", value: 1 },
+          AgcFar: { name: "AGC远方", value: 0 },
+          SumLock: { name: "有功增闭锁", value: 1 },
+          SubLock: { name: "有功减闭锁", value: 0 },
+        },
+      },
+      allChartDate: [],
+      detailsDisplay: false,
+      showData: {},
+      intervals: "",
+    };
+  },
+
+  mounted() {
+    let allChartDate = [];
+    for (let i = 0; i < 4; i++) {
+      const item = {
+        id: `fc0${i + 1}`,
+        value: [
+          {
+            title: "实发有功",
+            value: [
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+            ],
+          },
+          {
+            title: "有功设定",
+            value: [
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+              { text: "10:41", value: this.BASE.randomNum(50, 80) },
+            ],
+          },
+        ],
+      };
+      allChartDate.push(item);
+    }
+    this.allChartDate = allChartDate;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.agcDetailBox {
+  // padding-left: 3%;
+  // padding-top: 2%;
+  color: #fff;
+}
+</style>

src/components/basicDataDetails.vue

@@ -1,6 +1,7 @@
 <template>
   <el-dialog
-    width="50%"
+    top="50px"
+    width="80%"
     @closed="closed()"
     :show-close="false"
     class="my-info-dialog"
@@ -43,7 +44,7 @@
       </div>
     </template>
     <div class="bodys">
-       <div class="dataTitle">
+      <div class="dataTitle">
         <div class="operate">
           <el-date-picker
             class="picker"
@@ -59,7 +60,7 @@
         </div>
         <div class="buttons" @click="search('flag')">导出</div>
       </div>
-      <div :id="echartsId" class="showEcharts"></div> 
+      <div :id="echartsId" class="showEcharts"></div>
     </div>
   </el-dialog>
 </template>
@@ -79,7 +80,7 @@ export default {
     echartsId: Object,
     calc: {
       type: Number,
-      default: 1
+      default: 1,
     },
   },
   updated() {
@@ -240,7 +241,7 @@ export default {
       let option;
       option = {
         tooltip: {
-          trigger: 'axis'
+          trigger: "axis",
         },
         legend: {
           show: true,
@@ -254,6 +255,12 @@ export default {
             fontSize: 12,
           },
         },
+        grid: {
+          top: 60,
+          left: 50,
+          right: 50,
+          bottom: 60,
+        },
         xAxis: [
           {
             type: "category",
@@ -291,6 +298,7 @@ export default {
             lineStyle: {
               color: "#606769",
               type: "dashed",
+              opacity: 0.5,
             },
           },
         },
@@ -348,9 +356,8 @@ export default {
 }
 
 .showEcharts {
-  width: 1030px;
+  width: 100%;
   height: 480px;
-  margin-left: 30px;
   /* padding-top: 20px; */
 }
 

src/main.js

@@ -8,8 +8,11 @@ import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 // import 'element-plus/lib/theme-chalk/index.css';
 import locale from 'element-plus/lib/locale/lang/zh-cn';
+
+import BASE from "./utils/baseTool.js"
 const app = createApp(App)
 app.config.globalProperties.$echarts = echarts
+app.config.globalProperties.BASE = BASE
 app.use(store)
 app.use(router)
 app.use(ElementPlus, { locale })

src/router/index.js

@@ -18,6 +18,11 @@ const routes = [
         component: () => import('components/temperatureMatrixNoDia.vue')
     },
     {
+        path: '/agcDetail',
+        name: 'agcDetail',
+        component: () => import('components/agcDetail/index.vue')
+    },
+    {
         path: '/ManualPage',
         name: 'ManualPage',
         component: () => import('views/ManualPage.vue')

src/views/Menu.vue

@@ -8,21 +8,20 @@
       @mouseleave="leave(item.id)"
       @mouseenter="hovers(item.id)"
     >
-    <!-- :src="item.src" -->
-    <el-tooltip
+      <!-- :src="item.src" -->
+      <el-tooltip
         class="box-item"
         effect="dark"
         placement="right"
         :content="showTitle(item.id)"
-    >
+      >
         <img
-        :class="item.id !== 8 ? 'muen-icon' : 'muen-lock'"
-        :src="showIcon(item)"
-        
-        alt=""
-      />
-    </el-tooltip>
-      
+          :class="item.id !== 8 ? 'muen-icon' : 'muen-lock'"
+          :src="showIcon(item)"
+          alt=""
+        />
+      </el-tooltip>
+
       <div v-if="item.id === 3" class="num">{{ temperatureNum }}</div>
     </div>
     <div
@@ -36,7 +35,9 @@
       <div class="content" @click="handleSearch(6, 'status')">状态时间查询</div>
       <div class="content" @click="handleSearch(6, 'action')">动作查询</div>
       <div class="content" @click="handleSearch(6, 'record')">推荐记录查询</div>
-      <div class="content" @click="handleSearch(6, 'changeState')">状态变化查询</div>
+      <div class="content" @click="handleSearch(6, 'changeState')">
+        状态变化查询
+      </div>
       <!-- <div class="content-end" @click="handleSearch(6, 'calendar')">检修推荐</div> -->
     </div>
   </div>
@@ -143,86 +144,86 @@ export default {
   },
   methods: {
     showTitle(id) {
-        let str = ''
-        if (id === 1) {
-            str = '首页'
-        } else if(id === 2) {
-            str = '矩阵'
-        } else if(id === 3) {
-            str = '温度矩阵'
-        } else if(id === 4) {
-            str = '升压站'
-        } else if(id === 5) {
-            str = 'AGC'
-        } else if(id === 7) {
-            str = '大数据训练样本库'
-        } else if(id === 8) {
-            str = '锁屏'
-        } else if(id === 9) {
-            str = '声音'
-        } else if(id === 10) {
-            str = '截图'
-        } else if(id === 11) {
-            str = '设置'
-        }
-        return str
+      let str = "";
+      if (id === 1) {
+        str = "首页";
+      } else if (id === 2) {
+        str = "矩阵";
+      } else if (id === 3) {
+        str = "温度矩阵";
+      } else if (id === 4) {
+        str = "升压站";
+      } else if (id === 5) {
+        str = "AGC";
+      } else if (id === 7) {
+        str = "大数据训练样本库";
+      } else if (id === 8) {
+        str = "锁屏";
+      } else if (id === 9) {
+        str = "声音";
+      } else if (id === 10) {
+        str = "截图";
+      } else if (id === 11) {
+        str = "设置";
+      }
+      return str;
     },
     showmenuSty(item) {
-        let str = ''
-        if (item.id === this.current) {
-            str = 'menu-onItem'
-            if (item.id === 8) {
-                if (!this.lockMaskDisplay) {
-                    str = 'menu-item'
-                } else {
-                    str = 'menu-onItem'
-                }
-            }
-            if (item.id === 9) {
-                if (!this.voiceCV) {
-                    str = 'menu-item'
-                } else {
-                    str = 'menu-onItem'
-                }
-            }
-        } else {
-            str = 'menu-item'
+      let str = "";
+      if (item.id === this.current) {
+        str = "menu-onItem";
+        if (item.id === 8) {
+          if (!this.lockMaskDisplay) {
+            str = "menu-item";
+          } else {
+            str = "menu-onItem";
+          }
         }
-        // item.id === 8 ? !lockMaskDisplay?'menu-item' :'menu-onItem': item.id === current?'menu-onItem': 'menu-item'
-        return str
+        if (item.id === 9) {
+          if (!this.voiceCV) {
+            str = "menu-item";
+          } else {
+            str = "menu-onItem";
+          }
+        }
+      } else {
+        str = "menu-item";
+      }
+      // item.id === 8 ? !lockMaskDisplay?'menu-item' :'menu-onItem': item.id === current?'menu-onItem': 'menu-item'
+      return str;
     },
     showIcon(item) {
-        let show = null
-        if (item.id === this.current) {
-            if (item.id === 8) {
-                if (this.lockMaskDisplay) {
-                    show = item.src
-                } else {
-                    show = item.src1
-                }
-            } else if (item.id === 9) {
-                if (this.voiceCV) {
-                    show = item.src1
-                } else {
-                    show = item.src
-                }
-            } else {
-                show = item.src
-            }
+      let show = null;
+      if (item.id === this.current) {
+        if (item.id === 8) {
+          if (this.lockMaskDisplay) {
+            show = item.src;
+          } else {
+            show = item.src1;
+          }
+        } else if (item.id === 9) {
+          if (this.voiceCV) {
+            show = item.src1;
+          } else {
+            show = item.src;
+          }
         } else {
-            if (item.id === 8) {
-                show = item.src1
-            } else {
-                show = item.src
-            }
+          show = item.src;
         }
-        return show
+      } else {
+        if (item.id === 8) {
+          show = item.src1;
+        } else {
+          show = item.src;
+        }
+      }
+      return show;
     },
     handleChange(val) {
       if (!this.lockMaskDisplay || val === 8) {
-        if(val === 10){
+        if (val === 10) {
           this.$emit("handleChange", val);
-        }else if (val !== 6) {
+        } else if (val !== 6) {
           this.current = val;
           this.$emit("handleChange", val);
         }