From d628ded51f51e3d0f6c55ae2a57e960f908adc1a Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期三, 19 三月 2025 17:21:47 +0800
Subject: [PATCH] 重点设备
---
zhitan-vue/src/views/keyEquipment/comps/LineChart.vue | 177 +++++++++++
zhitan-vue/src/views/keyEquipment/monthly/index.vue | 219 +++++++++++++
zhitan-vue/src/api/keyEquipment/api.js | 67 ++++
zhitan-vue/src/views/keyEquipment/year/index.vue | 226 ++++++++++++++
zhitan-vue/src/views/keyEquipment/daily/index.vue | 232 ++++++++++++++
5 files changed, 921 insertions(+), 0 deletions(-)
diff --git a/zhitan-vue/src/api/keyEquipment/api.js b/zhitan-vue/src/api/keyEquipment/api.js
new file mode 100644
index 0000000..9972ae6
--- /dev/null
+++ b/zhitan-vue/src/api/keyEquipment/api.js
@@ -0,0 +1,67 @@
+import request from "@/utils/request"
+export default {
+ // 鏌ヨ鎵�鏈夎澶囧垪琛�
+ getFacilityArchives(data) {
+ return request({
+ url: "/keyEquipment/dailyKeyEquipment/getFacilityArchives",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 鏌ヨ閲嶇偣璁惧鍒楄〃
+ getPointFacility(data) {
+ return request({
+ url: "/keyEquipment/dailyKeyEquipment/getPointFacility",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 閲嶇偣璁惧鑳借�楀垎鏋愶紙鏃ワ級鍥捐〃
+ dailyList(data) {
+ return request({
+ url: "/keyEquipment/dailyKeyEquipment/list",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 閲嶇偣璁惧鑳借�楀垎鏋愶紙鏃ワ級鍥捐〃
+ dailyChart(data) {
+ return request({
+ url: "/keyEquipment/dailyKeyEquipment/listChart",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 閲嶇偣璁惧鑳借�楃粺璁★紙鏈堬級鍒楄〃
+ monthlyList(data) {
+ return request({
+ url: "/keyEquipment/MonthlyKeyEquipment/list",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 閲嶇偣璁惧鑳借�楃粺璁★紙鏈堬級鍥捐〃
+ monthlyChart(data) {
+ return request({
+ url: "/keyEquipment/MonthlyKeyEquipment/listChart",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 閲嶇偣璁惧鑳借�楃粺璁★紙骞达級鍒楄〃
+ yearList(data) {
+ return request({
+ url: "/keyEquipment/YearKeyEquipment/list",
+ method: "GET",
+ params: data,
+ })
+ },
+ // 閲嶇偣璁惧鑳借�楃粺璁★紙骞达級鍥捐〃
+ yearChart(data) {
+ return request({
+ url: "/keyEquipment/YearKeyEquipment/listChart",
+ method: "GET",
+ params: data,
+ })
+ },
+}
diff --git a/zhitan-vue/src/views/keyEquipment/comps/LineChart.vue b/zhitan-vue/src/views/keyEquipment/comps/LineChart.vue
new file mode 100644
index 0000000..75914f3
--- /dev/null
+++ b/zhitan-vue/src/views/keyEquipment/comps/LineChart.vue
@@ -0,0 +1,177 @@
+<template>
+ <div class="chart-box">
+ <div id="ChartDom" style="width: 100%; height: 100%"></div>
+ </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts"
+const { proxy } = getCurrentInstance()
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
+const emit = defineEmits()
+const props = defineProps({
+ chartData: {
+ type: Object,
+ default: () => {},
+ },
+})
+
+watch(
+ () => props.chartData,
+ (val) => {
+ console.log("watch", val)
+ initChart()
+ }
+)
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ initChart()
+ }
+)
+
+onMounted(() => {
+ initChart()
+})
+
+function initChart(value) {
+ const chartDom = document.getElementById("ChartDom")
+ if (echarts.getInstanceByDom(chartDom)) {
+ echarts.dispose(chartDom)
+ }
+ const myChart = echarts.init(chartDom)
+ let option = {
+ title: {
+ text: props.chartData.title,
+ left: "40",
+ textStyle: {
+ color: "#2979ff",
+ },
+ },
+ color: ["#40c2ff", "#2979ff", "#ff9900", "#fa3534"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 14,
+ itemHeight: 10,
+ textStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ grid: {
+ top: "60",
+ left: "50",
+ right: "40",
+ bottom: "20",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ axisPointer: {
+ type: "shadow",
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ padding: [5, 0, 0, 0],
+ // formatter: '{value} ml'
+ },
+ data: props.chartData.xData,
+ },
+ yAxis: [
+ {
+ type: "value",
+ nameTextStyle: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ padding: [0, 0, 5, 0],
+ },
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ axisLabel: {
+ color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+ fontSize: 14,
+ },
+ },
+ ],
+ series: [
+ {
+ name: props.chartData.title,
+ type: "bar",
+ barWidth: "16",
+ // tooltip: {
+ // valueFormatter: function (value) {
+ // return value + "tce"
+ // },
+ // },
+ itemStyle: {
+ borderRadius: [15, 15, 0, 0],
+ },
+ data: props.chartData.yData,
+ markPoint: {
+ data: [
+ { type: "max", name: "Max" },
+ { type: "min", name: "Min" },
+ ],
+ },
+ },
+ ],
+ }
+ setTimeout(() => {
+ myChart.setOption(option)
+ }, 200)
+
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart.resize()
+ },
+ { passive: true }
+ )
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+ width: 100%;
+ height: 400px;
+ border: 1px solid #eaeaea;
+ margin-top: 20px;
+ padding-top: 20px;
+}
+</style>
diff --git a/zhitan-vue/src/views/keyEquipment/daily/index.vue b/zhitan-vue/src/views/keyEquipment/daily/index.vue
new file mode 100644
index 0000000..f247892
--- /dev/null
+++ b/zhitan-vue/src/views/keyEquipment/daily/index.vue
@@ -0,0 +1,232 @@
+<template>
+ <div class="page">
+ <div class="form-card">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
+ <!-- <el-form-item label="閲嶇偣璁惧" prop="energyType">
+ <el-select v-model="queryParams.energyType" placeholder="璇烽�夋嫨閲嶇偣璁惧">
+ <el-option :label="item.name" :value="item.id" v-for="item in facilityList" :key="item.id" />
+ </el-select>
+ </el-form-item> -->
+ <el-form-item label="鑳芥簮绫诲瀷" prop="energyType">
+ <el-select v-model="queryParams.energyType" placeholder="璇烽�夋嫨鑳芥簮绫诲瀷">
+ <el-option
+ :label="item.enername"
+ :value="item.enersno"
+ v-for="item in energyTypeList"
+ :key="item.enersno"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="缁熻鏃堕棿">
+ <el-date-picker
+ v-model="queryParams.dataTime"
+ type="date"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ placeholder="閫夋嫨鏃ユ湡"
+ style="width: 100%"
+ :clearable="false"
+ />
+ </el-form-item>
+ <el-form-item>
+ <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="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button>
+ </el-form-item> -->
+ </el-form>
+ </div>
+
+ <div class="table-bg-style" style="padding-bottom: 12px">
+ <div class="table-box">
+ <el-table :data="energyList" v-loading="loading" border max-height="380px">
+ <el-table-column fixed prop="indexName" label="鎸囨爣鍚嶇О" width="210px">
+ <template #default="scope">
+ <div style="width: 100%; text-align: left">
+ <el-button
+ v-if="scope.row.indexId == queryParams.indexId"
+ icon="search"
+ circle
+ @click="selectChange(scope.row)"
+ style="color: #fff; background: #409eff; margin-right: 8px"
+ ></el-button>
+ <el-button
+ v-else
+ icon="search"
+ circle
+ @click="selectChange(scope.row)"
+ style="margin-right: 8px"
+ ></el-button>
+ <el-tooltip
+ v-if="scope.row.indexName.length > 9"
+ class="item"
+ effect="dark"
+ :content="scope.row.indexName"
+ placement="top-end"
+ >
+ <span>
+ {{ scope.row.indexName.substr(0, 9) + "..." }}
+ </span>
+ </el-tooltip>
+ <span v-else>{{ scope.row.indexName }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column v-for="index in 24" :key="index" :label="index - 1 + '鏃�'" align="center" min-width="100">
+ <template #default="scope">{{ numFilter(scope.row[`value${index - 1}`]) }}</template>
+ </el-table-column>
+ </el-table>
+
+ <div>
+ <line-chart ref="LineChartRef" :chartData="lineChartData" />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+import keyEquipmentApi from "@/api/keyEquipment/api"
+import LineChart from "../comps/LineChart.vue"
+let { proxy } = getCurrentInstance()
+const facilityList = ref([])
+function getEquip() {
+ keyEquipmentApi.getPointFacility().then((res) => {
+ facilityList.value = res.data
+ })
+}
+getEquip()
+
+const energyTypeList = ref()
+function getEnergyTypeList() {
+ listEnergyTypeList().then((res) => {
+ energyTypeList.value = res.data
+ // form.value.indexType = alarm_record_category.value[0].value
+ // form.value.energyType = energyTypeList.value[0].enersno
+ getList()
+ })
+}
+getEnergyTypeList()
+function numFilter(value) {
+ // 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
+ let realVal = ""
+ if (!isNaN(value) && value !== "" && value !== null) {
+ realVal = parseFloat(value).toFixed(2)
+ } else {
+ realVal = "--"
+ }
+ return realVal
+}
+let loading = ref(false)
+let total = ref(0)
+let queryParams = ref({
+ indexStorageId: "",
+ indexCode: "",
+ pageNum: 1,
+ pageSize: 10,
+ dataTime: "",
+})
+
+const energyList = ref([])
+const lineChartData = ref({})
+function getList() {
+ queryParams.value.indexCode = proxy.$route.query.modelCode
+ keyEquipmentApi
+ .dailyList({
+ ...queryParams.value,
+ timeType: "HOUR",
+ })
+ .then((response) => {
+ energyList.value = response.data
+ if (response.data && response.data.length !== 0) {
+ selectChange(response.data[0])
+ } else {
+ lineChartData.value = {}
+ }
+ })
+}
+
+const LineChartRef = ref()
+function selectChange(row) {
+ queryParams.value.indexId = row ? row.indexId : undefined
+ queryParams.value.timeType = "HOUR"
+ keyEquipmentApi.dailyChart(queryParams.value).then((response) => {
+ let actualData = []
+ let expectedData = []
+ let title = ""
+ response.data.forEach((item) => {
+ expectedData.push(numFilter(item.value))
+ actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "鏃�")
+ title = item.indexName + "(" + (item.unitId || "") + ")"
+ })
+
+ console.log(response)
+ console.log(actualData)
+ console.log(expectedData)
+
+ lineChartData.value = {
+ xData: actualData,
+ yData: expectedData,
+ title,
+ }
+ // LineChartRef.value.initChart()
+ // this.lineChartData.actualData = actualData;
+ // this.lineChartData.expectedData = expectedData;
+ // this.lineChartData.title = title;
+ // this.$refs.LineChart.initChart(this.lineChartData);
+ // this.$refs.BarChart.initChart(this.lineChartData);
+ })
+}
+
+function getTime() {
+ var date = new Date()
+ var year = date.getFullYear()
+ var month = date.getMonth() + 1
+ var date = date.getDate()
+ month = month < 10 ? "0" + month : month
+ date = date < 10 ? "0" + date : date
+ queryParams.value.dataTime = year + "-" + month + "-" + date
+}
+getTime()
+
+// 瀵煎嚭鎸夐挳鎿嶄綔
+function handleExport() {
+ exportList(queryParams.value).then((response) => {
+ console.log(response)
+ // download(response.msg);
+ })
+}
+
+function handleQuery() {
+ queryParams.value.pageNum = 1
+ getList()
+}
+
+function resetQuery() {
+ queryParams.value = {
+ limitName: "",
+ pageNum: 1,
+ pageSize: 10,
+ dataTime: null,
+ }
+ getTime()
+ getList()
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/page.scss";
+
+.header-box {
+ :deep .el-form-item__content {
+ color: #fff;
+ font-size: 16px;
+ }
+}
+
+:deep .el-table--fit {
+ border-bottom: 1px solid #eaeaea;
+}
+</style>
diff --git a/zhitan-vue/src/views/keyEquipment/monthly/index.vue b/zhitan-vue/src/views/keyEquipment/monthly/index.vue
new file mode 100644
index 0000000..af4344b
--- /dev/null
+++ b/zhitan-vue/src/views/keyEquipment/monthly/index.vue
@@ -0,0 +1,219 @@
+<template>
+ <div class="page">
+ <div class="form-card">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
+ <el-form-item label="鑳芥簮绫诲瀷" prop="energyType">
+ <el-select v-model="queryParams.energyType" placeholder="璇烽�夋嫨鑳芥簮绫诲瀷">
+ <el-option
+ :label="item.enername"
+ :value="item.enersno"
+ v-for="item in energyTypeList"
+ :key="item.enersno"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="缁熻鏃堕棿">
+ <el-date-picker
+ style="width: 100%"
+ v-model="queryParams.dataTime"
+ type="month"
+ :clearable="false"
+ value-format="yyyy-MM"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item>
+ <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="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button>
+ </el-form-item> -->
+ </el-form>
+ </div>
+
+ <div class="table-bg-style" style="padding-bottom: 12px">
+ <div class="table-box">
+ <el-table :data="energyList" v-loading="loading" border max-height="380px">
+ <el-table-column fixed prop="indexName" label="鎸囨爣鍚嶇О" width="210px">
+ <template #default="scope">
+ <div style="width: 100%; text-align: left">
+ <el-button
+ v-if="scope.row.indexId == queryParams.indexId"
+ icon="search"
+ circle
+ @click="selectChange(scope.row)"
+ style="color: #fff; background: #409eff; margin-right: 8px"
+ ></el-button>
+ <el-button
+ v-else
+ icon="search"
+ circle
+ @click="selectChange(scope.row)"
+ style="margin-right: 8px"
+ ></el-button>
+ <el-tooltip
+ v-if="scope.row.indexName.length > 9"
+ class="item"
+ effect="dark"
+ :content="scope.row.indexName"
+ placement="top-end"
+ >
+ <span>
+ {{ scope.row.indexName.substr(0, 9) + "..." }}
+ </span>
+ </el-tooltip>
+ <span v-else>{{ scope.row.indexName }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column v-for="index in 31" :key="index" :label="index + '鏃�'" align="center" min-width="100">
+ <template #default="scope">{{ numFilter(scope.row[`value${index}`]) }}</template>
+ </el-table-column>
+ </el-table>
+ <div>
+ <line-chart ref="LineChartRef" :chartData="lineChartData" />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { getDataList, getlistChart } from "@/api/comprehensiveStatistics/monthlyComprehensive/monthlyComprehensive"
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+import keyEquipmentApi from "@/api/keyEquipment/api"
+import LineChart from "../comps/LineChart.vue"
+let { proxy } = getCurrentInstance()
+const energyTypeList = ref()
+function getEnergyTypeList() {
+ listEnergyTypeList().then((res) => {
+ energyTypeList.value = res.data
+ // form.value.indexType = alarm_record_category.value[0].value
+ // form.value.energyType = energyTypeList.value[0].enersno
+ getList()
+ })
+}
+getEnergyTypeList()
+function numFilter(value) {
+ // 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
+ let realVal = ""
+ if (!isNaN(value) && value !== "" && value !== null) {
+ realVal = parseFloat(value).toFixed(2)
+ } else {
+ realVal = "--"
+ }
+ return realVal
+}
+let loading = ref(false)
+let total = ref(0)
+let queryParams = ref({
+ indexStorageId: "",
+ indexCode: "",
+ pageNum: 1,
+ pageSize: 10,
+ dataTime: "",
+ timeType: "DAY",
+})
+
+const energyList = ref([])
+const lineChartData = ref({})
+function getList() {
+ queryParams.value.indexCode = proxy.$route.query.modelCode
+ keyEquipmentApi
+ .monthlyList({
+ ...queryParams.value,
+ })
+ .then((response) => {
+ energyList.value = response.data
+ if (energyList.value && energyList.value.length !== 0) {
+ selectChange(energyList.value[0])
+ } else {
+ lineChartData.value = {}
+ }
+ })
+}
+
+const LineChartRef = ref()
+function selectChange(row) {
+ queryParams.value.indexId = row ? row.indexId : undefined
+ keyEquipmentApi.monthlyChart(queryParams.value).then((response) => {
+ let actualData = []
+ let expectedData = []
+ let title = ""
+ response.data.forEach((item) => {
+ expectedData.push(numFilter(item.value))
+ actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "鏃�")
+ title = item.indexName + "(" + (item.unitId || "") + ")"
+ })
+
+ console.log(response)
+ console.log(actualData)
+ console.log(expectedData)
+
+ lineChartData.value = {
+ xData: actualData,
+ yData: expectedData,
+ title,
+ }
+ // LineChartRef.value.initChart()
+ // this.lineChartData.actualData = actualData;
+ // this.lineChartData.expectedData = expectedData;
+ // this.lineChartData.title = title;
+ // this.$refs.LineChart.initChart(this.lineChartData);
+ // this.$refs.BarChart.initChart(this.lineChartData);
+ })
+}
+
+function getTime() {
+ var date = new Date()
+ var year = date.getFullYear()
+ var month = date.getMonth() + 1
+ var date = date.getDate()
+ month = month < 10 ? "0" + month : month
+ date = date < 10 ? "0" + date : date
+ queryParams.value.dataTime = year + "-" + month
+}
+getTime()
+
+// 瀵煎嚭鎸夐挳鎿嶄綔
+function handleExport() {
+ exportList(queryParams.value).then((response) => {
+ console.log(response)
+ // download(response.msg);
+ })
+}
+
+function handleQuery() {
+ queryParams.value.pageNum = 1
+ getList()
+}
+
+function resetQuery() {
+ queryParams.value = {
+ limitName: "",
+ pageNum: 1,
+ pageSize: 10,
+ dataTime: null,
+ timeType: "DAY",
+ }
+ getTime()
+ getList()
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/page.scss";
+
+.header-box {
+ :deep .el-form-item__content {
+ color: #fff;
+ font-size: 16px;
+ }
+}
+
+:deep .el-table--fit {
+ border-bottom: 1px solid #eaeaea;
+}
+</style>
diff --git a/zhitan-vue/src/views/keyEquipment/year/index.vue b/zhitan-vue/src/views/keyEquipment/year/index.vue
new file mode 100644
index 0000000..a0b3306
--- /dev/null
+++ b/zhitan-vue/src/views/keyEquipment/year/index.vue
@@ -0,0 +1,226 @@
+<template>
+ <div class="page">
+ <div class="form-card">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
+ <el-form-item label="鑳芥簮绫诲瀷" prop="energyType">
+ <el-select v-model="queryParams.energyType" placeholder="璇烽�夋嫨鑳芥簮绫诲瀷">
+ <el-option
+ :label="item.enername"
+ :value="item.enersno"
+ v-for="item in energyTypeList"
+ :key="item.enersno"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="缁熻鏃堕棿">
+ <el-date-picker
+ style="width: 100%"
+ v-model="queryParams.dataTime"
+ type="year"
+ :clearable="false"
+ value-format="YYYY"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item>
+ <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="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button>
+ </el-form-item> -->
+ </el-form>
+ </div>
+
+ <div class="table-bg-style" style="padding-bottom: 12px">
+ <div class="table-box">
+ <el-table :data="energyList" v-loading="loading" border max-height="380px">
+ <el-table-column fixed prop="indexName" label="鎸囨爣鍚嶇О" width="210px">
+ <template #default="scope">
+ <div style="width: 100%; text-align: left">
+ <el-button
+ v-if="scope.row.indexId == queryParams.indexId"
+ icon="search"
+ circle
+ @click="selectChange(scope.row)"
+ style="color: #fff; background: #409eff; margin-right: 8px"
+ ></el-button>
+ <el-button
+ v-else
+ icon="search"
+ circle
+ @click="selectChange(scope.row)"
+ style="margin-right: 8px"
+ ></el-button>
+ <el-tooltip
+ v-if="scope.row.indexName.length > 9"
+ class="item"
+ effect="dark"
+ :content="scope.row.indexName"
+ placement="top-end"
+ >
+ <span>
+ {{ scope.row.indexName.substr(0, 9) + "..." }}
+ </span>
+ </el-tooltip>
+ <span v-else>{{ scope.row.indexName }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column v-for="index in 12" :key="index" :label="index + '鏈�'" align="center" min-width="100">
+ <template #default="scope">{{ numFilter(scope.row[`value${index}`]) }}</template>
+ </el-table-column>
+ </el-table>
+
+ <div>
+ <line-chart ref="LineChartRef" :chartData="lineChartData" />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { getDataList, getlistChart } from "@/api/comprehensiveStatistics/yearComprehensive/yearComprehensive"
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+import keyEquipmentApi from "@/api/keyEquipment/api"
+import LineChart from "../comps/LineChart.vue"
+let { proxy } = getCurrentInstance()
+const energyTypeList = ref()
+function getEnergyTypeList() {
+ listEnergyTypeList().then((res) => {
+ energyTypeList.value = res.data
+ // form.value.indexType = alarm_record_category.value[0].value
+ // form.value.energyType = energyTypeList.value[0].enersno
+ getList()
+ })
+}
+getEnergyTypeList()
+function numFilter(value) {
+ // 鎴彇褰撳墠鏁版嵁鍒板皬鏁扮偣鍚庣殑鍑犱綅
+ let realVal = ""
+ if (!isNaN(value) && value !== "" && value !== null) {
+ realVal = parseFloat(value).toFixed(2)
+ } else {
+ realVal = "--"
+ }
+ return realVal
+}
+let loading = ref(false)
+let queryParams = ref({
+ indexStorageId: "",
+ indexCode: "",
+ pageNum: 1,
+ pageSize: 10,
+ dataTime: "2025-01-0",
+ timeType: "MONTH",
+})
+
+const energyList = ref([])
+const lineChartData = ref({})
+function getList() {
+ queryParams.value.indexCode = proxy.$route.query.modelCode
+ keyEquipmentApi
+ .yearList({
+ ...queryParams.value,
+ dataTime: queryParams.value.dataTime ? queryParams.value.dataTime + "-01" : "",
+ })
+ .then((response) => {
+ energyList.value = response.data
+ if (response.data && response.data.length !== 0) {
+ selectChange(response.data[0])
+ } else {
+ lineChartData.value = {}
+ }
+ })
+}
+
+const LineChartRef = ref()
+function selectChange(row) {
+ queryParams.value.indexId = row ? row.indexId : undefined
+ keyEquipmentApi
+ .yearChart({
+ ...queryParams.value,
+ dataTime: queryParams.value.dataTime ? queryParams.value.dataTime + "-01" : "",
+ })
+ .then((response) => {
+ let actualData = []
+ let expectedData = []
+ let title = ""
+ response.data.forEach((item) => {
+ expectedData.push(numFilter(item.value))
+ actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "鏈�")
+ title = item.indexName + "(" + (item.unitId || "") + ")"
+ })
+
+ console.log(response)
+ console.log(actualData)
+ console.log(expectedData)
+
+ lineChartData.value = {
+ xData: actualData,
+ yData: expectedData,
+ title,
+ }
+ // LineChartRef.value.initChart()
+ // this.lineChartData.actualData = actualData;
+ // this.lineChartData.expectedData = expectedData;
+ // this.lineChartData.title = title;
+ // this.$refs.LineChart.initChart(this.lineChartData);
+ // this.$refs.BarChart.initChart(this.lineChartData);
+ })
+}
+
+function getTime() {
+ var date = new Date()
+ var year = date.getFullYear()
+ var month = date.getMonth() + 1
+ var date = date.getDate()
+ month = month < 10 ? "0" + month : month
+ date = date < 10 ? "0" + date : date
+ queryParams.value.dataTime = year + ""
+}
+
+// 瀵煎嚭鎸夐挳鎿嶄綔
+function handleExport() {
+ exportList(queryParams.value).then((response) => {
+ console.log(response)
+ // download(response.msg);
+ })
+}
+
+function handleQuery() {
+ queryParams.value.pageNum = 1
+ getList()
+}
+
+function resetQuery() {
+ queryParams.value = {
+ limitName: "",
+ pageNum: 1,
+ pageSize: 10,
+ dataTime: null,
+ timeType: "MONTH",
+ }
+ getTime()
+ getList()
+}
+
+getTime()
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/page.scss";
+
+.header-box {
+ :deep .el-form-item__content {
+ color: #fff;
+ font-size: 16px;
+ }
+}
+
+:deep .el-table--fit {
+ border-bottom: 1px solid #eaeaea;
+}
+</style>
--
Gitblit v1.9.3