123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <div class="hum-page-container">
- <div class="hum-page-title">断面管理</div>
- <div class="hum-page-section">
- <div class="hum-page-search">
- <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
- <el-row :gutter="30">
- <el-col :span="6">
- <el-form-item label="选择站点">
- <el-select v-model="siteId" placeholder="请选择站点" @change="getList">
- <el-option
- v-for="item in siteList"
- :key="item.siteId"
- :label="item.siteName"
- :value="item.siteId">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="6">
- <el-form-item class="hum-page-search-action">
- <el-button type="primary" @click="handleQuery">查询</el-button>
- <el-button @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </div>
- <el-table v-loading="loading" :data="list" border max-height="300">
- <el-table-column label="序号" type="index" />
- <el-table-column label="站码" prop="id" />
- <el-table-column label="断面名称" prop="berthingName" />
- <el-table-column label="创建日期">
- <template slot-scope="scope">
- <span>{{ formatDateTime(scope.row.createTime) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="断面图" align="center">
- <template slot-scope="scope">
- <el-button size="mini" type="text" icon="el-icon-s-operation" @click="showSectionChart(scope.row)">查看</el-button>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template slot-scope="scope">
- <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)">导出</el-button>
- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="hum-page-title" style="margin-top: 30px">断面图</div>
- <div class="hum-page-section">
- <ChartList ref="chart" />
- </div>
- <el-dialog title="断面图" :visible.sync="sectionChartVisible" width="60%" destroy-on-close>
- <SectionChart :sections="sections" />
- </el-dialog>
- </div>
- </template>
- <script>
- import { listSite } from "@/api/site/site";
- import { listSection, deleteSection } from "@/api/site/berthing";
- import ChartList from './chart-list';
- import SectionChart from './chart';
- export default {
- components: {
- ChartList,
- SectionChart,
- },
- data() {
- return {
- siteId: '',
- siteList: [],
- queryParams: {
- page: 1,
- size: 1000,
- },
- loading: true,
- total: 0,
- list: [],
- sections: [],
- sectionChartVisible: false,
- }
- },
- created() {
- this.init();
- },
- methods: {
- handleQuery() {
- this.getList()
- },
- resetQuery() {},
- init() {
- this.loading = true;
- listSite({ page: 1, size: 1000 }).then(response => {
- this.siteList = response.data.records || [];
- if (this.siteList.length > 0) {
- this.siteId = this.siteList[0].siteId;
- this.getList();
- }
- }
- ).catch(() => {
- this.loading = false;
- });
- },
- getList() {
- this.loading = true;
- listSection({ ...this.queryParams, siteId: this.siteId }).then(response => {
- const history = (response.data.records || []).filter(({ status }) => status === 0);
- this.$refs.chart.setOptions(history);
- this.list = history
- this.total = response.data.total;
- this.loading = false;
- }
- );
- },
- showSectionChart(section) {
- this.sectionChartVisible = true;
- this.sections = JSON.parse(section.positions);
- },
- download(section) {
- window.open(`${process.env.VUE_APP_BASE_API}/berthing/downFile/${section.berthingId}`, '_blank')
- },
- handleDelete(section) {
- this.$modal.confirm('是否确认删除断面名称为"' + section.berthingName + '"的数据项?').then(function() {
- return deleteSection(section.berthingId);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("删除成功");
- }).catch(() => {});
- },
- }
- }
- </script>
- <style scoped>
- </style>
|