|
@@ -22,7 +22,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="search-right">
|
|
<div class="search-right">
|
|
|
- <el-input v-model="searchKeyword" placeholder="请输入站名" @keyup.enter="loadStationData" clearable style="width: 200px">
|
|
|
|
|
|
|
+ <el-input v-model="searchKeyword" placeholder="请输入站名/行政区名" @keyup.enter="loadData" clearable style="width: 200px">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
<el-icon><Search /></el-icon>
|
|
<el-icon><Search /></el-icon>
|
|
|
</template>
|
|
</template>
|
|
@@ -31,21 +31,31 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="table-container">
|
|
<div class="table-container">
|
|
|
- <el-table :data="tableData" stripe border v-loading="loading">
|
|
|
|
|
- <el-table-column prop="stcd" label="站码" width="100" />
|
|
|
|
|
- <el-table-column prop="stnm" label="站名" width="150" />
|
|
|
|
|
- <el-table-column prop="rvnm" label="河流名称" width="120" />
|
|
|
|
|
- <el-table-column prop="lttd" label="纬度" width="100" />
|
|
|
|
|
- <el-table-column prop="lgtd" label="经度" width="100" />
|
|
|
|
|
- <el-table-column prop="latestDataTime" label="最新数据时间" width="170" />
|
|
|
|
|
- <el-table-column prop="wt" label="水温(℃)" width="100" />
|
|
|
|
|
- <el-table-column prop="ph" label="pH" width="80" />
|
|
|
|
|
- <el-table-column prop="do" label="溶解氧(mg/L)" width="110" />
|
|
|
|
|
- <el-table-column prop="nh3n" label="氨氮(mg/L)" width="100" />
|
|
|
|
|
- <el-table-column prop="tp" label="总磷(mg/L)" width="100" />
|
|
|
|
|
- <el-table-column prop="tn" label="总氮(mg/L)" width="100" />
|
|
|
|
|
- <el-table-column prop="cod" label="COD(mg/L)" width="100" />
|
|
|
|
|
- <el-table-column prop="bod" label="BOD(mg/L)" width="100" />
|
|
|
|
|
|
|
+ <el-table :data="tableData" stripe border v-loading="loading" @row-click="handleRowClick">
|
|
|
|
|
+ <template v-if="isWryType">
|
|
|
|
|
+ <el-table-column prop="stnm" label="行政区" width="250" />
|
|
|
|
|
+ <el-table-column prop="year" label="年份" width="80" />
|
|
|
|
|
+ <el-table-column prop="cod" label="化学需氧量排放总量(吨)" width="200" />
|
|
|
|
|
+ <el-table-column prop="nh3" label="氨氮排放总量(吨)" width="200" />
|
|
|
|
|
+ <el-table-column prop="tn" label="总氮排放总量(吨)" width="200" />
|
|
|
|
|
+ <el-table-column prop="tp" label="总磷排放总量(吨)" width="200" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <el-table-column prop="stcd" label="站码" width="100" />
|
|
|
|
|
+ <el-table-column prop="stnm" label="站名" width="150" />
|
|
|
|
|
+ <el-table-column prop="rvnm" label="河流名称" width="120" />
|
|
|
|
|
+ <el-table-column prop="lttd" label="纬度" width="100" />
|
|
|
|
|
+ <el-table-column prop="lgtd" label="经度" width="100" />
|
|
|
|
|
+ <el-table-column prop="latestDataTime" label="最新数据时间" width="170" />
|
|
|
|
|
+ <el-table-column prop="wt" label="水温(℃)" width="100" />
|
|
|
|
|
+ <el-table-column prop="ph" label="pH" width="80" />
|
|
|
|
|
+ <el-table-column prop="do" label="溶解氧(mg/L)" width="110" />
|
|
|
|
|
+ <el-table-column prop="nh3n" label="氨氮(mg/L)" width="100" />
|
|
|
|
|
+ <el-table-column prop="tp" label="总磷(mg/L)" width="100" />
|
|
|
|
|
+ <el-table-column prop="tn" label="总氮(mg/L)" width="100" />
|
|
|
|
|
+ <el-table-column prop="cod" label="COD(mg/L)" width="100" />
|
|
|
|
|
+ <el-table-column prop="bod" label="BOD(mg/L)" width="100" />
|
|
|
|
|
+ </template>
|
|
|
</el-table>
|
|
</el-table>
|
|
|
|
|
|
|
|
<div v-if="tableData.length === 0 && !loading" class="empty-state">
|
|
<div v-if="tableData.length === 0 && !loading" class="empty-state">
|
|
@@ -54,13 +64,31 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <el-dialog :title="historyDialogTitle" v-model="historyDialogVisible" width="900px" append-to-body>
|
|
|
|
|
+ <div class="history-dialog-content">
|
|
|
|
|
+ <div class="history-table">
|
|
|
|
|
+ <el-table :data="historyTableData" stripe border>
|
|
|
|
|
+ <el-table-column prop="year" label="年份" width="100" />
|
|
|
|
|
+ <el-table-column prop="cod" label="化学需氧量排放总量(吨)" width="200" />
|
|
|
|
|
+ <el-table-column prop="nh3" label="氨氮排放总量(吨)" width="200" />
|
|
|
|
|
+ <el-table-column prop="tn" label="总氮排放总量(吨)" width="200" />
|
|
|
|
|
+ <el-table-column prop="tp" label="总磷排放总量(吨)" width="200" />
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="history-chart">
|
|
|
|
|
+ <div ref="chartRef" class="chart-container"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
|
|
|
|
+import { ref, onMounted, computed, nextTick, watch } from 'vue'
|
|
|
import { Search, DataAnalysis } from '@element-plus/icons-vue'
|
|
import { Search, DataAnalysis } from '@element-plus/icons-vue'
|
|
|
import request from '@/utils/request'
|
|
import request from '@/utils/request'
|
|
|
|
|
+import * as echarts from 'echarts'
|
|
|
|
|
|
|
|
const selectedUnit = ref('TBA')
|
|
const selectedUnit = ref('TBA')
|
|
|
const selectedBiz = ref('TBA_SW_1H2H')
|
|
const selectedBiz = ref('TBA_SW_1H2H')
|
|
@@ -69,9 +97,20 @@ const loading = ref(false)
|
|
|
|
|
|
|
|
const unitList = ref([])
|
|
const unitList = ref([])
|
|
|
const bizList = ref([])
|
|
const bizList = ref([])
|
|
|
-const stationList = ref([])
|
|
|
|
|
const tableData = ref([])
|
|
const tableData = ref([])
|
|
|
|
|
|
|
|
|
|
+const historyDialogVisible = ref(false)
|
|
|
|
|
+const historyDialogTitle = ref('')
|
|
|
|
|
+const historyTableData = ref([])
|
|
|
|
|
+const chartRef = ref(null)
|
|
|
|
|
+let chartInstance = null
|
|
|
|
|
+
|
|
|
|
|
+const WRY_TYPES = ['JS_ST_WRY', 'ZJ_ST_WRY', 'SH_ST_WRY']
|
|
|
|
|
+
|
|
|
|
|
+const isWryType = computed(() => {
|
|
|
|
|
+ return WRY_TYPES.includes(selectedBiz.value)
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
loadUnits()
|
|
loadUnits()
|
|
|
})
|
|
})
|
|
@@ -88,7 +127,6 @@ function loadUnits() {
|
|
|
|
|
|
|
|
function handleUnitChange(val) {
|
|
function handleUnitChange(val) {
|
|
|
selectedBiz.value = ''
|
|
selectedBiz.value = ''
|
|
|
- stationList.value = []
|
|
|
|
|
tableData.value = []
|
|
tableData.value = []
|
|
|
loadBizList(val)
|
|
loadBizList(val)
|
|
|
}
|
|
}
|
|
@@ -102,13 +140,23 @@ function loadBizList(unitCode) {
|
|
|
const bizData = res.data || []
|
|
const bizData = res.data || []
|
|
|
|
|
|
|
|
Promise.all(bizData.map(biz => {
|
|
Promise.all(bizData.map(biz => {
|
|
|
- return request({
|
|
|
|
|
- url: '/gx/station/front/listByBizCode/' + biz.bizCode,
|
|
|
|
|
- method: 'get'
|
|
|
|
|
- }).then(stationRes => {
|
|
|
|
|
- const stations = stationRes.data || []
|
|
|
|
|
- return { ...biz, stationCount: stations.length }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ if (WRY_TYPES.includes(biz.bizCode)) {
|
|
|
|
|
+ return request({
|
|
|
|
|
+ url: '/gx/stWry/front/latest/' + biz.bizCode,
|
|
|
|
|
+ method: 'get'
|
|
|
|
|
+ }).then(wryRes => {
|
|
|
|
|
+ const data = wryRes.data || []
|
|
|
|
|
+ return { ...biz, stationCount: data.length }
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return request({
|
|
|
|
|
+ url: '/gx/station/front/listByBizCode/' + biz.bizCode,
|
|
|
|
|
+ method: 'get'
|
|
|
|
|
+ }).then(stationRes => {
|
|
|
|
|
+ const stations = stationRes.data || []
|
|
|
|
|
+ return { ...biz, stationCount: stations.length }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
})).then(results => {
|
|
})).then(results => {
|
|
|
bizList.value = results
|
|
bizList.value = results
|
|
|
|
|
|
|
@@ -127,70 +175,195 @@ function loadBizList(unitCode) {
|
|
|
|
|
|
|
|
function handleBizClick(bizCode) {
|
|
function handleBizClick(bizCode) {
|
|
|
selectedBiz.value = bizCode
|
|
selectedBiz.value = bizCode
|
|
|
- loadStationData()
|
|
|
|
|
|
|
+ loadData()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-function loadStationData() {
|
|
|
|
|
|
|
+function loadData() {
|
|
|
loading.value = true
|
|
loading.value = true
|
|
|
|
|
|
|
|
- request({
|
|
|
|
|
- url: '/gx/station/front/listByBizCode/' + selectedBiz.value,
|
|
|
|
|
- method: 'get'
|
|
|
|
|
- }).then(res => {
|
|
|
|
|
- stationList.value = res.data || []
|
|
|
|
|
-
|
|
|
|
|
- let filteredStations = stationList.value
|
|
|
|
|
- if (searchKeyword.value) {
|
|
|
|
|
- const keyword = searchKeyword.value.toLowerCase()
|
|
|
|
|
- filteredStations = filteredStations.filter(s =>
|
|
|
|
|
- s.stnm.toLowerCase().includes(keyword) ||
|
|
|
|
|
- s.stcd.toLowerCase().includes(keyword)
|
|
|
|
|
- )
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- Promise.all(filteredStations.map(station => {
|
|
|
|
|
- return request({
|
|
|
|
|
- url: '/gx/quality/front/list',
|
|
|
|
|
- method: 'get',
|
|
|
|
|
- params: { stcd: station.stcd, pageSize: 1 }
|
|
|
|
|
- }).then(qualityRes => {
|
|
|
|
|
- const qualityData = qualityRes.data || []
|
|
|
|
|
- const latestQuality = qualityData.length > 0 ? qualityData[0] : {}
|
|
|
|
|
- return {
|
|
|
|
|
|
|
+ if (isWryType.value) {
|
|
|
|
|
+ request({
|
|
|
|
|
+ url: '/gx/stWry/front/latest/' + selectedBiz.value,
|
|
|
|
|
+ method: 'get'
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ let data = res.data || []
|
|
|
|
|
+
|
|
|
|
|
+ if (searchKeyword.value) {
|
|
|
|
|
+ const keyword = searchKeyword.value.toLowerCase()
|
|
|
|
|
+ data = data.filter(item =>
|
|
|
|
|
+ item.stnm.toLowerCase().includes(keyword)
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ tableData.value = data
|
|
|
|
|
+ loading.value = false
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ tableData.value = []
|
|
|
|
|
+ loading.value = false
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ request({
|
|
|
|
|
+ url: '/gx/station/front/listByBizCode/' + selectedBiz.value,
|
|
|
|
|
+ method: 'get'
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ const stationList = res.data || []
|
|
|
|
|
+
|
|
|
|
|
+ let filteredStations = stationList
|
|
|
|
|
+ if (searchKeyword.value) {
|
|
|
|
|
+ const keyword = searchKeyword.value.toLowerCase()
|
|
|
|
|
+ filteredStations = filteredStations.filter(s =>
|
|
|
|
|
+ s.stnm.toLowerCase().includes(keyword) ||
|
|
|
|
|
+ s.stcd.toLowerCase().includes(keyword)
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ Promise.all(filteredStations.map(station => {
|
|
|
|
|
+ return request({
|
|
|
|
|
+ url: '/gx/quality/front/list',
|
|
|
|
|
+ method: 'get',
|
|
|
|
|
+ params: { stcd: station.stcd, pageSize: 1 }
|
|
|
|
|
+ }).then(qualityRes => {
|
|
|
|
|
+ const qualityData = qualityRes.data || []
|
|
|
|
|
+ const latestQuality = qualityData.length > 0 ? qualityData[0] : {}
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...station,
|
|
|
|
|
+ latestDataTime: latestQuality.uploadTime || '-',
|
|
|
|
|
+ wt: latestQuality.wt || '-',
|
|
|
|
|
+ ph: latestQuality.ph || '-',
|
|
|
|
|
+ do: latestQuality.do || '-',
|
|
|
|
|
+ nh3n: latestQuality.nh3n || '-',
|
|
|
|
|
+ tp: latestQuality.tp || '-',
|
|
|
|
|
+ tn: latestQuality.tn || '-',
|
|
|
|
|
+ cod: latestQuality.cod || '-',
|
|
|
|
|
+ bod: latestQuality.bod || '-'
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ })).then(results => {
|
|
|
|
|
+ tableData.value = results
|
|
|
|
|
+ loading.value = false
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ tableData.value = filteredStations.map(station => ({
|
|
|
...station,
|
|
...station,
|
|
|
- latestDataTime: latestQuality.uploadTime || '-',
|
|
|
|
|
- wt: latestQuality.wt || '-',
|
|
|
|
|
- ph: latestQuality.ph || '-',
|
|
|
|
|
- do: latestQuality.do || '-',
|
|
|
|
|
- nh3n: latestQuality.nh3n || '-',
|
|
|
|
|
- tp: latestQuality.tp || '-',
|
|
|
|
|
- tn: latestQuality.tn || '-',
|
|
|
|
|
- cod: latestQuality.cod || '-',
|
|
|
|
|
- bod: latestQuality.bod || '-'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ latestDataTime: '-',
|
|
|
|
|
+ wt: '-',
|
|
|
|
|
+ ph: '-',
|
|
|
|
|
+ do: '-',
|
|
|
|
|
+ nh3n: '-',
|
|
|
|
|
+ tp: '-',
|
|
|
|
|
+ tn: '-',
|
|
|
|
|
+ cod: '-',
|
|
|
|
|
+ bod: '-'
|
|
|
|
|
+ }))
|
|
|
|
|
+ loading.value = false
|
|
|
})
|
|
})
|
|
|
- })).then(results => {
|
|
|
|
|
- tableData.value = results
|
|
|
|
|
- loading.value = false
|
|
|
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
|
- tableData.value = filteredStations.map(station => ({
|
|
|
|
|
- ...station,
|
|
|
|
|
- latestDataTime: '-',
|
|
|
|
|
- wt: '-',
|
|
|
|
|
- ph: '-',
|
|
|
|
|
- do: '-',
|
|
|
|
|
- nh3n: '-',
|
|
|
|
|
- tp: '-',
|
|
|
|
|
- tn: '-',
|
|
|
|
|
- cod: '-',
|
|
|
|
|
- bod: '-'
|
|
|
|
|
- }))
|
|
|
|
|
loading.value = false
|
|
loading.value = false
|
|
|
})
|
|
})
|
|
|
- }).catch(() => {
|
|
|
|
|
- loading.value = false
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleRowClick(row) {
|
|
|
|
|
+ if (isWryType.value) {
|
|
|
|
|
+ historyDialogTitle.value = `${row.stnm} 历史数据`
|
|
|
|
|
+ loadHistoryData(row.stnm)
|
|
|
|
|
+ historyDialogVisible.value = true
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function loadHistoryData(stnm) {
|
|
|
|
|
+ request({
|
|
|
|
|
+ url: '/gx/stWry/front/history',
|
|
|
|
|
+ method: 'get',
|
|
|
|
|
+ params: { bizCode: selectedBiz.value, stnm: stnm }
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ historyTableData.value = res.data || []
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ renderChart()
|
|
|
|
|
+ })
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+function renderChart() {
|
|
|
|
|
+ if (!chartRef.value) return
|
|
|
|
|
+
|
|
|
|
|
+ if (chartInstance) {
|
|
|
|
|
+ chartInstance.dispose()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ chartInstance = echarts.init(chartRef.value)
|
|
|
|
|
+
|
|
|
|
|
+ const sortedData = [...historyTableData.value].sort((a, b) => a.year - b.year)
|
|
|
|
|
+ const years = sortedData.map(item => item.year + '年')
|
|
|
|
|
+ const codData = sortedData.map(item => item.cod || 0)
|
|
|
|
|
+ const nh3Data = sortedData.map(item => item.nh3 || 0)
|
|
|
|
|
+ const tnData = sortedData.map(item => item.tn || 0)
|
|
|
|
|
+ const tpData = sortedData.map(item => item.tp || 0)
|
|
|
|
|
+
|
|
|
|
|
+ const option = {
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
|
+ axisPointer: {
|
|
|
|
|
+ type: 'shadow'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ data: ['COD', '氨氮', '总氮', '总磷'],
|
|
|
|
|
+ bottom: 10
|
|
|
|
|
+ },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ left: '3%',
|
|
|
|
|
+ right: '4%',
|
|
|
|
|
+ bottom: '15%',
|
|
|
|
|
+ top: '10%',
|
|
|
|
|
+ containLabel: true
|
|
|
|
|
+ },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ data: years,
|
|
|
|
|
+ axisLabel: {
|
|
|
|
|
+ rotate: 45
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'COD',
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ data: codData,
|
|
|
|
|
+ itemStyle: { color: '#1c97e7' }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '氨氮',
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ data: nh3Data,
|
|
|
|
|
+ itemStyle: { color: '#ffcc4d' }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '总氮',
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ data: tnData,
|
|
|
|
|
+ itemStyle: { color: '#93d347' }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '总磷',
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ data: tpData,
|
|
|
|
|
+ itemStyle: { color: '#ff8562' }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ chartInstance.setOption(option)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+watch(historyDialogVisible, (val) => {
|
|
|
|
|
+ if (!val && chartInstance) {
|
|
|
|
|
+ chartInstance.dispose()
|
|
|
|
|
+ chartInstance = null
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
@@ -200,25 +373,6 @@ function loadStationData() {
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.page-header {
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- border-radius: 12px;
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.page-header h1 {
|
|
|
|
|
- font-size: 24px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- margin: 0 0 10px 0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.page-header p {
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: #666;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.page-content {
|
|
.page-content {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -308,6 +462,11 @@ function loadStationData() {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.table-container :deep(.el-table tr:hover) {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ background-color: #f5f7fa;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.empty-state {
|
|
.empty-state {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -327,4 +486,24 @@ function loadStationData() {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.history-dialog-content {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ height: 500px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.history-table {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.history-chart {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chart-container {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|