|
|
@@ -52,10 +52,55 @@
|
|
|
<el-button type="primary" size="small" @click="handelExport">导出</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+ <div id="elementChart"></div>
|
|
|
+ <div class="stnm-dialog-table">
|
|
|
+ <el-table
|
|
|
+ :data="stnmDialogData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ style="width: 100%"
|
|
|
+ :height="heightAll"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#d2eafa !important',
|
|
|
+ fontSize: '12px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column type="index" width="60" fixed="left" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="监测日期" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="溶解氧(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="高锰酸盐指数(mg/L)" width="160" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="氨氮(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="总磷(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="总氮(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="二甲基异莰醇(mg/L)" width="160" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="氯化物(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="锑(μg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="二氯甲炕(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="蓝藻密度(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="绿藻密度(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="叶绿素a(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="总有机碳(mg/L)" width="120" align="center"/>
|
|
|
+ <el-table-column prop="tm" label="水温(mg/L)" width="120" align="center"/>
|
|
|
+ </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"
|
|
|
+ style="margin-top: 1%;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
const emit = defineEmits(['close-dialog']);
|
|
|
const props = defineProps({
|
|
|
showStnmDialog:{type: Boolean},
|
|
|
@@ -85,10 +130,26 @@ const regionOptions = [
|
|
|
{label:"二甲基异莰醇(mg/L)",value:'methy'},
|
|
|
{label:"氯化物(mg/L)",value:'na'},
|
|
|
];
|
|
|
+const elementChart = ref(null);
|
|
|
+const heightAll = 30.8 + 'vh';
|
|
|
+const stnmDialogData = ref([]);
|
|
|
+
|
|
|
+const pagination = ref({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalCount: 0,
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+});
|
|
|
|
|
|
watch(() => props.showStnmDialog, (newVal) => {
|
|
|
if (newVal) {
|
|
|
dialogVisible.value = newVal;
|
|
|
+ nextTick(() => {
|
|
|
+ initZheChart();
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
watch(() => props.stnmData, (newVal) => {
|
|
|
@@ -99,6 +160,78 @@ watch(() => props.stnmData, (newVal) => {
|
|
|
dialogType.value = newVal.type;
|
|
|
}
|
|
|
});
|
|
|
+// 查询
|
|
|
+const handleSearch = () => {};
|
|
|
+// 导出
|
|
|
+const handelExport = () => {};
|
|
|
+
|
|
|
+// 元素折线图
|
|
|
+const initZheChart = () => {
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ 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]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ elementChart.value = echarts.init(document.getElementById('elementChart'));
|
|
|
+ elementChart.value.setOption(option);
|
|
|
+};
|
|
|
+
|
|
|
+const handleSizeChange = (val) => {};
|
|
|
+const handleCurrentChange = (val) => {};
|
|
|
const closeDialog = () => {
|
|
|
dialogVisible.value = false;
|
|
|
emit('close-dialog', dialogVisible.value);
|
|
|
@@ -142,4 +275,12 @@ const closeDialog = () => {
|
|
|
display: flex;
|
|
|
}
|
|
|
}
|
|
|
+#elementChart{
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+}
|
|
|
+.stnm-dialog-table{
|
|
|
+ width: 98%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
</style>
|
WQQ
