From 524451ef93534fdfc7084501ddd4a1d649859783 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期六, 22 三月 2025 17:25:03 +0800
Subject: [PATCH] feat: 添加图形分析，汇总统计功能
---
src/views/screen/temperature/graphic/index.vue | 268 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 268 insertions(+), 0 deletions(-)
diff --git a/src/views/screen/temperature/graphic/index.vue b/src/views/screen/temperature/graphic/index.vue
index fa5c4cb..13c8dad 100644
--- a/src/views/screen/temperature/graphic/index.vue
+++ b/src/views/screen/temperature/graphic/index.vue
@@ -1,4 +1,162 @@
<script setup>
+import {ref, reactive, onMounted} from "vue";
+import * as echarts from 'echarts/core';
+import html2canvas from "html2canvas";
+
+const startTime = ref()
+const endTime = ref()
+const searchVal = ref()
+const selectType = ref(1);
+const typeOption = ref([
+ { label: '水电站流量监测点', value: 1 },
+ { label: '新扎口流量监测点', value: 2 },
+])
+const graphicRef = ref(null)
+const chartsRef = ref([]) //动态生成图表ref
+let charts = []
+
+// 动态设置ref
+const setChartsRef = (el ,index) => {
+ if(el){
+ chartsRef.value[index] = el
+ charts[index] = 'charts' + index
+ }
+}
+
+const data = [
+ [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
+ [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
+ [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
+ [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
+ [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
+ [ {name: '一月', value: 22}, {name: '二月', value: 38}, {name: '三月', value: 31}, ],
+]
+
+// 获取图表配置
+const getChartsOptions = (data, unit, maxData, minData=0) => {
+ let xdata = [];
+ let sdata = [];
+ if(data) {
+ data.forEach(item => {
+ xdata.push(item.name)
+ sdata.push(item.value);
+ })
+ }
+ return {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: 50,
+ left: 50,
+ right: 50,
+ bottom: 40
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: xdata,
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1rem'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: unit,
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: '1rem'
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1rem'
+ }
+ },
+ series: [
+ {
+ data: sdata,
+ type: 'line',
+ areaStyle: {},
+ markLine: {
+ symbol: 'none',
+ label: {
+ show: false
+ },
+ data: [
+ {
+ yAxis: maxData
+ },
+ {
+ yAxis: minData
+ }
+ ]
+ },
+ }
+ ],
+ visualMap: [
+ {
+ type: 'piecewise',
+ show: false,
+ dimension: 1,
+ seriesIndex: 0,
+ pieces: [
+ {
+ // 不指定 min，表示 min 为无限大（-Infinity）。
+ max: minData, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色
+ color: 'red'
+ },
+ {
+ // 不指定 max，表示 max 为无限大（Infinity）。
+ min: maxData, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
+ color: 'red'
+ }
+ ],
+ outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
+ color: '#8EE5FA'
+ }
+ }
+ ],
+ }
+}
+
+
+// 初始化图表
+const initCharts = () => {
+ data.forEach((item, index) => {
+ if(chartsRef.value[index]) {
+ charts[index] = echarts.init(chartsRef.value[index])
+ const option = getChartsOptions(item, '℃', 35)
+ charts[index].setOption(option)
+ }
+ })
+}
+
+// 全屏操作
+const handleFullScreen = () => {
+ graphicRef.value.requestFullscreen()
+}
+
+// 一键导出
+const handleExport = () => {
+ chartsRef.value?.forEach(item => {
+ html2canvas(item, {
+ scale: 2, // 提高渲染质量
+ useCORS: true, // 如果需要跨域资源
+ allowTaint: true, // 如果需要处理跨域图片
+ backgroundColor: 'rgba(23, 108, 229, 0.3)' //背景色
+ }).then(canvas => {
+ const link = document.createElement("a");
+ link.href = canvas.toDataURL("image/png");
+ link.download = '截图.png';
+ link.click()
+ })
+ })
+}
+
+onMounted(() => {
+ initCharts()
+})
</script>
@@ -20,6 +178,55 @@
<el-menu-item index="2-1">新扎口流量监测点</el-menu-item>
</el-sub-menu>
</el-menu>
+ </div>
+ <div class="graphic-info">
+ <div class="graphic-tool">
+ <div class="tool-l">
+ <div class="name">开始时间</div>
+ <el-date-picker
+ v-model="startTime"
+ type="datetime"
+ style="width: 12rem"
+ placeholder="请选择开始时间"
+ />
+ <div class="name">结束时间</div>
+ <el-date-picker
+ v-model="endTime"
+ type="datetime"
+ style="width: 12rem"
+ placeholder="请选择结束时间"
+ />
+ <div class="name">监测点区域</div>
+ <el-select
+ v-model="selectType"
+ class="tool-select"
+ placeholder="Select"
+ style="width: 10rem"
+ >
+ <el-option
+ v-for="item in typeOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-input v-model="searchVal" style="width: 15rem" placeholder="请输入监测点名称" />
+ <el-button><el-icon><Search /></el-icon>搜索</el-button>
+ <el-button type="success" @click="handleExport">一键导出</el-button>
+ </div>
+ <div class="tool-r" @click="handleFullScreen">
+ <img src="@/assets/images/flow/fullscreen.png" />
+ 全屏
+ </div>
+ </div>
+ <div class="graphic-box" ref="graphicRef">
+ <div class="chartList">
+ <div class="chartItem" v-for="(item, index) in data">
+ <div class="charts" :ref="el => setChartsRef(el, index)"></div>
+ <div class="name">标题</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</template>
@@ -67,5 +274,66 @@
}
}
}
+ .graphic-info {
+ flex-shrink: 0;
+ width: 80%;
+ height: 100%;
+ background: linear-gradient(180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
+ .graphic-tool {
+ width: 100%;
+ height: 60px;
+ padding: 0 30px;
+ background: linear-gradient(90deg, #91BDDB 0%, #DADFE3 100%);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .tool-l {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ .name {
+ font-size: 1.1rem;
+ }
+ }
+
+ .tool-r {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 25px;
+ margin-right: 10px;
+ }
+ }
+ }
+ .graphic-box{
+ height: calc(100% - 60px);
+ padding: 10px 30px;
+ .chartList{
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ .chartItem{
+ width: 32%;
+ height: 48%;
+ background: rgba(23,108,229,0.3);
+ border: 1px solid #176CE5;
+ border-radius: 8px;
+ .charts{
+ height: 90%;
+ }
+ .name{
+ height: 10%;
+ text-align: center;
+ font-size: 20px;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3