|
@@ -0,0 +1,255 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="tjxx-index">
|
|
|
|
|
+ <el-form ref="tjxxFormRef" :model="tjxxForm" :inline="true" size="small" class="tjxx-form">
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-radio-group v-model="tjxxForm.resource">
|
|
|
|
|
+ <el-radio
|
|
|
|
|
+ v-for="(item) in resourceList"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item.label }}
|
|
|
|
|
+ </el-radio>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="年月:">
|
|
|
|
|
+ <el-date-picker
|
|
|
|
|
+ v-model="tjxxForm.month"
|
|
|
|
|
+ value-format="YYYY-MM"
|
|
|
|
|
+ type="month"
|
|
|
|
|
+ placeholder="请选择..."
|
|
|
|
|
+ style="width: 150px;"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="流域:">
|
|
|
|
|
+ <el-select v-model="tjxxForm.liuyu" placeholder="请选择..." style="width: 150px;">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="(item) in liuYuList"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :label="item.label"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="省份:">
|
|
|
|
|
+ <el-select v-model="tjxxForm.province" placeholder="请选择..." style="width: 150px;">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="(item) in provinceList"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :label="item.label"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="水功能区:">
|
|
|
|
|
+ <el-select v-model="tjxxForm.waterFunc" placeholder="请选择..." style="width: 150px;">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="(item) in waterFuncList"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :label="item.label"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="评价方法:">
|
|
|
|
|
+ <el-select v-model="tjxxForm.evaluation" placeholder="请选择..." style="width: 150px;">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="(item) in evaluationList"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :label="item.label"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
|
|
|
|
|
+ <el-button type="primary" size="small" @click="handleReset">重置</el-button>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div class="tjxx-content">
|
|
|
|
|
+ <div id="shuiZhiChart"></div>
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :data="tjxxData"
|
|
|
|
|
+ border
|
|
|
|
|
+ stripe
|
|
|
|
|
+ style="width: 100%;"
|
|
|
|
|
+ :height="heightAll"
|
|
|
|
|
+ :header-cell-style="{
|
|
|
|
|
+ background: '#d2eafa !important',
|
|
|
|
|
+ fontSize: '12px'
|
|
|
|
|
+ }"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-table-column type="index" width="50"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="水功能区类别" align="center"/>
|
|
|
|
|
+ <el-table-column label="一级水功能区" align="center">
|
|
|
|
|
+ <el-table-column prop="tm" label="评价个数(个)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标个数(个)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标率(%)" align="center"/>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="河流" align="center">
|
|
|
|
|
+ <el-table-column prop="tm" label="评价河长(km)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标河长(km)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标率(%)" align="center"/>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="湖泊" align="center">
|
|
|
|
|
+ <el-table-column prop="tm" label="评价面积(km²)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标面积(km²)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标率(%)" align="center"/>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="水库" align="center">
|
|
|
|
|
+ <el-table-column prop="tm" label="评价库容(亿m³)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标库容(亿m³)" align="center"/>
|
|
|
|
|
+ <el-table-column prop="tm" label="达标率(%)" align="center"/>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <el-pagination
|
|
|
|
|
+ v-model:current-page="pagination.currentPage"
|
|
|
|
|
+ v-model:page-size="pagination.pageSize"
|
|
|
|
|
+ :size="pagination.size"
|
|
|
|
|
+ :total="pagination.totalCount"
|
|
|
|
|
+ :disabled=false
|
|
|
|
|
+ background
|
|
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
|
|
+ @size-change="handleSizeChange"
|
|
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import * as echarts from "echarts";
|
|
|
|
|
+
|
|
|
|
|
+const tjxxForm = ref({
|
|
|
|
|
+ resource:1,
|
|
|
|
|
+ month:"",
|
|
|
|
|
+ liuyu:"",
|
|
|
|
|
+ province:"",
|
|
|
|
|
+ waterFunc:"",
|
|
|
|
|
+ evaluation:""
|
|
|
|
|
+});
|
|
|
|
|
+const resourceList = [
|
|
|
|
|
+ {label:"达标统计",value:1},
|
|
|
|
|
+ {label:"告警统计",value:2},
|
|
|
|
|
+];
|
|
|
|
|
+const liuYuList = ref([]);
|
|
|
|
|
+const provinceList = ref([]);
|
|
|
|
|
+const waterFuncList = ref([]);
|
|
|
|
|
+const evaluationList = ref([]);
|
|
|
|
|
+const heightAll = 43.4 + 'vh';
|
|
|
|
|
+const tjxxData = ref([]);
|
|
|
|
|
+const pagination = ref({
|
|
|
|
|
+ currentPage: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ totalCount: 0,
|
|
|
|
|
+});
|
|
|
|
|
+const shuiZhiChart = ref(null);
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ initChart();
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const handleSearch = () => {};
|
|
|
|
|
+const handleReset = () => {};
|
|
|
|
|
+
|
|
|
|
|
+const initChart = () => {
|
|
|
|
|
+ const option = {
|
|
|
|
|
+ title: {
|
|
|
|
|
+ text: '太湖流域一级水功能区水质达标分析统计表',
|
|
|
|
|
+ subtext: '2025-11',
|
|
|
|
|
+ left: 'center'
|
|
|
|
|
+ },
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: 'axis'
|
|
|
|
|
+ },
|
|
|
|
|
+ // legend: {
|
|
|
|
|
+ // x:'center', //可设定图例在左、右、居中
|
|
|
|
|
+ // y:'bottom', //可设定图例在上、下、居中
|
|
|
|
|
+ // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
|
|
|
|
+ // },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ left: '3%',
|
|
|
|
|
+ right: '4%',
|
|
|
|
|
+ bottom: '8%',
|
|
|
|
|
+ containLabel: true
|
|
|
|
|
+ },
|
|
|
|
|
+ toolbox: {
|
|
|
|
|
+ feature: {
|
|
|
|
|
+ saveAsImage: {}
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ boundaryGap: false,
|
|
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Email',
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ stack: 'Total',
|
|
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Union Ads',
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ stack: 'Total',
|
|
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Video Ads',
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ stack: 'Total',
|
|
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Direct',
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ stack: 'Total',
|
|
|
|
|
+ data: [320, 332, 301, 334, 390, 330, 320]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Search Engine',
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ stack: 'Total',
|
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+ shuiZhiChart.value = echarts.init(document.getElementById('shuiZhiChart'));
|
|
|
|
|
+ shuiZhiChart.value.setOption(option);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleSizeChange = (val) => {
|
|
|
|
|
+ pagination.value.pageSize = val;
|
|
|
|
|
+}
|
|
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
|
|
+ pagination.value.currentPage = val;
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+.tjxx-index{
|
|
|
|
|
+ width: 99%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ .tjxx-form{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 5px 0;
|
|
|
|
|
+ .el-form-item{
|
|
|
|
|
+ margin-bottom: 0 !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .tjxx-content{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
|
|
+ #shuiZhiChart{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 42vh;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|