合并理去杀杀人

net

2025-02-14 06d3d15a5a08637041cc601101c063b11b07a346

 zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue

@@ -17,24 +17,16 @@
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                导出
              </el-button>
              <el-button type="primary" icon="Download" @click="handleExport"> 导出 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            height: calc(100vh - 205px) !important;
            max-height: calc(100vh - 205px) !important;
            overflow-y: auto;
          "
          style="height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <el-row>
@@ -55,16 +47,8 @@
            <el-col :span="24">
              <BaseCard :title="queryParams.nodeName + '-峰平谷分时统计'">
                <div class="table-box">
                  <el-table
                    :data="timeSharingList"
                    style="width: 100%"
                    show-summary
                  >
                    <el-table-column
                      label="时间"
                      align="center"
                      show-overflow-tooltip
                    >
                  <el-table :data="timeSharingList" style="width: 100%" show-summary>
                    <el-table-column label="时间" align="center" show-overflow-tooltip>
                      <template #default="scope">
                        {{ proxy.dayjs(scope.row.time).format("HH时") }}
                      </template>
@@ -77,12 +61,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="sharpFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="sharpFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="峰" align="center">
                      <el-table-column
@@ -92,12 +71,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="peakFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="peakFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="平" align="center">
                      <el-table-column
@@ -107,12 +81,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="flatFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="flatFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="谷" align="center">
                      <el-table-column
@@ -122,12 +91,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="valleyFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="valleyFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="合计" align="center">
                      <el-table-column
@@ -137,12 +101,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="totalFee"
                        label="总电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="totalFee" label="总电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <!-- <el-table-column label="操作" align="center">
                    <template #default="scope">
@@ -159,84 +118,27 @@
        </div>
      </div>
    </div>
    <el-dialog
      v-model="timeSharingDialogTableVisible"
      title="查看分时统计详情"
      width="1300"
    >
    <el-dialog v-model="timeSharingDialogTableVisible" title="查看分时统计详情" width="1300">
      <div class="table-box">
        <el-table :data="viewTimeSharingList" style="width: 100%" height="420">
          <el-table-column
            label="时间"
            align="center"
            show-overflow-tooltip
            width="200"
          >
          <el-table-column label="时间" align="center" show-overflow-tooltip width="200">
            <template #default="scope"> {{ scope.row.time }}时 </template>
          </el-table-column>
          <el-table-column label="尖" align="center">
            <el-table-column
              prop="sharpPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="sharpFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="sharpPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="sharpFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="峰" align="center">
            <el-table-column
              prop="peakPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="peakFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="peakPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="peakFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="平" align="center">
            <el-table-column
              prop="flatPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="flatFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="flatPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="flatFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="谷" align="center">
            <el-table-column
              prop="valleyPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="valleyFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="valleyPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="valleyFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="合计" align="center">
            <el-table-column
