sunli
/
qingtian-report-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:流量数据项

master
waibao2 1 week ago
parent
a6422751c0
commit
bdfaf78344
1 changed files with 237 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      src/views/basic/stcdIndex/index.vue

237
src/views/basic/stcdIndex/index.vue
Unescape View File

@ -0,0 +1,237 @@ @@ -0,0 +1,237 @@
<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" v-show="showSearch" @submit.native.prevent>
<el-form-item label="测站名称" prop="stnm">
<el-input v-model="queryParams.stnm" placeholder="请输入测站名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="设备编号" prop="stcd">
<el-input v-model="queryParams.stcd" placeholder="请输入设备编号" clearable @keyup.enter.native="handleQuery" />
</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="stcdIndexList">
<el-table-column type="index" label="序号" width="55" :align="alignment" />
<el-table-column label="站点名称" :align="alignment" prop="stnm" />
<el-table-column label="设备编号" :align="alignment" prop="stcd" />
<el-table-column label="数据读取类型" :align="alignment" prop="type">
<template #default="scope">
<span v-if="scope.row.type == '0'">流速</span>
<span v-else-if="scope.row.type == '1'">流量</span>
<span v-else><el-tag type="danger">未设置</el-tag></span>
</template>
</el-table-column>
<el-table-column label="index值" :align="alignment" prop="meIndex" />
<el-table-column label="是否添加水位" :align="alignment" prop="riverStcd">
<template #default="scope">
<span v-if="scope.row.riverStcd"><el-tag type="success">已添加</el-tag></span>
<span v-else><el-tag type="danger">未添加</el-tag></span>
</template>
</el-table-column>
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
<template #default="scope">
<el-button text type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button text type="danger" icon="Delete" @click="handleDelete(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="500px" append-to-body>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<el-form-item label="设备编号" prop="stcd">
<el-input v-model="form.stcd" :disabled="true" />
</el-form-item>
<el-form-item label="读取类型" prop="type">
<el-select v-model="form.type" placeholder="请选择数据读取类型" filterable>
<el-option v-for="t in types" :key="t.value" :label="t.label" :value="t.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="index值" prop="meIndex">
<el-select v-model="form.meIndex" placeholder="请选择index值" filterable>
<el-option v-for="t in itemList" :key="t" :label="t" :value="t"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm(formRef)" v-loading='btnLoading'>确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import * as XLSX from 'xlsx';
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance()
const alignment = 'center'
const showSearch = ref(true)
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
stnm: '',
})
const loading = ref(false)
const total = ref(0)
const stcdIndexList = ref([])
const open = ref(false)
const title = ref("")
const form = reactive({})
const rules = reactive({})
let formRef = ref(null)
const btnLoading = ref(false)
const getList = async () => {
loading.value = true;
try {
const res = await proxy.axiosGet('/basic/stcd/getStcdFlowIndex', queryParams)
if (res.code == 0) {
stcdIndexList.value = res.data
total.value = res.count
}
} catch (error) {
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNum = 1
getList()
}
const resetQuery = () => {
proxy.resetForm("queryForm");
handleQuery();
}
// 修改按钮操作
const handleUpdate = async (row) => {
reset();
form.id = row.flowIndexId;
form.stcd = row.stcd;
form.type = row.type;
form.meIndex = row.meIndex;
open.value = true;
title.value = "修改流量数据项";
}
/** 删除按钮操作 */
const handleDelete = (row) => {
let stnms = row.stnm
const stnmIds = row.id
proxy.$modal.confirm('是否确认删除站点名称为"' + stnms + '"的数据项？').then(async function () {
let res = await proxy.axiosDelete('/basic/stcdFlowIndex/delete/' + stnmIds);
if (res.code === 0) {
proxy.$modal.msgSuccess("删除成功");
getList();
}
})
}
/************************************************************* 弹窗 ***************************************/
const itemList = ref([])
const types = ref([
{
label: '流速', value: 0
},
{
label: '流量', value: 1
},
])
const getItemList = async () => {
let res = await proxy.axiosGet('/basic/stcd/getFlowIndexItem');
if (res.code === 0) {
itemList.value = res.data
}
}
// 取消按钮
const cancel = () => {
open.value = false;
reset();
}
const reset = () => {
Object.assign(form, {
id: null,
stnmId: null,
rz: null,
w: null,
mstm: null,
moditime: null
});
proxy.resetForm("formRef");
}
/** 提交按钮 */
const submitForm = async (formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
if (form.id != null) {
editMethod();
} else {
addMethod();
}
}
})
}
// 警戒水位新增方法
const addMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPost('/basic/stcdFlowIndex/add', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList()
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
// 警戒水位修改方法
const editMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPost('/basic/stcdFlowIndex/edit', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList()
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
onMounted(() => {
getList()
getItemList()
})
</script>
Write Preview
Loading…
Cancel
Save