|
|
@@ -5,15 +5,12 @@
|
|
|
<div class="title">方案列表</div>
|
|
|
<div class="content-tree">
|
|
|
<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="支持关键字查询" />
|
|
|
- <a-tree :selectedKeys="selectedKeysTree" v-if="gData.length" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" :tree-data="gData"
|
|
|
- :defaultExpandAll="true"
|
|
|
- :replace-fields="{
|
|
|
- children: 'children',
|
|
|
- title: 'title',
|
|
|
- key: 'keyid',
|
|
|
- }"
|
|
|
- @expand="onExpand"
|
|
|
- @select="treeSelect">
|
|
|
+ <a-tree :selectedKeys="selectedKeysTree" v-if="gData.length" :expandedKeys="expandedKeys"
|
|
|
+ :autoExpandParent="autoExpandParent" :tree-data="gData" :defaultExpandAll="true" :replace-fields="{
|
|
|
+ children: 'children',
|
|
|
+ title: 'title',
|
|
|
+ key: 'keyid',
|
|
|
+ }" @expand="onExpand" @select="treeSelect">
|
|
|
<template #title="{ title }">
|
|
|
<span v-if="title.indexOf(searchValue) > -1">
|
|
|
{{ title.substr(0, title.indexOf(searchValue)) }}
|
|
|
@@ -58,15 +55,18 @@
|
|
|
</a-row>
|
|
|
</div>
|
|
|
<div class="right-box">
|
|
|
- <div :style="{ width: dataCenter.contractType == 1 ? '440px' : '40px' }" class="right-box-left">
|
|
|
+ <div :style="{ width: dataCenter.contractType == 1 ? '440px' : '40px' }" class="right-box-left"
|
|
|
+ @mouseleave="setContractType(0)">
|
|
|
<div v-if="dataCenter.treeActiveData.modelid != 76">
|
|
|
- <div class="flex-left" v-show="dataSource.length > 0">
|
|
|
- <div @click="setContractType" class="flex-box-contract">
|
|
|
+ <div class="flex-left new-flex-left" v-show="dataSource.length > 0">
|
|
|
+ <!-- <div @click="setContractType" class="flex-box-contract">
|
|
|
<MenuFoldOutlined v-if="dataCenter.contractType == 1" />
|
|
|
<MenuUnfoldOutlined v-else />
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div @mouseover="setContractType(1)" :class="{ 'active-box-color': dataCenter.activeBox == 2 }">模型参数
|
|
|
</div>
|
|
|
<div @click="showRain" :class="{ 'active-box-color': dataCenter.activeBox == 1 }">雨量列表</div>
|
|
|
- <div @click="setActive(2)" :class="{ 'active-box-color': dataCenter.activeBox == 2 }">模型参数</div>
|
|
|
<div @click="showRain2" :class="{ 'active-box-color': dataCenter.activeBox == 3 }">产流状态变量</div>
|
|
|
<div @click="showRain3" :class="{ 'active-box-color': dataCenter.activeBox == 3 }">汇流状态变量</div>
|
|
|
</div>
|
|
|
@@ -75,7 +75,8 @@
|
|
|
<template #value="{ text, record }">
|
|
|
<div class="editable-cell">
|
|
|
<div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
|
|
|
- <a-input v-model:value="editableData[record.key].value" @pressEnter="save(record.key, record)" />
|
|
|
+ <a-input v-model:value="editableData[record.key].value"
|
|
|
+ @pressEnter="save(record.key, record)" />
|
|
|
<check-outlined class="editable-cell-icon-check" @click="save(record.key, record)" />
|
|
|
</div>
|
|
|
<div v-else class="editable-cell-text-wrapper">
|
|
|
@@ -88,14 +89,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
- <div class="flex-left">
|
|
|
+ <!-- <div class="flex-left">
|
|
|
<div @click="setContractType" class="flex-box-contract">
|
|
|
<MenuFoldOutlined v-if="dataCenter.contractType == 1" />
|
|
|
<MenuUnfoldOutlined v-else />
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="flex-left new-flex-left">
|
|
|
+ <!-- <div @click="setContractType" class="flex-box-contract">
|
|
|
+ <MenuFoldOutlined v-if="dataCenter.contractType == 1" />
|
|
|
+ <MenuUnfoldOutlined v-else />
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div @mouseover="setContractType(1)" :class="{ 'active-box-color': dataCenter.activeBox == 2 }">模型参数
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="list1">
|
|
|
- <a-table :pagination="false" bordered :data-source="dataCenter.automaticList"
|
|
|
+ <a-table size="small" :pagination="false" bordered :data-source="dataCenter.automaticList"
|
|
|
:columns="dataCenter.automaticColumnsList">
|
|
|
<template #value="{ text, record }">
|
|
|
<div class="editable-cell">
|
|
|
@@ -106,19 +116,95 @@
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
- <div class="regression-btn">
|
|
|
+ <div v-if='dataCenter.contractType == 1' class="regression-btn">
|
|
|
<a-button class="regression-margin-btn" type="primary" @click="calibration">自动率定</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-box-right">
|
|
|
- <div class="charts-box" id="charts-id"></div>
|
|
|
+ <div class="charts-box" id="charts-id">
|
|
|
+ </div>
|
|
|
<div v-if="dataCenter.chartsData.eval" class="result-box">
|
|
|
- <div class="result-title"> 预报成果 </div>
|
|
|
+ <div class="result-title"> 预报成果
|
|
|
+ <a-button class="result-title-btn" type="primary"
|
|
|
+ @click="resultTitleExport(dataCenter.treeActiveData.modelid, dataCenter.sourceData)">导出excel</a-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="result-table-box">
|
|
|
- <a-table
|
|
|
+ <!-- <a-table class="no-table-padding result-table"
|
|
|
:columns="dataCenter.treeActiveData.modelid == 76 ? dataCenter.resultColumns1 : dataCenter.resultColumns"
|
|
|
- :pagination="false" :data-source="dataCenter.sourceData" bordered size="middle" :scroll="{ y: 180 }" />
|
|
|
+ :pagination="false" :data-source="dataCenter.sourceData" bordered size="small" :scroll="{ y: 180 }" /> -->
|
|
|
+ <table class='table-inner'>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th rowspan="3">序号</th>
|
|
|
+ <th v-if="dataCenter.treeActiveData.modelid != 76" rowspan="2">降雨量</th>
|
|
|
+ <th colspan="4">径流深</th>
|
|
|
+ <th colspan="3">洪峰</th>
|
|
|
+ <th colspan="3">峰现时间</th>
|
|
|
+ <th rowspan="3">确定性系数</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>实测值</th>
|
|
|
+ <th>计算值</th>
|
|
|
+ <th>绝对误差</th>
|
|
|
+ <th>相对误差</th>
|
|
|
+ <th>实测值</th>
|
|
|
+ <th>计算值</th>
|
|
|
+ <th>绝对误差</th>
|
|
|
+ <th>实测值</th>
|
|
|
+ <th>计算值</th>
|
|
|
+ <th>锋现时差</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th v-if="dataCenter.treeActiveData.modelid != 76">mm</th>
|
|
|
+ <th>mm</th>
|
|
|
+ <th>mm</th>
|
|
|
+ <th>mm</th>
|
|
|
+ <th>%</th>
|
|
|
+ <th>m³/s</th>
|
|
|
+ <th>m³/s</th>
|
|
|
+ <th>%</th>
|
|
|
+ <th></th>
|
|
|
+ <th></th>
|
|
|
+ <th>h</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody v-if="dataCenter.treeActiveData.modelid != 76">
|
|
|
+ <tr v-for="(item, index) in dataCenter.sourceData" :key="index">
|
|
|
+ <td>{{ index + 1 }}</td>
|
|
|
+ <td>{{ item['0'] }}</td>
|
|
|
+ <td>{{ item['1'] }}</td>
|
|
|
+ <td>{{ item['2'] }}</td>
|
|
|
+ <td>{{ item['3'] }}</td>
|
|
|
+ <td>{{ item['4'] }}</td>
|
|
|
+ <td>{{ item['5'] }}</td>
|
|
|
+ <td>{{ item['6'] }}</td>
|
|
|
+ <td>{{ item['7'] }}</td>
|
|
|
+ <td>{{ item['8'] }}</td>
|
|
|
+ <td>{{ item['9'] }}</td>
|
|
|
+ <td>{{ item['10'] }}</td>
|
|
|
+ <td>{{ item['11'] }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ <tbody v-else>
|
|
|
+ <tr v-for="(item, index) in dataCenter.sourceData" :key="index">
|
|
|
+ <td>{{ index + 1 }}</td>
|
|
|
+ <td>{{ item['0'] }}</td>
|
|
|
+ <td>{{ item['1'] }}</td>
|
|
|
+ <td>{{ item['2'] }}</td>
|
|
|
+ <td>{{ item['3'] }}</td>
|
|
|
+ <td>{{ item['4'] }}</td>
|
|
|
+ <td>{{ item['5'] }}</td>
|
|
|
+ <td>{{ item['6'] }}</td>
|
|
|
+ <td>{{ item['7'] }}</td>
|
|
|
+ <td>{{ item['8'] }}</td>
|
|
|
+ <td>{{ item['9'] }}</td>
|
|
|
+ <td>{{ item['10'] }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -127,13 +213,17 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 弹窗 -->
|
|
|
- <BasicModal :maskClosable="false" @cancel="cancel" :footer="null" :visible="dataCenter.showRainModal" :width="1200"
|
|
|
+ <BasicModal :maskClosable="false" @cancel="cancel" :footer="null" :visible="dataCenter.showRainModal" width="80%"
|
|
|
title="雨量列表">
|
|
|
<div>
|
|
|
- <div class="rainfall-export">
|
|
|
+ <div class="rainfall-export rainfall-text-all">
|
|
|
+ <a-button @click="isPaginated(false)" type="primary">单页显示</a-button>
|
|
|
+ <a-button @click="isPaginated(true)" type="primary">分页显示</a-button>
|
|
|
<a-button @click="rainfallExport" type="primary">导出excel</a-button>
|
|
|
</div>
|
|
|
- <a-table :dataSource="dataCenter.rainData.dataSource" :columns="dataCenter.rainData.columns" bordered />
|
|
|
+ <a-table class="no-table-padding result-table-bug" size="small" :pagination="paginationWork"
|
|
|
+ :dataSource="dataCenter.rainData.dataSource" :columns="dataCenter.rainData.columns" bordered
|
|
|
+ :scroll="{ y: 560 }" />
|
|
|
</div>
|
|
|
</BasicModal>
|
|
|
<!-- 状态变量弹窗 -->
|
|
|
@@ -143,7 +233,7 @@
|
|
|
<div class="rainfall-export">
|
|
|
<a-button @click="stateExport" type="primary">导出excel</a-button>
|
|
|
</div>
|
|
|
- <div style="height: 600px; position: relative;">
|
|
|
+ <div style="height: 600px; position: relative; z-index: 0;">
|
|
|
<div id="luckysheet" style="
|
|
|
margin: 0px;
|
|
|
padding: 0px;
|
|
|
@@ -157,22 +247,23 @@
|
|
|
</div>
|
|
|
</BasicModal>
|
|
|
<!-- 汇流状态变量 -->
|
|
|
- <BasicModal :maskClosable="false" @ok="handle3Ok" @cancel="cancel3" :visible="dataCenter.showRainModal3" :width="650"
|
|
|
- title="汇流状态变量">
|
|
|
+ <BasicModal :maskClosable="false" @ok="handle3Ok" @cancel="cancel3" :visible="dataCenter.showRainModal3"
|
|
|
+ :width="650" :height="800" title="汇流状态变量">
|
|
|
<div>
|
|
|
<div class="top-number-form">
|
|
|
<span>河段数：</span>
|
|
|
- <span>
|
|
|
+ <span style="width: 80px; display: inline-block; margin-right: 60px;">
|
|
|
<a-input-number id="inputNumber" v-model:value="inputNumber.msk_num" :min="0" />
|
|
|
</span>
|
|
|
- <span>时段末最大流量：</span>
|
|
|
+ <span>断面出口流量：</span>
|
|
|
<span>
|
|
|
<a-input-number id="inputNumber" v-model:value="inputNumber.Q0" :min="0" />
|
|
|
</span>
|
|
|
- <a-button @click="subInputNumber" style="margin-left: 10px;" type="primary">查询</a-button>
|
|
|
+ <a-button @click="subInputNumber" style="margin-left: 10px;" type="primary">计算</a-button>
|
|
|
<a-button @click="reachExport" style="margin-left: 10px;" type="primary">导出excel</a-button>
|
|
|
</div>
|
|
|
- <a-table :pagination="false" bordered :data-source="dataSource3" :columns="columns3" :scroll="{ y: 600 }">
|
|
|
+ <a-table size="small" :pagination="false" bordered :data-source="dataSource3" :columns="columns3"
|
|
|
+ :scroll="{ y: 500 }">
|
|
|
<template #Q0="{ text, record }">
|
|
|
<div class="editable-cell">
|
|
|
<div v-if="editableData12[record.key]" class="editable-cell-input-wrapper">
|
|
|
@@ -244,7 +335,7 @@ let dataCenter = reactive({
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
- contractType: 1,
|
|
|
+ contractType: 0,
|
|
|
test1: 1,
|
|
|
test2: '',
|
|
|
test3: [],
|
|
|
@@ -291,13 +382,22 @@ let dataCenter = reactive({
|
|
|
rowSpan: 1,
|
|
|
children: [
|
|
|
{
|
|
|
- title: 'mm',
|
|
|
+ title: '',
|
|
|
dataIndex: '0',
|
|
|
key: '0',
|
|
|
width: 60,
|
|
|
- rowSpan: 1,
|
|
|
align: 'center',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: 'mm',
|
|
|
+ dataIndex: '0',
|
|
|
+ key: '0',
|
|
|
+ width: 60,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ]
|
|
|
},
|
|
|
+
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
@@ -441,6 +541,15 @@ let dataCenter = reactive({
|
|
|
key: '8',
|
|
|
width: 90,
|
|
|
align: 'center',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: '',
|
|
|
+ ataIndex: '8',
|
|
|
+ key: '8',
|
|
|
+ width: 90,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
title: '计算值',
|
|
|
@@ -448,6 +557,15 @@ let dataCenter = reactive({
|
|
|
key: '9',
|
|
|
width: 90,
|
|
|
align: 'center',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: '',
|
|
|
+ ataIndex: '9',
|
|
|
+ key: '9',
|
|
|
+ width: 90,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
title: '峰现时差',
|
|
|
@@ -727,6 +845,15 @@ const save3 = (key: string) => {
|
|
|
const genData = ref([]);
|
|
|
|
|
|
const dataList = [];
|
|
|
+
|
|
|
+let paginationWork = ref({ pageSize: 24 })
|
|
|
+const isPaginated = (type) => {
|
|
|
+ if (type) {
|
|
|
+ paginationWork.value = { pageSize: 24 }
|
|
|
+ } else {
|
|
|
+ paginationWork.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
const generateList = (data) => {
|
|
|
console.log(data);
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
@@ -821,15 +948,15 @@ const getSimulateTreeData = () => {
|
|
|
expandedKeys.value = []
|
|
|
generateList(res.data[0].children);
|
|
|
// 默认选中第一个
|
|
|
- console.log('gData',gData.value)
|
|
|
- if(gData.value.length>0 && gData.value[0].children.length>0 && gData.value[0].children[0].children.length>0){
|
|
|
+ console.log('gData', gData.value)
|
|
|
+ if (gData.value.length > 0 && gData.value[0].children.length > 0 && gData.value[0].children[0].children.length > 0) {
|
|
|
let eData = {
|
|
|
- node:{
|
|
|
- dataRef:gData.value[0].children[0].children[0]
|
|
|
+ node: {
|
|
|
+ dataRef: gData.value[0].children[0].children[0]
|
|
|
}
|
|
|
}
|
|
|
selectedKeysTree.value = [gData.value[0].children[0].children[0].keyid]
|
|
|
- treeSelect('',eData)
|
|
|
+ treeSelect('', eData)
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -859,6 +986,94 @@ async function getRegressionParamShowData(item, scheme_id) {
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
+/**
|
|
|
+ * 预报结果导出
|
|
|
+ */
|
|
|
+const resultTitleExport = (modelid, datas) => {
|
|
|
+ let name = '人工预报-预报成果.xlsx';
|
|
|
+ let header = {
|
|
|
+ }
|
|
|
+ if (modelid != 76) {
|
|
|
+ header = {
|
|
|
+ index: '序号',
|
|
|
+ index1: '降雨量(mm)',
|
|
|
+ index2: '径流深-实测值(mm)',
|
|
|
+ index3: '径流深-计算值(mm)',
|
|
|
+ index4: '径流深-绝对误差(mm)',
|
|
|
+ index5: '径流深-相对误差(%)',
|
|
|
+ index6: '洪峰-实测值(m³/s )',
|
|
|
+ index7: '洪峰-计算值(m³/s)',
|
|
|
+ index8: '洪峰-绝对误差(%)',
|
|
|
+ index9: '峰现时间-实测值',
|
|
|
+ index10: '峰现时间-计算值',
|
|
|
+ index11: '峰现时间-锋现时差(h)',
|
|
|
+ index12: '确定性系数',
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ header = {
|
|
|
+ index: '序号',
|
|
|
+ index2: '径流深-实测值(mm)',
|
|
|
+ index3: '径流深-计算值(mm)',
|
|
|
+ index4: '径流深-绝对误差(mm)',
|
|
|
+ index5: '径流深-相对误差(%)',
|
|
|
+ index6: '洪峰-实测值(m³/s )',
|
|
|
+ index7: '洪峰-计算值(m³/s)',
|
|
|
+ index8: '洪峰-绝对误差(%)',
|
|
|
+ index9: '峰现时间-实测值',
|
|
|
+ index10: '峰现时间-计算值',
|
|
|
+ index11: '峰现时间-锋现时差(h)',
|
|
|
+ index12: '确定性系数',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let data = [];
|
|
|
+ if (modelid != 76) {
|
|
|
+ datas.forEach((element, index) => {
|
|
|
+ let obj = {}
|
|
|
+ obj['index'] = index + 1
|
|
|
+ obj.index1 = element['0']
|
|
|
+ obj.index2 = element['1']
|
|
|
+ obj.index3 = element['2']
|
|
|
+ obj.index4 = element['3']
|
|
|
+ obj.index5 = element['4']
|
|
|
+ obj.index6 = element['5']
|
|
|
+ obj.index7 = element['6']
|
|
|
+ obj.index8 = element['7']
|
|
|
+ obj.index9 = element['8']
|
|
|
+ obj.index10 = element['9']
|
|
|
+ obj.index11 = element['10']
|
|
|
+ obj.index12 = element['11']
|
|
|
+ data.push(obj)
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ datas.forEach((element, index) => {
|
|
|
+ let obj = {}
|
|
|
+ obj['index'] = index + 1
|
|
|
+ obj.index2 = element['0']
|
|
|
+ obj.index3 = element['1']
|
|
|
+ obj.index4 = element['2']
|
|
|
+ obj.index5 = element['3']
|
|
|
+ obj.index6 = element['4']
|
|
|
+ obj.index7 = element['5']
|
|
|
+ obj.index8 = element['6']
|
|
|
+ obj.index9 = element['7']
|
|
|
+ obj.index10 = element['8']
|
|
|
+ obj.index11 = element['9']
|
|
|
+ obj.index12 = element['10']
|
|
|
+ data.push(obj)
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(data)
|
|
|
+ // dataCenter.rainData.columns.forEach((element) => {
|
|
|
+ // header[element.key] = element.title;
|
|
|
+ // });
|
|
|
+ // data = dataCenter.rainData.dataSource;
|
|
|
+ jsonToSheetXlsx({
|
|
|
+ data,
|
|
|
+ header: header,
|
|
|
+ filename: name,
|
|
|
+ });
|
|
|
+}
|
|
|
async function treeSelect(selectedKeys, e) {
|
|
|
selectedKeysTree.value = [e.node.dataRef.keyid]
|
|
|
dataCenter.sourceData = []
|
|
|
@@ -870,6 +1085,7 @@ async function treeSelect(selectedKeys, e) {
|
|
|
dataCenter.resultList = [];
|
|
|
dataCenter.chartsData = {};
|
|
|
dataSource.value = [];
|
|
|
+
|
|
|
// 销毁echarts
|
|
|
if (chart) {
|
|
|
chart.clear();
|
|
|
@@ -892,10 +1108,10 @@ async function treeSelect(selectedKeys, e) {
|
|
|
element.value = element.fcode;
|
|
|
});
|
|
|
dataCenter.honghaoList = res.data;
|
|
|
- await changeSelect('',dataCenter.honghaoList[0])
|
|
|
+ await changeSelect('', dataCenter.honghaoList[0])
|
|
|
dataCenter.disabled = false;
|
|
|
dataCenter.test2 = dataCenter.honghaoList[0].fcode;
|
|
|
- dataCenter.test3 = [dataCenter.honghaoList[0].stime,dataCenter.honghaoList[0].etime];
|
|
|
+ dataCenter.test3 = [dataCenter.honghaoList[0].stime, dataCenter.honghaoList[0].etime];
|
|
|
startValue.value = undefined;
|
|
|
endValue.value = undefined;
|
|
|
imitate()
|
|
|
@@ -1053,6 +1269,8 @@ function showRain2() {
|
|
|
enableAddRow: false,
|
|
|
enableAddBackTop: false,
|
|
|
showstatisticBar: false,
|
|
|
+ defaultRowHeight: 34,
|
|
|
+ defaultColWidth: 100,
|
|
|
column: 0,
|
|
|
row: 0,
|
|
|
data: [
|
|
|
@@ -1290,9 +1508,11 @@ function setCharts() {
|
|
|
chart = echarts.init(document.getElementById('charts-id'));
|
|
|
let option = {
|
|
|
toolbox: {
|
|
|
- right: 26,
|
|
|
+ right: 120,
|
|
|
+ itemGap: 30,
|
|
|
feature: {
|
|
|
dataView: {
|
|
|
+ buttonColor: '#2D74E7',
|
|
|
show: true,
|
|
|
// readOnly: true,
|
|
|
iconStyle: {
|
|
|
@@ -1330,7 +1550,6 @@ function setCharts() {
|
|
|
q_forecast: '预测流量（m³/s）',
|
|
|
};
|
|
|
let data = [];
|
|
|
- console.log();
|
|
|
dataCenter.chartsData.t.forEach((item, index) => {
|
|
|
let obj = {
|
|
|
time: item,
|
|
|
@@ -1400,8 +1619,8 @@ function setCharts() {
|
|
|
data: dataCenter.chartsData.t.map(function (str) {
|
|
|
return str.replace(' ', '\n');
|
|
|
}),
|
|
|
- axisTick:{
|
|
|
- alignWithLabel:true
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
@@ -1428,9 +1647,9 @@ function setCharts() {
|
|
|
return str.replace(' ', '\n');
|
|
|
}),
|
|
|
gridIndex: 1,
|
|
|
-
|
|
|
- axisTick:{
|
|
|
- alignWithLabel:true
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
@@ -1458,14 +1677,14 @@ function setCharts() {
|
|
|
show: true,
|
|
|
// realtime: true,
|
|
|
realtime: true,
|
|
|
- start: 65,
|
|
|
- end: 100,
|
|
|
+ // start: 65,
|
|
|
+ // end: 100,
|
|
|
xAxisIndex: [0, 1],
|
|
|
},
|
|
|
{
|
|
|
show: false,
|
|
|
- start: 70,
|
|
|
- end: 100,
|
|
|
+ // start: 70,
|
|
|
+ // end: 100,
|
|
|
type: 'inside',
|
|
|
xAxisIndex: [0, 1],
|
|
|
},
|
|
|
@@ -1587,9 +1806,11 @@ function setCharts76() {
|
|
|
let option = {
|
|
|
toolbox: {
|
|
|
right: 26,
|
|
|
+ showTitle: true,
|
|
|
feature: {
|
|
|
dataView: {
|
|
|
show: true,
|
|
|
+ title: '数据视图',
|
|
|
// readOnly: true,
|
|
|
iconStyle: {
|
|
|
borderColor: '#2D74E7',
|
|
|
@@ -1646,6 +1867,7 @@ function setCharts76() {
|
|
|
// restore: { show: true },
|
|
|
saveAsImage: {
|
|
|
show: true,
|
|
|
+ title: '保存图片',
|
|
|
iconStyle: {
|
|
|
borderColor: '#2D74E7',
|
|
|
},
|
|
|
@@ -1697,8 +1919,8 @@ function setCharts76() {
|
|
|
textStyle: {
|
|
|
color: '#333333',
|
|
|
},
|
|
|
- axisTick:{
|
|
|
- alignWithLabel:true
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
},
|
|
|
formatter: function (val) {
|
|
|
var strs = val.split(''); //字符串数组
|
|
|
@@ -1720,14 +1942,14 @@ function setCharts76() {
|
|
|
show: true,
|
|
|
// realtime: true,
|
|
|
realtime: true,
|
|
|
- start: 65,
|
|
|
- end: 100,
|
|
|
+ // start: 65,
|
|
|
+ // end: 100,
|
|
|
xAxisIndex: [0, 1],
|
|
|
},
|
|
|
{
|
|
|
show: false,
|
|
|
- start: 70,
|
|
|
- end: 100,
|
|
|
+ // start: 70,
|
|
|
+ // end: 100,
|
|
|
type: 'inside',
|
|
|
xAxisIndex: [0, 1],
|
|
|
},
|
|
|
@@ -1797,7 +2019,7 @@ const setResultData = (res) => {
|
|
|
if (index == '7' || index == '8') {
|
|
|
let str = element;
|
|
|
let strArr = str.split(' ');
|
|
|
- obj[index] = strArr[0].substring(5, 10) + '/' + strArr[1].substring(0, 2);
|
|
|
+ obj[index] = strArr[0].substring(5, 10) + ' ' + strArr[1].substring(0, 5);
|
|
|
} else {
|
|
|
obj[index] = element;
|
|
|
}
|
|
|
@@ -1807,7 +2029,7 @@ const setResultData = (res) => {
|
|
|
if (index == '8' || index == '9') {
|
|
|
let str = element;
|
|
|
let strArr = str.split(' ');
|
|
|
- obj[index] = strArr[0].substring(5, 10) + '/' + strArr[1].substring(0, 2);
|
|
|
+ obj[index] = strArr[0].substring(5, 10) + ' ' + strArr[1].substring(0, 5);
|
|
|
} else {
|
|
|
obj[index] = element;
|
|
|
}
|
|
|
@@ -1823,7 +2045,7 @@ const setResultData = (res) => {
|
|
|
if (index == '7' || index == '8') {
|
|
|
let str = element;
|
|
|
let strArr = str.split(' ');
|
|
|
- obj[index] = strArr[0].substring(5, 10) + '/' + strArr[1].substring(0, 2);
|
|
|
+ obj[index] = strArr[0].substring(5, 10) + ' ' + strArr[1].substring(0, 5);
|
|
|
} else {
|
|
|
obj[index] = element;
|
|
|
}
|
|
|
@@ -1833,7 +2055,7 @@ const setResultData = (res) => {
|
|
|
if (index == '8' || index == '9') {
|
|
|
let str = element;
|
|
|
let strArr = str.split(' ');
|
|
|
- obj[index] = strArr[0].substring(5, 10) + '/' + strArr[1].substring(0, 2);
|
|
|
+ obj[index] = strArr[0].substring(5, 10) + ' ' + strArr[1].substring(0, 5);
|
|
|
} else {
|
|
|
obj[index] = element;
|
|
|
}
|
|
|
@@ -2051,12 +2273,13 @@ const handleEndOpenChange = (open: boolean) => {
|
|
|
// return
|
|
|
// });
|
|
|
// -------------------时间选择结束---------------------
|
|
|
-const setContractType = () => {
|
|
|
- if (dataCenter.contractType == 1) {
|
|
|
- dataCenter.contractType = 0;
|
|
|
- } else {
|
|
|
- dataCenter.contractType = 1;
|
|
|
- }
|
|
|
+const setContractType = (type) => {
|
|
|
+ // if (dataCenter.contractType == 1) {
|
|
|
+
|
|
|
+ // dataCenter.contractType = 1;
|
|
|
+ // }
|
|
|
+ dataCenter.contractType = type;
|
|
|
+ // } else {
|
|
|
setTimeout(() => {
|
|
|
if (chart) {
|
|
|
chart.resize();
|
|
|
@@ -2089,7 +2312,7 @@ const handle3Ok = () => {
|
|
|
}
|
|
|
const subInputNumber = () => {
|
|
|
if (inputNumber.value.msk_num == '' || inputNumber.value.Q0 == '') {
|
|
|
- message.warning('请输入河段数或时段末最大流量');
|
|
|
+ message.warning('请输入河段数或断面出口流量');
|
|
|
return
|
|
|
}
|
|
|
schemeAddMsknum(inputNumber.value).then(res => {
|
|
|
@@ -2292,7 +2515,13 @@ onMounted(() => {
|
|
|
.result-title {
|
|
|
text-align: center;
|
|
|
font-size: 20px;
|
|
|
- padding: 10px;
|
|
|
+ padding: 0px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .result-title-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.result-title:before {
|
|
|
@@ -2312,7 +2541,7 @@ onMounted(() => {
|
|
|
content: '';
|
|
|
display: block;
|
|
|
height: 1px;
|
|
|
- width: calc(50% - 60px);
|
|
|
+ width: calc(50% - 180px);
|
|
|
background-color: #ccc;
|
|
|
/*颜色需与主题大背景色一致*/
|
|
|
position: relative;
|
|
|
@@ -2368,6 +2597,19 @@ onMounted(() => {
|
|
|
line-height: 52px !important;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
+
|
|
|
+.new-flex-left {
|
|
|
+ div:nth-child(1) {
|
|
|
+ background-color: #fff !important;
|
|
|
+ border: 1px solid #2D74E7 !important;
|
|
|
+ color: #2D74E7 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ background-color: #2D74E7 !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
#charts-id table {
|
|
|
@@ -2499,4 +2741,51 @@ onMounted(() => {
|
|
|
text-align: right;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
+
|
|
|
+.rainfall-text-all {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ button:first-child {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:last-child {
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: 0rem; // 合适即可
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.result-table-bug {
|
|
|
+ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
|
|
|
+ opacity: 1 !important;
|
|
|
+ margin-bottom: -8px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-table-hide-scrollbar {
|
|
|
+ min-width: initial !important;
|
|
|
+ scrollbar-color: initial !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-inner {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+
|
|
|
+
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ border: 1px solid #CADAFD;
|
|
|
+ padding: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ background-color: #fafafa;
|
|
|
+ font-family: "黑体";
|
|
|
+ }
|
|
|
+
|
|
|
+ tr:nth-child(even) {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
cl