修改水文气象新增字段

src/views/historyData/regimen/index.vue

@@ -5,15 +5,8 @@
         <a-col class="form-box" :span="4">
           <div> 监测站点： </div>
           <div>
-            <a-select
-              class="custom-input sitemore"
-              placeholder="监测站点"
-              :maxTagCount="2"
-              :maxTagTextLength="4"
-              v-model:value="dataCenter.formData.senid"
-              :options="dataCenter.options"
-              @change="changeSt"
-            />
+            <a-select class="custom-input sitemore" placeholder="监测站点" :maxTagCount="2" :maxTagTextLength="4"
+              v-model:value="dataCenter.formData.senid" :options="dataCenter.options" @change="changeSt" />
           </div>
         </a-col>
         <a-col class="form-box" :span="6">
@@ -31,44 +24,17 @@
         <a-col class="form-box" :span="10">
           <div> 查询时间： </div>
           <div>
-            <a-range-picker
-              v-if="dataCenter.formData.step_size == 'H'||dataCenter.formData.step_size == 'R'"
-              :value="dataCenter.timeData.time"
-              :show-time="{ format: 'HH:mm:ss' }"
-              format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              @change="onChange"
-              :allowClear="true"
-            />
-            <a-range-picker
-              v-if="dataCenter.formData.step_size == 'D'"
-              :value="dataCenter.timeData.time"
-              format="YYYY-MM-DD"
-              :placeholder="['开始时间', '结束时间']"
-              @change="onChange"
-              :allowClear="true"
-            />
-            <a-range-picker
-              v-if="dataCenter.formData.step_size == 'M'"
-              :value="dataCenter.timeMonth"
-              format="YYYY-MM"
-              valueFormat="YYYY-MM"
-              :placeholder="['开始时间', '结束时间']"
-              @change="onChange"
-              :mode="['month', 'month']"
-              @panelChange="monthPanelChange"
-              :allowClear="true"
-            />
-            <a-range-picker
-              v-if="dataCenter.formData.step_size == 'Y'"
-              :value="dataCenter.timeYear"
-              format="YYYY"
-              valueFormat="YYYY"
-              :placeholder="['开始时间', '结束时间']"
-              @panelChange="yearPanelChange"
-              :mode="['year', 'year']"
-              :allowClear="true"
-            />
+            <a-range-picker v-if="dataCenter.formData.step_size == 'H' || dataCenter.formData.step_size == 'R'"
+              :value="dataCenter.timeData.time" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']" @change="onChange" :allowClear="true" />
+            <a-range-picker v-if="dataCenter.formData.step_size == 'D'" :value="dataCenter.timeData.time"
+              format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" @change="onChange" :allowClear="true" />
+            <a-range-picker v-if="dataCenter.formData.step_size == 'M'" :value="dataCenter.timeMonth" format="YYYY-MM"
+              valueFormat="YYYY-MM" :placeholder="['开始时间', '结束时间']" @change="onChange" :mode="['month', 'month']"
+              @panelChange="monthPanelChange" :allowClear="true" />
+            <a-range-picker v-if="dataCenter.formData.step_size == 'Y'" :value="dataCenter.timeYear" format="YYYY"
+              valueFormat="YYYY" :placeholder="['开始时间', '结束时间']" @panelChange="yearPanelChange" :mode="['year', 'year']"
+              :allowClear="true" />
           </div>
         </a-col>
         <a-col class="btn-list" :span="4">
@@ -88,13 +54,16 @@
           <ul>
             <li>
               <div>时间</div>
-              <div>水位(m)</div>
+              <div>雷达水位(m)</div>
+              <div>压阻水位(m)</div>
               <div>流量(m³/s)</div>
+              <!-- {{ dataCenter.listData }}} -->
             </li>
             <li v-for="(item, index) in dataCenter.listData" :key="index">
               <div>{{ item.time }}</div>