@@ -247,38 +149,16 @@
              width="120"
            >
              <template #default="scope">
                {{
                  scope.row.sharpPower +
                  scope.row.peakPower +
                  scope.row.flatPower +
                  scope.row.valleyPower
                }}
                {{ scope.row.sharpPower + scope.row.peakPower + scope.row.flatPower + scope.row.valleyPower }}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalCost"
              label="总电费(元)"
              align="center"
              show-overflow-tooltip
              width="100"
            >
            <el-table-column prop="totalCost" label="总电费(元)" align="center" show-overflow-tooltip width="100">
              <template #default="scope">
                {{
                  scope.row.sharpFee +
                  scope.row.peakFee +
                  scope.row.flatFee +
                  scope.row.valleyFee
                }}
                {{ scope.row.sharpFee + scope.row.peakFee + scope.row.flatFee + scope.row.valleyFee }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="nodeName"
            label="用能单元"
            align="center"
            show-overflow-tooltip
            width="200"
          />
          <el-table-column prop="nodeName" label="用能单元" align="center" show-overflow-tooltip width="200" />
        </el-table>
      </div>
    </el-dialog>
@@ -286,23 +166,23 @@
</template>

<script setup name="timeSharing">
import { listTimeSharing } from "@/api/peakValley/timeSharing";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listTimeSharing } from "@/api/peakValley/timeSharing"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const loading = ref(false);
const timeSharingList = ref([]);
const timeSharingDialogTableVisible = ref(false);
const viewTimeSharingList = ref([]);
const nodeOptions = ref(undefined);
)
const loading = ref(false)
const timeSharingList = ref([])
const timeSharingDialogTableVisible = ref(false)
const viewTimeSharingList = ref([])
const nodeOptions = ref(undefined)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -311,52 +191,52 @@
    queryTime: null,
  },
  query: { ...useRoute().query },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  handleQuery();
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  handleQuery()
}
// 峰平谷能耗分析-峰平谷分时统计-列表
function getList() {
  loading.value = true;
  loading.value = true
  listTimeSharing(
    proxy.addDateRange({
      ...queryParams.value,
      ...query.value,
    })
  ).then((res) => {
    loading.value = false;
    loading.value = false
    if (!!res.code && res.code == 200) {
      // 在初始化之前，先dispose旧的实例
      if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
        echarts.dispose(document.getElementById("Chart1"));
        echarts.dispose(document.getElementById("Chart1"))
      }
      if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
        echarts.dispose(document.getElementById("Chart2"));
        echarts.dispose(document.getElementById("Chart2"))
      }
      const myChart1 = echarts.init(document.getElementById("Chart1"));
      const myChart2 = echarts.init(document.getElementById("Chart2"));
      const myChart1 = echarts.init(document.getElementById("Chart1"))
      const myChart2 = echarts.init(document.getElementById("Chart2"))
      if (!!res.data.lineChat) {
        let xdata = [];
        let ytip = [];
        let ypeak = [];
        let yflat = [];
        let ytrough = [];
        let xdata = []
        let ytip = []
        let ypeak = []
        let yflat = []
        let ytrough = []
        res.data.lineChat.map((item) => {
          xdata.push(Number(item.xdata.slice(-8).substring(0, 2)) + "时");
          ytip.push(!!item.ytip ? item.ytip : 0);
          ypeak.push(!!item.ypeak ? item.ypeak : 0);
          yflat.push(!!item.yflat ? item.yflat : 0);
          ytrough.push(!!item.ytrough ? item.ytrough : 0);
        });
          xdata.push(Number(item.xdata.slice(-8).substring(0, 2)) + "时")
          ytip.push(!!item.ytip ? item.ytip : 0)
          ypeak.push(!!item.ypeak ? item.ypeak : 0)
          yflat.push(!!item.yflat ? item.yflat : 0)
          ytrough.push(!!item.ytrough ? item.ytrough : 0)
        })
        myChart1.setOption({
          color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
          grid: {
@@ -378,8 +258,7 @@
            itemHeight: 10,
            // right: 0,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
            // data: ['尖', '峰', '平', '谷']
          },
@@ -388,10 +267,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -404,8 +280,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -416,8 +291,7 @@
            name: "耗电量(KWH)",
            type: "value",
            nameTextStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [0, 0, 5, 0],
            },
@@ -428,10 +302,7 @@
              show: true,
              lineStyle: {
                type: "dashed",
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -441,8 +312,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              //   formatter: '{value} ml'
            },
@@ -451,33 +321,33 @@
            {
              name: "尖", // ytip
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: ytip,
            },
            {
              name: "峰", // ypeak
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: ypeak,
            },
            {
              name: "平", // yflat
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: yflat,
            },
            {
              name: "谷", // ytrough
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: ytrough,
            },
          ],
        });
        })
      }
      if (!!res.data.pieChat) {
        myChart2.setOption({
@@ -492,8 +362,7 @@
            itemGap: 10,
            // right: 0,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          series: [
@@ -505,70 +374,58 @@
              label: {
                overflow: "none",
                formatter: "{b} {c}%  ",
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
              data: [
                {
                  value: !!res.data.pieChat.tip
                    ? Number(res.data.pieChat.tip)
                    : 0,
                  value: !!res.data.pieChat.tip ? Number(res.data.pieChat.tip) : 0,
                  name: "尖",
                },
                {
                  value: !!res.data.pieChat.peak
                    ? Number(res.data.pieChat.peak)
                    : 0,
                  value: !!res.data.pieChat.peak ? Number(res.data.pieChat.peak) : 0,
                  name: "峰",
                },
                {
                  value: !!res.data.pieChat.flat
                    ? Number(res.data.pieChat.flat)
                    : 0,
                  value: !!res.data.pieChat.flat ? Number(res.data.pieChat.flat) : 0,
                  name: "平",
                },
                {
                  value: !!res.data.pieChat.trough
                    ? Number(res.data.pieChat.trough)
                    : 0,
                  value: !!res.data.pieChat.trough ? Number(res.data.pieChat.trough) : 0,
                  name: "谷",
                },
              ],
            },
          ],
        });
        })
      }
      if (!!res.data.dataList) {
        timeSharingList.value = !!res.data.dataList ? res.data.dataList : [];
        timeSharingList.value = !!res.data.dataList ? res.data.dataList : []
      }
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
          myChart2.resize();
          myChart1.resize()
          myChart2.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
// 峰平谷能耗分析-峰平谷分时统计-查看
function handleView(row) {
  queryParams.value.key = row.timeStr;
  timeSharingDialogTableVisible.value = true;
  viewTimeSharingList.value = [row];
  queryParams.value.key = row.timeStr
  timeSharingDialogTableVisible.value = true
  viewTimeSharingList.value = [row]
}
// 峰平谷能耗分析-峰平谷分时统计-搜索
function handleQuery() {
  getList();
  getList()
}
// 峰平谷能耗分析-峰平谷分时统计-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  (queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")),
    handleQuery();
  proxy.resetForm("queryRef")
  ;(queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")), handleQuery()
}
// 峰平谷能耗分析-峰平谷分时统计-导出
function handleExport() {
@@ -579,7 +436,7 @@
      ...query.value,
    },
    `${queryParams.value.nodeName}_峰平谷分时统计_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">