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
bdfaf78344
commit
829247f4c4
1 changed files with 336 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. 336
      src/views/basic/sectionArea/index.vue

336
src/views/basic/sectionArea/index.vue
Unescape View File

@ -0,0 +1,336 @@ @@ -0,0 +1,336 @@
<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>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['basic:storage:add']">新增</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</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="sectionAreaList">
<el-table-column type="index" label="序号" width="55" :align="alignment" />
<el-table-column label="测站名称" :align="alignment" prop="stnm" />
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" icon="View" @click="handleDetails(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.page" v-model:limit="queryParams.limit" @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="typeId">
<el-select-v2 :disabled="form.id" v-model="form.stnm" :options="stationList" :props="{ value: 'stnm', label: 'stnm' }" placeholder="请选择测站" filterable style="width:360px"></el-select-v2>
</el-form-item>
<el-form-item label="水位" prop="valStage">
<el-input-number controls-position="right" v-model="form.valStage" placeholder="请输入水位" style="width:360px" />
</el-form-item>
<el-form-item label="断面面积" prop="valArea">
<el-input-number controls-position="right" v-model="form.valArea" placeholder="请输入断面面积" style="width:360px" />
</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>
<!-- 详情弹窗 -->
<el-dialog class="custom-dialog" :title="detailsTitle" v-model="detailsOpen" width="1000px" append-to-body>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="DataAnalysis" @click="openEarchets">视图
</el-button>
</el-col>
</el-row>
<el-table height="500px" v-loading="detailsLoading" :data="detailsTableData" style="width: 100%; " border lazy>
<el-table-column label="测站" :align="alignment" prop="stnm" />
<el-table-column label="水位" :align="alignment" prop="valStage" />
<el-table-column label="断面面积" :align="alignment" prop="valArea" />
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">修改
</el-button>
<el-button text type="danger" icon="Delete" @click="handleDetailsDelete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 视图趋势图弹窗 -->
<el-dialog v-model="echartsOpen" :title="echartsTitle" width="1000px" append-to-body>
<div ref="lineChart" style="width: 100%; height: 400px;"></div>
</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({
page: 1,
limit: 10,
stnm: '',
})
const loading = ref(false)
const total = ref(0)
const sectionAreaList = ref([])
const open = ref(false)
const title = ref("")
const detailsTitle = ref('')
const detailsLoading = ref(false)
const detailsOpen = ref(false)
const detailsTableData = ref([])
let detailsID = ref('')
const form = reactive({})
const rules = reactive({})
let formRef = ref(null)
const btnLoading = ref(false)
const echartsOpen = ref(false)
const echartsTitle = ref('趋势图')
let chartData = ref(null)
let lineChart = ref(null)
const getList = async () => {
loading.value = true;
try {
const res = await proxy.axiosGet('/basic/sectionArea/list', queryParams)
if (res.code == 0) {
sectionAreaList.value = res.data
total.value = res.count
}
} catch (error) {
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.page = 1
getList()
}
const resetQuery = () => {
proxy.resetForm("queryForm");
handleQuery();
}
/** 新增按钮操作 */
const handleAdd = () => {
reset();
open.value = true;
title.value = "添加水位断面设置";
}
/** 详情按钮操作 */
const handleDetails = async (row) => {
reset();
let id = row.stnmId
detailsID.value = id
detailsTitle.value = `${row.stnm}水位断面详情`;
detailsOpen.value = true;
getDetailList(id)
}
/** 删除按钮操作 */
const handleDelete = (row) => {
let stnms = row.stnm
const stnmIds = row.stnmId
proxy.$modal.confirm('是否确认删除站点名称为"' + stnms + '"的数据项？').then(async function () {
let res = await proxy.axiosDelete('/basic/storage/deleteParent/' + stnmIds);
if (res.code === 0) {
proxy.$modal.msgSuccess("删除成功");
getList();
}
})
}
/************************************************************* 弹窗 ***************************************/
const stationList = ref([])
const getStnmandStnmId = async () => {
let res = await proxy.axiosGet('/basic/station/queryStnmandStnmId', { 'type': 'E' });
if (res.code === 200) {
stationList.value = res.data
}
}
// 取消按钮
const cancel = () => {
open.value = false;
reset();
}
const reset = () => {
Object.assign(form, {
id: null,
stnmId: null,
stnm: null,
valStage: null,
valArea: null,
});
proxy.resetForm("formRef");
}
const getDetailList = async (id) => {
detailsLoading.value = true
try {
let res = await proxy.axiosGet('/basic/sectionArea/listById/' + id);
if (res.code === 0) {
detailsTableData.value = res.data
}
} catch (error) {
console.log(error)
} finally {
detailsLoading.value = false
}
}
const handleUpdate = async (row) => {
reset();
let id = row.id
try {
let res = await proxy.axiosPost('/basic/sectionArea/info/' + id);
if (res.code === 0) {
Object.assign(form, res.data)
open.value = true;
title.value = `修改水位断面设置`;
}
} catch (error) {
console.log(error)
}
}
// 弹窗中的删除按钮操作
const handleDetailsDelete = (row) => {
// 详情删除操作
proxy.$modal.confirm('此操作将永久删除该条记录, 是否继续?').then(async function () {
let res = await proxy.axiosDelete('/basic/sectionArea/delete/' + row.id);
if (res.code === 0) {
proxy.$modal.msgSuccess("删除成功");
getDetailList(detailsID.value);
}
})
}
/** 提交按钮 */
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/sectionArea/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/sectionArea/edit', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getDetailList(detailsID.value);
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
// 视图按钮操作
const openEarchets = async () => {
let res = await proxy.axiosGet(`/basic/sectionArea/getById`, detailsTableData.value[0])
echartsOpen.value = true // 打开对话框
chartData.value = res.data
nextTick(() => {
echartsTitle.value = `${chartData.value.stnm}趋势图`
initChart(chartData.value) // 确保对话框渲染后再初始化图表
})
}
const initChart = (value) => {
let myChart = echarts.init(lineChart.value);
// 指定图表的配置项和数据
const option = {
// title: {
// text: value.stnm
// },
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: value.xAxis,
name: '断面面积', // 添加 X 轴名称
nameLocation: 'middle', // 位置在中间
nameGap: 50 // 名称和轴的间距
},
yAxis: {
type: 'value',
name: '水位', // 添加 Y 轴名称
nameLocation: 'middle', // 位置在中间
nameGap: 50 // 名称和轴的间距
},
series: [
{
type: 'line',
data: value.yAxis,
smooth: true // 平滑曲线
}
]
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
}
onMounted(() => {
getList()
getStnmandStnmId()
})
</script>
Write Preview
Loading…
Cancel
Save