docs:设备通畅率

src/views/basic/stcdStat/index.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="app-container app-container-bg">
+        <el-card class="first-card" ref='firstCard' shadow="always">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+                <el-form-item label="测站属性" prop="prop">
+                    <el-select v-model="queryParams.prop" placeholder="请选择测站属性" style="width:100%" @change="propChange">
+                        <el-option v-for="dict in propsList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="测站名称" prop="stnmId">
+                    <el-select v-model="queryParams.stnmId" placeholder="请选择测站名称" style="width:100%" @change="handleQuery">
+                        <el-option v-for="dict in stationList" :key="dict.stnmId" :label="dict.stnm" :value="dict.stnmId"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+            <el-table class="table-box" v-table-height v-loading="loading" :data="stcdStatList" @selection-change="handleSelectionChange">
+                <el-table-column type="index" width="55" :align="alignment" label="序号" />
+                <el-table-column label="站点名称" :align="alignment" prop="stnm" />
+                <el-table-column label="设备编号" :align="alignment" prop="stcd" />
+                <el-table-column label="通畅率" :align="alignment" prop="value">
+                    <template #default="scope">
+                        <span>{{(scope.row.value *100.0 / scope.row.total).toFixed(1)}}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
+                    <template #default="scope">
+                        <el-button type="text" icon="Connection" @click="handleSeeHistory(scope.row)">历史数据</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+        </div>
+        <el-dialog class="custom-dialog" :title="title" v-model="open" width="700px" append-to-body>
+            <el-form ref="formRef" :model="form" :rules="rules" :inline="true" label-width="auto">
+                <el-form-item label="时间范围" prop="dateTime">
+                    <el-date-picker :clearable="false" v-model="form.dateTime" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" popper-class="date-clear" style="width:240px">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQueryDialog">搜索</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table class="table-box" height="500" v-loading="dialogLoading" :data="historyTableData">
+                <el-table-column type="index" width="55" :align="alignment" label="序号" />
+                <el-table-column label="日期" :align="alignment" prop="tm" />
+                <el-table-column label="通畅率" :align="alignment" prop="value">
+                    <template #default="scope">
+                        <span>{{(scope.row.value *100.0 / scope.row.total).toFixed(1)}}%</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="dialogTotal > 0" :total="dialogTotal" v-model:page="form.page" v-model:limit="form.limit" @pagination="getDialogList" />
+        </el-dialog>
+    </div>
+</template>
+<script setup>
+    import { ref, reactive, onMounted, } from 'vue'
+    import dayjs from 'dayjs'
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const queryParams = reactive({
+        pageNum: 1,
+        pageSize: 10,
+        stnm: '',
+    })
+    const loading = ref(false)
+    const total = ref(0)
+    const stcdStatList = ref([])
+    // 获取表格数据
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/basic/stcdStat/list', queryParams)
+            if (res.code == 0) {
+                stcdStatList.value = res.data
+                total.value = res.count
+            }
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+    // 根据测站属性获取测站名称
+    const stationList = ref([])
+    const propChange = async () => {
+        try {
+            let res = await proxy.axiosGet('/basic/station/queryStnmandStnmId', queryParams);
+            if (res.code == 200) {
+                stationList.value = res.data;
+            }
+        } catch (error) {
+
+        }
+    }
+    /** 搜索按钮操作 */
+    const handleQuery = () => {
+        queryParams.pageNum = 1
+        getList()
+    }
+    // 重置按钮操作
+    const resetQuery = () => {
+        proxy.resetForm("queryForm");
+        handleQuery();
+    }
+
+    const open = ref(false)
+    const title = ref("")
+    /** 历史数据按钮操作 */
+    const start = (dayjs().subtract(10, 'day').format('YYYY-MM-DD'))
+    const end = (dayjs().format('YYYY-MM-DD'))
+    const form = reactive({
+        page: 1,
+        limit: 10,
+        stcd: null,
+        startTime: start.value,
+        endTime: end.value,
+        dateTime: [start.value, end.value],
+
+    })
+    const rules = reactive({})
+    // 点击历史数据按钮
+    const handleSeeHistory = async (row) => {
+        // 重置时间
+        const currentDate = dayjs().format('YYYY-MM-DD');
+        const tenDaysAgo = dayjs().subtract(10, 'day').format('YYYY-MM-DD');
+        form.startTime = tenDaysAgo;
+        form.endTime = currentDate;
+        form.dateTime = [tenDaysAgo, currentDate];
+        form.stcd = row.stcd
+        title.value = row.stnm + "[" + row.stcd + "]通畅率";
+        open.value = true;
+        getDialogList()
+
+    }
+    const dialogLoading = ref(false)
+    const historyTableData = ref([])
+    const dialogTotal = ref(0)
+    // 获取弹窗表格数据
+    const getDialogList = async () => {
+        dialogLoading.value = true
+        try {
+            let res = await proxy.axiosGet('/basic/stcdStatBefore/list', form);
+            if (res.code === 0) {
+                historyTableData.value = res.data;
+                dialogTotal.value = res.count
+            }
+        } catch (error) {
+            console.log(error)
+        } finally {
+            dialogLoading.value = false
+        }
+    }
+    // 弹窗中搜索按钮
+    const handleQueryDialog = () => {
+        form.page = 1
+        form.startTime = form.dateTime[0]
+        form.endTime = form.dateTime[1]
+        getDialogList()
+    }
+
+    onMounted(() => {
+        getList()
+        propChange()
+    })
+    const propsList = ref([
+        { label: '水文测站', value: 0 },
+        { label: '气象站', value: 1 }
+    ])
+</script>
+<style scoped lang="scss">
+    :deep(.el-pagination) {
+        right: 18px !important;
+    }
+</style>