From d0f98ad8e1047e3161a458399ad3005404ed87b8 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期五, 06 六月 2025 15:52:15 +0800
Subject: [PATCH] 标准参数管理
---
src/views/statistics/battCell.vue | 554 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 554 insertions(+), 0 deletions(-)
diff --git a/src/views/statistics/battCell.vue b/src/views/statistics/battCell.vue
new file mode 100644
index 0000000..8c65998
--- /dev/null
+++ b/src/views/statistics/battCell.vue
@@ -0,0 +1,554 @@
+<script setup name="battCell">
+import { ref, reactive, onMounted, computed, nextTick } from "vue";
+import useElement from "@/hooks/useElement.js";
+
+import barChart from '@/components/echarts/bar1.vue';
+import lineChart from '@/components/echarts/line3.vue';
+import * as echarts from 'echarts';
+import moment from 'moment';
+
+ import {
+ getSingleStatistic,
+ battMonExport,
+ } from "@/api/statistic.js";
+
+ import {
+ getBatteryBrand,
+ getMonCapByUid,
+ getMonVol,
+ } from "@/api/station";
+
+ const { $loading, $message, $confirm } = useElement();
+ const barLabels = ['浼樼', '鍔ｅ寲', '鎹熷潖'];
+
+ const chart0 = ref(null);
+const chart1 = ref(null);
+const chart2 = ref(null);
+const allGraph = ref(null);
+
+let allGraphInstance = null;
+
+const goodlistNum = ref(0);
+const badlistNum = ref(0);
+const damagelistNum = ref(0);
+const goodlist = ref([]);
+const badlist = ref([]);
+const damagelist = ref([]);
+
+
+const chartData = reactive({
+ chart0: {
+ labels: [],
+ volDatas: [],
+ resDatas: [],
+ },
+ chart1: {
+ labels: [],
+ volDatas: [],
+ resDatas: [],
+ },
+ chart2: {
+ labels: [],
+ volDatas: [],
+ resDatas: [],
+ },
+});
+
+const startDate0 = '2025-01-01 00:00:00';
+
+const startDate = ref(moment().subtract(30, 'day').format('YYYY-MM-DD'));
+const endDate = ref(moment().format('YYYY-MM-DD'));
+const moncapstd = ref('');
+const monvolstd = ref('');
+const product = ref('');
+
+
+const startDisabledDate = (time) => endDate.value ? moment(endDate.value).isBefore(time) || moment().isBefore(time) : moment().isBefore(time);
+
+ const endDisabledDate = (time) => startDate.value ? moment(time).isBefore(startDate.value) || moment().isBefore(time) : moment().isBefore(time);
+
+function formatData(list, idx) {
+ list.forEach(item => {
+ chartData[`chart${idx}`].labels.push(`${item.battgroupName}-#${item.monNum}`);
+ chartData[`chart${idx}`].volDatas.push(item.monVol);
+ chartData[`chart${idx}`].resDatas.push(item.monRes);
+ });
+}
+
+const currType = ref(0);
+const productList = ref([]);
+const monCapList = ref([]);
+const monVolList = ref([]);
+const lastParams = ref({});
+
+// 鑾峰彇鏍囩О瀹归噺
+ function getMonCapList() {
+ getMonCapByUid().then((res) => {
+ let { code, data, data2 } = res;
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ monCapList.value = list;
+ });
+ }
+
+ function getMonVolList() {
+ getMonVol().then((res) => {
+ let { code, data, data2 } = res;
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ monVolList.value = list;
+ });
+ }
+
+ function getList() {
+ let loading = $loading();
+ let params = {
+ endTime: endDate.value ? endDate.value + ' 23:59:59' : moment().format('YYYY-MM-DD') + ' 23:59:59',
+ startTime: startDate.value ? startDate.value + ' 00:00:00' : startDate0,
+ product: product.value || undefined,
+ moncapstd: moncapstd.value || undefined,
+ monvolstd: monvolstd.value || undefined,
+ };
+
+ lastParams.value = params;
+
+ getSingleStatistic(params)
+ .then((res) => {
+ let { code, data, data2 } = res;
+ let gList = [];
+ let bList = [];
+ let dList = [];
+
+ let gNum = 0;
+ let bNum = 0;
+ let dNum = 0;
+
+ loading.close();
+ if (code && data) {
+ gList = data2.goodlist;
+ bList = data2.badlist;
+ dList = data2.damagelist;
+ gNum = data2.goodlistNum;
+ bNum = data2.badlistNum;
+ dNum = data2.damagelistNum;
+ }
+ goodlistNum.value = gNum;
+ badlistNum.value = bNum;
+ damagelistNum.value = dNum;
+ goodlist.value = gList;
+ badlist.value = bList;
+ damagelist.value = dList;
+
+ formatData(gList, 0);
+ formatData(bList, 1);
+ formatData(dList, 2);
+
+ updateBarChart();
+ updateLineChart();
+ })
+ .catch((err) => {
+ console.log(err);
+ loading.close();
+ });
+ }
+
+ function updateBarChart() {
+ if (chart0.value) {
+ chart0.value.updateChart(barLabels, [goodlistNum.value, badlistNum.value, damagelistNum.value]);
+ }
+ }
+
+ function updateLineChart() {
+ let idx = currType.value;
+ if (chart1.value) {
+ chart1.value.updateChart(chartData[`chart${idx}`].labels, chartData[`chart${idx}`].volDatas);
+ }
+ if (chart2.value) {
+ chart2.value.updateChart(chartData[`chart${idx}`].labels, chartData[`chart${idx}`].resDatas);
+ }
+ }
+
+ function getProductList() {
+ getBatteryBrand().then((res) => {
+ let { code, data, data2 } = res;
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ productList.value = list;
+ });
+ }
+
+ function createGraphByOpt (xLabels, datas) {
+ xLabels = xLabels || [];
+ datas = datas || [];
+ allGraphInstance.clear();
+ let lineStyle = {
+ color: "#000",
+ };
+ let opt = {
+ animation: false,
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: 30,
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ // boundaryGap: false,
+ axisLine: {
+ lineStyle
+ },
+ data: xLabels
+ }],
+ yAxis: [{
+ type: 'value',
+ axisTick: {
+ show: true,
+ },
+ axisLine: {
+ show: true,
+ lineStyle
+ },
+ splitLine: {
+ show: false
+ }
+ }],
+ series: [{
+ type: 'line',
+ smooth: true,
+ symbolSize: 0,
+ lineStyle,
+ data: datas
+ }]
+ };
+ allGraphInstance.setOption(opt);
+
+ return allGraphInstance.getDataURL({ pixelRatio: 1, backgroundColor: "#fff" });
+ }
+
+ async function exportFile () {
+ let img0 = chart0.value.getChart().getDataURL({ pixelRatio: 1, backgroundColor: "#fff" });
+
+ let params = {
+ ...lastParams.value,
+ topPic: img0,
+ goodVolPic: createGraphByOpt(chartData.chart0.labels, chartData.chart0.volDatas),
+ goodResPic: createGraphByOpt(chartData.chart0.labels, chartData.chart0.resDatas),
+ badVolPic: createGraphByOpt(chartData.chart1.labels, chartData.chart1.volDatas),
+ badResPic: createGraphByOpt(chartData.chart1.labels, chartData.chart1.resDatas),
+ damageVolPic: createGraphByOpt(chartData.chart2.labels, chartData.chart2.volDatas),
+ damageResPic: createGraphByOpt(chartData.chart2.labels, chartData.chart2.resDatas),
+ };
+ // console.log('params', 'export', params, '=============');
+ let loading = $loading();
+ try {
+ let res = await battMonExport(params);
+ // console.log('res', res, '=============');
+ loading.close();
+ const nameList = res.headers["content-disposition"];
+ const fileName = nameList.split("=")[1];
+ let blob = res.data;
+ let url = window.URL.createObjectURL(blob);
+ let a = document.createElement("a");
+ a.href = url;
+ a.download = decodeURIComponent(fileName);
+ a.click();
+ window.URL.revokeObjectURL(url);
+ } catch (error) {
+ loading.close();
+ console.log('error', error, '=============');
+ $message.error("瀵煎嚭澶辫触");
+ }
+ }
+
+ onMounted(() => {
+ getProductList();
+ getMonCapList();
+ getMonVolList();
+
+ getList();
+ // 缁戝畾浜嬩欢
+ if (chart0.value) {
+ chart0.value.getChart().on('click', function (params) {
+ // console.log('params', params, '=============');
+ if (params.componentType == 'series') {
+ currType.value = params.dataIndex;
+ updateLineChart();
+ }
+ });
+ }
+
+ if (allGraph.value) {
+ allGraphInstance = echarts.init(allGraph.value, 'transparent');
+ }
+ });
+</script>
+
+<template>
+ <div class="page-wrapper">
+ <!-- <div class="page-header">
+ </div> -->
+ <div class="page-content">
+ <yc-card is-full>
+ <div class="page-content-wrapper">
+ <div class="page-content-tools page-filter">
+ <div class="grid-container" :style="{'--counter': 8}">
+ <div class="grid-item">
+ <div class="label">鍝佺墝</div>
+ <div class="value">
+ <el-select
+ v-model="product"
+ filterable
+ clearable
+ placeholder="璇烽�夋嫨"
+ style="width: 180px"
+ >
+ <el-option
+ v-for="(item, idx) in productList"
+ :key="'list10_' + idx"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="grid-item">
+ <div class="label">鎶曡繍鏃堕棿</div>
+ <div class="value" style="grid-column: span 5;">
+ <el-date-picker
+ v-model="startDate"
+ type="date"
+ size="small"
+ placeholder="閫夋嫨鏃ユ湡"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ :disabled-date="startDisabledDate"
+ />
+ -
+ <el-date-picker
+ v-model="endDate"
+ size="small"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ :disabled-date="endDisabledDate"
+ />
+ </div>
+ </div>
+ <div class="grid-item">
+ <div class="label">鏍囩О瀹归噺</div>
+ <div class="value">
+ <el-select
+ v-model="moncapstd"
+ filterable
+ clearable
+ placeholder="璇烽�夋嫨"
+ style="width: 180px"
+ >
+ <el-option
+ v-for="(item, idx) in monCapList"
+ :key="'list11_' + idx"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="grid-item">
+ <div class="label">鐢靛帇绛夌骇</div>
+ <div class="value">
+ <el-select
+ v-model="monvolstd"
+ filterable
+ clearable
+ placeholder="璇烽�夋嫨"
+ style="width: 180px"
+ >
+ <el-option
+ v-for="(item, idx) in monVolList"
+ :key="'list9_' + idx"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+ </div>
+ <div class="btn-grp">
+ <el-button type="primary" size="small" @click="getList">鏌ヨ</el-button>
+ <el-button type="warning" size="small" @click="exportFile">瀵煎嚭</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="page-content-table">
+ <div class="pos-rel">
+ <div class="pos-abs">
+ <div class="left">
+ <card title="鍗曚綋浼樼/鍔ｅ寲/鎹熷潖缁熻鍥�">
+ <bar-chart ref="chart0"></bar-chart>
+ </card>
+ </div>
+ <div class="right">
+ <div class="top">
+ <card title="娴厖鐢靛帇">
+ <line-chart ref="chart1"></line-chart>
+ </card>
+ </div>
+ <div class="bottom">
+ <card title="鍗曚綋鍐呴樆">
+ <line-chart ref="chart2"></line-chart>
+ </card>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </yc-card>
+ </div>
+ <div class="page-footer"></div>
+ <div class="allGraph">
+ <div class="chart-contain">
+ <div class="chart" ref="allGraph"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="less">
+.page-wrapper {
+ display: flex;
+ flex-direction: row;
+ // padding: 8px;
+ height: 100%;
+
+ .page-content {
+ flex: 1;
+ padding-bottom: 8px;
+ }
+}
+
+.page-content-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .page-content-tools {
+ padding-bottom: 8px;
+
+ .flex-row {
+ display: flex;
+ align-items: center;
+ :deep(.el-checkbox) {
+ color: #fff;
+ }
+ .group {
+ margin-left: 30px;
+ }
+ }
+ }
+
+ .page-content-table {
+ // border-top: 1px solid var(--border-light-color);
+ box-sizing: border-box;
+ flex: 1;
+ margin-left: 26px;
+ margin-right: 26px;
+ }
+
+ .page-content-page {
+ padding: 8px 8px 0 8px;
+ text-align: center;
+
+ .el-page-container {
+ display: inline-block;
+ padding: 0 16px;
+ }
+
+ .page-tool {
+ display: inline-block;
+ }
+ }
+}
+
+.hdw-card-container {
+ width: 240px;
+ padding-right: 8px;
+ height: 100%;
+}
+
+.pos-rel {
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .pos-abs {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ .left {
+ width: 400px;
+ margin-right: 10px;
+ }
+ .right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .top {
+ flex: 1;
+ }
+ .bottom {
+ margin-top: 10px;
+ flex: 1;
+ }
+ }
+ }
+}
+
+.allGraph {
+ position: absolute;
+ top: -1000px;
+ left: 0;
+ width: 600px;
+ height: 400px;
+ .chart-contain {
+ height: 100%;
+ width: 100%;
+ .chart {
+ height: 100%;
+ width: 100%;
+ }
+ }
+}
+
+.tools-filter {
+ display: inline-block;
+ font-size: 14px;
+
+ .tools-filter-item {
+ display: inline-block;
+ margin-right: 8px;
+
+ .filter-label {
+ display: inline-block;
+ }
+
+ .filter-content {
+ display: inline-block;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1