-              <div>{{ item.z }}</div>
-              <div>{{ item.q }}</div>
+              <div>{{ item.id_82 || '--' }}</div>
+              <div>{{ item.id_83 || '--' }}</div>
+              <div>{{ item.id_85 || '--' }}</div>
             </li>
           </ul>
         </div>
@@ -103,390 +72,431 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
-  import elementResizeDetectorMaker from 'element-resize-detector';
-  let erd = elementResizeDetectorMaker(); //创建实例
-  import * as echarts from 'echarts';
-  import { getDataHistRainStatios, getHistoryWater, getWaterStations } from '/@/api/swHome/index';
-  import { getNowTime } from '/@/utils/fnUtils.ts';
-  import { ImpExcel, ExcelData, jsonToSheetXlsx } from '/@/components/Excel';
-  import moment from 'moment';
-  let dataCenter = reactive({
-    timeYear: [],
-    timeMonth: [],
-    options: [],
-    formData: {
-      senid: '',
-      step_size: 'H',
-    },
-    timeData: {
-      time: [],
-    },
-    titleName: '',
-    chartsData: {},
-    listData: [],
+import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
+import { BasicTable, useTable } from '/@/components/Table';
+import elementResizeDetectorMaker from 'element-resize-detector';
+let erd = elementResizeDetectorMaker(); //创建实例
+import * as echarts from 'echarts';
+import { getDataHistRainStatios, getHistoryWater, getWaterStations } from '/@/api/swHome/index';
+import { getNowTime } from '/@/utils/fnUtils.ts';
+import { ImpExcel, ExcelData, jsonToSheetXlsx } from '/@/components/Excel';
+import moment from 'moment';
+let dataCenter = reactive({
+  timeYear: [],
+  timeMonth: [],
+  options: [],
+  formData: {
+    senid: '',
+    step_size: 'H',
+  },
+  timeData: {
+    time: [],
+  },
+  titleName: '',
+  chartsData: {},
+  listData: [],
+});
+function exportExcel() {
+  let name = null;
+  let header = {
+    time: '时间',
+    id_82: '雷达水位(m)',
+    id_83: '压阻水位(m)',
+    id_85: '流量(m³/s)'
+  };
+  let data = dataCenter.listData;
+  jsonToSheetXlsx({
+    data,
+    header: header,
+    filename: `${dataCenter.titleName}水情历史数据查询.xlsx`,
   });
-  function exportExcel() {
-    let name = null;
-    let header = {
-      time:'时间',
-      z:'水位(m)',
-      q:'流量(m³/s)'
-    };
-    let data = dataCenter.listData;
-    jsonToSheetXlsx({
-      data,
-      header: header,
-      filename: `${dataCenter.titleName}水情历史数据查询.xlsx`,
-    });
-  }
-  function changeGroup() {
-    dataCenter.timeData.time = [];
-  }
-  function changeSt(value, item) {
-    console.log(item);
-    dataCenter.titleName = item.st_name;
-  }
-  // 年份选择
-  function yearPanelChange(value) {
-    dataCenter.timeData.time = [moment(value[0]).format('YYYY'), moment(value[1]).format('YYYY')];
-    dataCenter.timeYear = [moment(value[0]).format('YYYY'), moment(value[1]).format('YYYY')];
-  }
-  // 月份选择
-  function monthPanelChange(value) {
-    dataCenter.timeData.time = [
-      moment(value[0]).format('YYYY-MM'),
-      moment(value[1]).format('YYYY-MM'),
-    ];
-    dataCenter.timeMonth = [moment(value[0]).format('YYYY-MM'), moment(value[1]).format('YYYY-MM')];
-  }
-  // 获取查询树状数据
-  function getRiveTreeData() {
-    getWaterStations().then((res) => {
-      res.data.forEach((element) => {
-        element.label = element.st_name;
-        element.value = element.stcd;
-      });
-      dataCenter.options = res.data;
-      dataCenter.formData.senid = dataCenter.options[0].stcd;
-      dataCenter.titleName = dataCenter.options[0].st_name;
-      dataCenter.timeData.time = [getNowTime(2), getNowTime(1)];
-      getHistoryWaterData();
+}
+function changeGroup() {
+  dataCenter.timeData.time = [];
+}
+function changeSt(value, item) {
+  console.log(item);
+  dataCenter.titleName = item.st_name;
+}
+// 年份选择
+function yearPanelChange(value) {
+  dataCenter.timeData.time = [moment(value[0]).format('YYYY'), moment(value[1]).format('YYYY')];
+  dataCenter.timeYear = [moment(value[0]).format('YYYY'), moment(value[1]).format('YYYY')];
+}
+// 月份选择
+function monthPanelChange(value) {
+  dataCenter.timeData.time = [
+    moment(value[0]).format('YYYY-MM'),
+    moment(value[1]).format('YYYY-MM'),
+  ];
+  dataCenter.timeMonth = [moment(value[0]).format('YYYY-MM'), moment(value[1]).format('YYYY-MM')];
+}
+// 获取查询树状数据
+function getRiveTreeData() {
+  getWaterStations().then((res) => {
+    res.data.forEach((element) => {
+      element.label = element.st_name;
+      element.value = element.stcd;
     });
-  }
-  function onChange(value, dateString) {
-    dataCenter.timeData.time = dateString;
-  }
-  function queryData() {
-    getHistoryWaterData();
-  }
-  function resetting() {
-    dataCenter.formData.senid = dataCenter.options[0].senid;
-    dataCenter.formData.step_size = 'H';
+    dataCenter.options = res.data;
+    dataCenter.formData.senid = dataCenter.options[0].stcd;
+    dataCenter.titleName = dataCenter.options[0].st_name;
     dataCenter.timeData.time = [getNowTime(2), getNowTime(1)];
     getHistoryWaterData();
-  }
-  let chart;
-  //图表方法
-  function setCherts() {
-    chart = echarts.init(document.getElementById('charts-box'));
-    var option = {
-      toolbox: {
-        feature: {
-          saveAsImage: {
-            name:`${dataCenter.titleName}水情历史数据查询`
-          }
+  });
+}
+function onChange(value, dateString) {
+  dataCenter.timeData.time = dateString;
+}
+function queryData() {
+  getHistoryWaterData();
+}
+function resetting() {
+  dataCenter.formData.senid = dataCenter.options[0].senid;
+  dataCenter.formData.step_size = 'H';
+  dataCenter.timeData.time = [getNowTime(2), getNowTime(1)];
+  getHistoryWaterData();
+}
+let chart;
+//图表方法
+function setCherts() {
+  chart = echarts.init(document.getElementById('charts-box'));
+  var option = {
+    toolbox: {
+      feature: {
+        saveAsImage: {
+          name: `${dataCenter.titleName}水情历史数据查询`
         }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
       },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-        formatter(params) {
-          var relVal = params[0].name;
-          for (var i = 0, l = params.length; i < l; i++) {
-              //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
-              relVal += `<br/>${params[i].marker}${params[i].seriesName}:${params[i].value == '--'? '--' : Number(params[i].value)}`
-              // relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
-          }
-          return relVal;
-        },
+      formatter(params) {
+        var relVal = params[0].name;
+        for (var i = 0, l = params.length; i < l; i++) {
+          //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
+          relVal += `<br/>${params[i].marker}${params[i].seriesName}:${params[i].value == '--' ? '--' : Number(params[i].value)}`
+          // relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
+        }
+        return relVal;
       },
-      dataZoom: [
-        {
-          // 这个dataZoom组件，默认控制x轴。
-          type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-        },
-        {
-          // 这个dataZoom组件，也控制x轴。
-          type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
-        },
-      ],
-      grid: {
-        left: '4%', //默认10%
-        right: '4%', //默认10%
-        bottom: '4%', //默认60
-        containLabel: true,
-        //grid区域是否包含坐标轴的刻度标签
+    },
+    dataZoom: [
+      {
+        // 这个dataZoom组件，默认控制x轴。
+        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+      },
+      {
+        // 这个dataZoom组件，也控制x轴。
+        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
       },
-      legend: {
-        top: 20,
-        data: ['流量', '水位'],
+    ],
+    grid: {
+      left: '4%', //默认10%
+      right: '4%', //默认10%
+      bottom: '4%', //默认60
+      containLabel: true,
+      //grid区域是否包含坐标轴的刻度标签
+    },
+    legend: {
+      top: 20,
+      data: ['流量', '雷达水位','压阻水位'],
+      textStyle: {
+        fontSize: 14, //字体大小
+        color: '#333', //字体颜色
+      },
+      // itemStyle: {
+      //   color: '#fff',
+      // },
+    },
+    xAxis: {
+      type: 'category',
+      data: dataCenter.chartsData.time,
+      axisLabel: {
+        //x轴文字的配置
+        show: true,
         textStyle: {
-          fontSize: 14, //字体大小
-          color: '#333', //字体颜色
+          color: '#333',
+        },
+        formatter: function (val) {
+          var strs = val.split(''); //字符串数组
+          var str = '';
+          for (var i = 0, s; (s = strs[i++]);) {
+            //遍历字符串数组
+            if (i > 5 && i < 17) {
+              str += s;
+            }
+
+            if (!(i % 10)) str += '\n'; //按需要求余
+          }
+          return str;
         },
-        // itemStyle: {
-        //   color: '#fff',
-        // },
       },
-      xAxis: {
-        type: 'category',
-        data: dataCenter.chartsData.time,
+    },
+    yAxis: [
+      {
+        name: '流量：m³/s',
+        type: 'value',
+        // min: min1,
+        // max: max1,
+        // interval: (max1 - min1) / 2,
+        // splitNumber: 2,
+        boundaryGap: [0.1, 0.1],
         axisLabel: {
-          //x轴文字的配置
-          show: true,
+          //y轴文字的配置
           textStyle: {
             color: '#333',
+            margin: 15,
           },
-          formatter: function (val) {
-            var strs = val.split(''); //字符串数组
-            var str = '';
-            for (var i = 0, s; (s = strs[i++]); ) {
-              //遍历字符串数组
-              if (i > 5 && i < 17) {
-                str += s;
-              }
-
-              if (!(i % 10)) str += '\n'; //按需要求余
-            }
-            return str;
+          formatter: function (value) {
+            return value + '';
           },
+          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
         },
-      },
-      yAxis: [
-        {
-          name: '流量：m³/s',
-          type: 'value',
-          // min: min1,
-          // max: max1,
-          // interval: (max1 - min1) / 2,
-          // splitNumber: 2,
-          boundaryGap:[0.1,0.1],
-          axisLabel: {
-            //y轴文字的配置
-            textStyle: {
-              color: '#333',
-              margin: 15,
-            },
-            formatter: function (value) {
-              return value + '';
-            },
-            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
-          },
-          splitLine: {
-            //网格线
-            lineStyle: {
-              type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
-              width: 1, //y轴线的宽度
-              color: '#ccc',
-            },
-            show: true, //隐藏或显示
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
+            width: 1, //y轴线的宽度
+            color: '#ccc',
           },
-          nameTextStyle: {
-            color: 'rgba(0, 0, 0, 0.8)', //颜色
-          },
-          scale: true,
+          show: true, //隐藏或显示
         },
-        {
-          type: 'value',
-          name: '水位：m',
-          // min: min2,
-          // interval: (max2 - min2) / 2,
-          // max: max2,
-          // splitNumber: 2,
-          boundaryGap:[0.1,0.1],
-          axisLabel: {
-            //y轴文字的配置
-            textStyle: {
-              color: '#333',
-              margin: 15,
-            },
-            formatter: function (value) {
-              return value + '';
-            },
-            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
-          },
-          splitLine: {
-            //网格线
-            lineStyle: {
-              type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
-              width: 1, //y轴线的宽度
-              color: '#ccc',
-            },
-            show: true, //隐藏或显示
+        nameTextStyle: {
+          color: 'rgba(0, 0, 0, 0.8)', //颜色
+        },
+        scale: true,
+      },
+      {
+        type: 'value',
+        name: '水位：m',
+        // min: min2,
+        // interval: (max2 - min2) / 2,
+        // max: max2,
+        // splitNumber: 2,
+        boundaryGap: [0.1, 0.1],
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            color: '#333',
+            margin: 15,
           },
-          nameTextStyle: {
-            color: 'rgba(0, 0, 0, 0.8)', //颜色
-            padding: [0, 0, 0, 30],
+          formatter: function (value) {
+            return value + '';
           },
-          scale: true,
+          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
         },
-      ],
-      series: [
-        {
-          name: '流量',
-          // data: [820, 932, 901, 934, 1290, 1330, 1320],
-          data: dataCenter.chartsData.q,
-          type: 'line',
-          smooth: true,
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
+            width: 1, //y轴线的宽度
+            color: '#ccc',
+          },
+          show: true, //隐藏或显示
         },
-        {
-          name: '水位',
-          yAxisIndex: 1,
-          // data: [82, 92, 901, 934, 1290, 130, 11320],
-          data: dataCenter.chartsData.z,
-          type: 'line',
-          smooth: true,
+        nameTextStyle: {
+          color: 'rgba(0, 0, 0, 0.8)', //颜色
+          padding: [0, 0, 0, 30],
         },
-      ],
-    };
-    option && chart.setOption(option);
-  }
-  // 查询测站数据
-  function getHistoryWaterData() {
-    dataCenter.formData.start_time = dataCenter.timeData.time[0];
-    dataCenter.formData.end_time = dataCenter.timeData.time[1];
-    getHistoryWater(dataCenter.formData).then((res) => {
-      dataCenter.chartsData.q = [];
-      dataCenter.chartsData.z = [];
-      dataCenter.chartsData.time = [];
-      res.data.forEach((element) => {
-        if (element.time != '最大值' && element.time != '最小值') {
-          dataCenter.chartsData.q.push(element.q);
-          dataCenter.chartsData.z.push(element.z);
-          dataCenter.chartsData.time.push(element.time);
-        }
-      });
-      dataCenter.listData = res.data;
-      setCherts();
+        scale: true,
+      },
+    ],
+    series: [
+      {
+        name: '流量',
+        // data: [820, 932, 901, 934, 1290, 1330, 1320],
+        data: dataCenter.chartsData.id_85,
+        type: 'line',
+        smooth: true,
+      },
+      {
+        name: '雷达水位',
+        yAxisIndex: 1,
+        // data: [82, 92, 901, 934, 1290, 130, 11320],
+        data: dataCenter.chartsData.id_82,
+        type: 'line',
+        smooth: true,
+      },
+      {
+        name: '压阻水位',
+        yAxisIndex: 1,
+        // data: [82, 92, 901, 934, 1290, 130, 11320],
+        data: dataCenter.chartsData.id_83,
+        type: 'line',
+        smooth: true,
+      },
+    ],
+  };
+  option && chart.setOption(option);
+}
+// 查询测站数据
+function getHistoryWaterData() {
+  dataCenter.formData.start_time = dataCenter.timeData.time[0];
+  dataCenter.formData.end_time = dataCenter.timeData.time[1];
+  getHistoryWater(dataCenter.formData).then((res) => {
+    dataCenter.chartsData.id_85 = [];
+    dataCenter.chartsData.id_82 = [];
+    dataCenter.chartsData.id_83 = [];
+    dataCenter.chartsData.time = [];
+    res.data.forEach((element) => {
+      if (element.time != '最大值' && element.time != '最小值') {
+        dataCenter.chartsData.id_85.push(element.id_85 ? element.id_85 : '--');
+        dataCenter.chartsData.id_82.push(element.id_82 ? element.id_82 : '--');
+        dataCenter.chartsData.id_83.push(element.id_83 ? element.id_83 : '--');
+        dataCenter.chartsData.time.push(element.time);
+      }
     });
-  }
-  onMounted(async () => {
-    getRiveTreeData();
+    dataCenter.listData = res.data;
+    setCherts();
   });
+}
+onMounted(async () => {
+  getRiveTreeData();
+});
 </script>
 <style scoped lang="less">
-  .main {
-    padding: 10px;
-  }
-  .top-form {
-    background-color: #fff;
-    padding: 12px 10px 12px 10px;
-  }
-  .btn-list {
+.main {
+  padding: 10px;
+}
+
+.top-form {
+  background-color: #fff;
+  padding: 12px 10px 12px 10px;
+}
+
+.btn-list {
+  text-align: right;
+}
+
+.cha {
+  margin-left: 10px;
+}
+
+.form-box {
+  display: flex;
+
+  &>div:nth-child(1) {
+    width: 90px;
     text-align: right;
+    line-height: 32px;
   }
-  .cha {
-    margin-left: 10px;
+
+  &>div:nth-child(2) {
+    flex: 1;
   }
-  .form-box {
-    display: flex;
-    & > div:nth-child(1) {
-      width: 90px;
-      text-align: right;
-      line-height: 32px;
-    }
-    & > div:nth-child(2) {
-      flex: 1;
-    }
+}
+
+::v-deep .top-form .ant-select {
+  width: 100%;
+}
+
+::v-deep .top-form .ant-radio-group {
+  line-height: 32px;
+}
+
+.title-name {
+  text-align: center;
+  font-size: 18px;
+  line-height: 40px;
+}
+
+.box-content {
+  display: flex;
+
+  &>div:nth-child(1) {
+    flex: 1;
+    height: calc(100vh - 180px);
+    background-color: #fff;
   }
-  ::v-deep .top-form .ant-select {
-    width: 100%;
+
+  &>div:nth-child(2) {
+    width: 450px;
+    margin-left: 10px;
+    height: calc(100vh - 180px);
+    background-color: #fff;
   }
-  ::v-deep .top-form .ant-radio-group {
-    line-height: 32px;
+}
+
+.right-box {
+  width: 450px;
+  height: 100%;
+  margin-left: 20px;
+  position: relative;
+
+  &>div:nth-child(1) {
+    text-align: right;
+    padding-top: 5px;
+    padding-right: 5px;
   }
-  .title-name {
-    text-align: center;
-    font-size: 18px;
-    line-height: 40px;
+
+  &>div:nth-child(2) {
+    height: calc(100% - 40px);
+    overflow: auto;
   }
-  .box-content {
-    display: flex;
-    & > div:nth-child(1) {
-      flex: 1;
-      height: calc(100vh - 180px);
+
+  ul {
+    // position: relative;
+    height: calc(100% - 40px);
+    overflow: auto;
+
+    li {
+      display: flex;
+      line-height: 45px;
+
+      &>div {
+        // flex: 1;
+        text-align: center;
+      }
+
+      &>div:nth-child(1) {
+        min-width: 180px;
+      }
+
+      &>div:nth-child(2) {
+        flex: 1;
+      }
+
+      &>div:nth-child(3) {
+        flex: 1;
+      }
+
+      &>div:nth-child(4) {
+        flex: 1;
+      }
+    }
+
+    li:nth-child(1) {
+      position: absolute;
+      width: 100%;
+      top: 36px;
       background-color: #fff;
     }
-    & > div:nth-child(2) {
-      width: 400px;
-      margin-left: 10px;
-      height: calc(100vh - 180px);
+
+    li:last-child {
+      position: absolute;
+      width: 100%;
+      bottom: 0px;
       background-color: #fff;
     }
-  }
-  .right-box {
-    width: 400px;
-    height: 100%;
-    margin-left: 20px;
-    position: relative;
-    &>div:nth-child(1){
-      text-align: right;
-      padding-top: 5px;
-      padding-right: 5px;
+
+    li:nth-last-child(2) {
+      position: absolute;
+      width: 100%;
+      bottom: 45px;
+      background-color: #fff;
     }
-    &>div:nth-child(2){
-      height: calc(100% - 40px);
-      overflow: auto;
+
+    li:nth-last-child(3) {
+      padding-bottom: 90px;
     }
-    ul {
-      // position: relative;
-      height: calc(100% - 40px);
-      overflow: auto;
-      li {
-        display: flex;
-        line-height: 45px;
-        & > div {
-          // flex: 1;
-          text-align: center;
-        }
-        & > div:nth-child(1) {
-          min-width: 180px;
-        }
-        & > div:nth-child(2) {
-          flex: 1;
-        }
-        & > div:nth-child(3) {
-          flex: 1;
-        }
-      }
-      li:nth-child(1) {
-        position: absolute;
-        width: 100%;
-        top: 36px;
-        background-color: #fff;
-      }
-      li:last-child{
-        position: absolute;
-        width: 100%;
-        bottom: 0px;
-        background-color: #fff;
-      }
-      li:nth-last-child(2){
-        position: absolute;
-        width: 100%;
-        bottom: 45px;
-        background-color: #fff;
-      }
-      li:nth-last-child(3){
-        padding-bottom: 90px;
-      }
-      li:nth-child(2) {
-        padding-top: 45px;
-      }
+
+    li:nth-child(2) {
+      padding-top: 45px;
     }
   }
+}
 </style>

src/views/realTime/regimen/index.vue

@@ -22,7 +22,7 @@
         </Authority>
       </template>
     </BasicTable>
-    <BasicModal :clickToRowSelect="false" :footer="null" @cancel="cancel" :visible="showModal" :width="1200"
+    <BasicModal :clickToRowSelect="false" :footer="null" @cancel="cancel" :visible="showModal" :width="1300"
       :minHeight="600" :title="basicModalTitle">
       <div class="box-basic">
         <div class="top-search">
@@ -40,13 +40,15 @@
               <ul>
                 <li>
                   <div>时间</div>
-                  <div>水位(m)</div>
+                  <div>雷达水位(m)</div>
+                  <div>压阻水位(m)</div>
                   <div>流量(m³/s)</div>
                 </li>
                 <li v-for="(item, index) in modalData.optimizeData" :key="index">
                   <div>{{ item.time }}</div>
-                  <div>{{ item.z }}</div>
-                  <div>{{ item.q }}</div>
+                  <div>{{ item.id_82 || '--' }}</div>
+                  <div>{{ item.id_83 || '--' }}</div>
+                  <div>{{ item.q || '--' }}</div>
                 </li>
               </ul>
             </div>
@@ -134,7 +136,6 @@ const exportDataFn = (name) => {
   let exportdataSource = JSON.parse(JSON.stringify(dataCenter.exportdataSource))
   exportdataSource.forEach(element => {
     delete element.q
-    delete element.z
   });
   exportData(exportColumns, exportdataSource, name)
 }
@@ -174,7 +175,8 @@ let modalData = reactive({
 async function getHistoryRain() {
   echartsData.time = []
   echartsData.q = []
-  echartsData.z = []
+  echartsData.z_82 = []
+  echartsData.z_83 = []
   historyFormData.stcd = activeItem.stcd;
   historyFormData.start_time = timeData.time[0] ? timeData.time[0] : '';
   historyFormData.end_time = timeData.time[1] ? timeData.time[1] : '';
@@ -184,8 +186,9 @@ async function getHistoryRain() {
     modalData.optimizeData = res.data
     res.data.forEach(element => {
       echartsData.time.push(element.time)
-      echartsData.q.push(element.q)
-      echartsData.z.push(element.z)
+      echartsData.q.push(element.q?element.q:'--')
+      echartsData.z_83.push(element.id_83?element.id_83:'--')
+      echartsData.z_82.push(element.id_82?element.id_82:'--')
     });
   })
   // 查询流量过程线
@@ -203,24 +206,28 @@ async function getHistoryRain() {
 let echartsData = reactive({
   time: [],
   q: [],
-  z: [],
+  z_82: [],
+  z_83: [],
 });
 // 弹窗数据处理
 function modalDataFn(qData, zData) {
   modalData.optimizeData = [];
   echartsData.time = [];
   echartsData.q = [];
-  echartsData.z = [];
+  echartsData.z_82 = [];
+  echartsData.z_83 = [];
   for (let index = 0; index < qData.length; index++) {
     let itemData = {};
     const elementq = qData[index];
     const elementz = zData[index];
     itemData.time = elementq.time;
     itemData.q = elementq.factv;
-    itemData.z = elementz.factv;
+    itemData.z_82 = elementz.factv;
+    itemData.z_83 = elementz.factv;
     echartsData.time.push(elementq.time);
     echartsData.q.push(elementq.factv);
-    echartsData.z.push(elementz.factv);
+    echartsData.z_82.push(elementz.factv);
+    echartsData.z_83.push(elementz.factv);
     modalData.optimizeData.push(itemData);
   }
 }
@@ -262,7 +269,7 @@ function echarts1() {
         for (var i = 0, l = params.length; i < l; i++) {
           console.log('tooltip数据值', params[i].value)
           //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
-          relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
+          relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + (Number(params[i].value)?Number(params[i].value):'--')
         }
         return relVal;
       },
@@ -287,7 +294,7 @@ function echarts1() {
     },
     legend: {
       top: 20,
-      data: ['流量', '水位'],
+      data: ['流量', '雷达水位','压阻水位'],
       textStyle: {
         fontSize: 14, //字体大小
         color: '#333', //字体颜色
@@ -396,10 +403,18 @@ function echarts1() {
         smooth: true,
       },
       {
-        name: '水位',
+        name: '雷达水位',
         yAxisIndex: 1,
         // data: [82, 92, 901, 934, 1290, 130, 11320],
-        data: echartsData.z,
+        data: echartsData.z_82,
+        type: 'line',
+        smooth: true,
+      },
+      {
+        name: '压阻水位',
+        yAxisIndex: 1,
+        // data: [82, 92, 901, 934, 1290, 130, 11320],
+        data: echartsData.z_83,
         type: 'line',
         smooth: true,
       },
@@ -468,7 +483,9 @@ function setTableUpDown(arr) {
     //   element.up_down = '平-';
     // }
     element.qData = element.q.v;
-    element.zData = element.z.v;
+    // element.zData = element.z_82.v;
+    element.z_82 = element.z_82.v;
+    element.z_83 = element.z_83.v;
   });
   return arr;
 }
@@ -571,7 +588,7 @@ onMounted(async () => {
   }
 
   .right-box {
-    width: 400px;
+    width: 500px;
     height: 100%;
     overflow: auto;
     margin-left: 20px;
@@ -600,6 +617,10 @@ onMounted(async () => {
         &>div:nth-child(3) {
           flex: 1;
         }
+
+&>div:nth-child(4) {
+  flex: 1;
+}
       }
 
       li:nth-child(1) {
@@ -617,5 +638,4 @@ onMounted(async () => {
 .vben-basic-table-form-container {
   padding: 0px;
 }
-
 </style>