t提交修改

src/views/dataProcessing/manualCalculation.vue

@@ -18,41 +18,59 @@
           </a-col>
           <a-col class="line-height-box" :span="14">
             <span class="title-form-title">时段类型：</span>
-            <a-radio-group @change="changeStepSize" :options="dataCenter.groupOption" v-model:value="dataCenter.formData.step_size" />
+            <a-radio-group @change="changeStepSize" :options="dataCenter.groupOption"
+              v-model:value="dataCenter.formData.step_size" />
           </a-col>
-          <a-col class="line-height-box" :span="18">
+          <a-col class="line-height-box" :span="19">
             <span class="title-form-title">统计特征：</span>
-            <a-checkbox-group :disabled="dataCenter.formData.step_size == 'R'" v-model:value="dataCenter.formData.attr" :options="dataCenter.checkboxOption" />
+            <a-checkbox-group @change="changeGroup" :disabled="dataCenter.formData.step_size == 'R'"
+              v-model:value="dataCenter.formData.attr" :options="dataCenter.checkboxOption" />
           </a-col>
-          <a-col class="line-height-box" :span="4">
+          <a-col class="line-height-box" :span="5">
             <div class="line-btn">
               <a-button class="margin-btn" @click="resetting">重置</a-button>
               <a-button class="margin-btn" type="primary" @click="queryForm">查询</a-button>
+              <a-button class="margin-btn" :disabled="showDraw" type="primary" @click="drawBtn">绘图</a-button>
+              <a-button class="margin-btn" type="primary" @click="exportDataFn">导出</a-button>
             </div>
           </a-col>
-          <a-col class="line-height-box" :span="2">
+          <!-- <a-col class="line-height-box" :span="2">
+            <div class="line-btn">
+              <a-button class="margin-btn" :disabled="showDraw" type="primary" @click="drawBtn">绘图</a-button>
+            </div>
+          </a-col> -->
+          <!-- <a-col class="line-height-box" :span="3">
             <div class="line-btn">
+              <a-button class="margin-btn" :disabled="showDraw" type="primary" @click="drawBtn">绘图</a-button>
               <a-button class="margin-btn" type="primary" @click="exportDataFn">导出</a-button>
             </div>
-          </a-col>
+          </a-col> -->
         </a-row>
       </div>
       <div>
-        <a-table :pagination="false"  class="ant-table-striped" bordered :scroll="{ x: 1000, y:`calc(100vh - 300px)` }" size="middle"
-          :dataSource="dataCenter.dataSource" :columns="dataCenter.columns" />
+        <a-table :pagination="false" class="ant-table-striped" bordered :scroll="{ x: 1000, y: `calc(100vh - 300px)` }"
+          size="middle" :dataSource="dataCenter.dataSource" :columns="dataCenter.columns" />
       </div>
     </div>
+    <BasicModal :maskClosable="false" :footer="null" @cancel="cancel" :visible="showModal" :width="1200" :title="'绘制数据'">
+      <div>
+        <div id="visible-id" style="width: 100%;height: 500px;"></div>
+      </div>
+    </BasicModal>
   </div>
 </template>
 <script lang="tsx" setup>
 import { exportData } from '/@/utils/fnUtils.ts';
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, computed } from 'vue'
+import { BasicModal } from '/@/components/Modal/index';
 import moment from 'moment';
+import * as echarts from 'echarts';
 import { message, Modal } from 'ant-design-vue';
 import {
   getRiverTree,
   getHistCompute
 } from '/@/api/swHome/index';
+let showModal = ref(false)
 let dataCenter = reactive({
   treeOriginalData: {},
   treeData: [],
@@ -81,6 +99,49 @@ let dataCenter = reactive({
   columns: [],
   dataSource: []
 })
+const cancel = () => {
+  showModal.value = false
+}
+// 计算是否显示绘制按钮
+let showDraw = computed(() => {
+  let type = true
+  let arr = []
+  checkedKeys.value.forEach(element => {
+    if (typeof element === 'number') {
+      arr.push(element)
+    }
+  });
+  // 判断是否只选了一个senId
+  if (arr.length != 1) {
+    type = false
+  }
+  // 判断是否是实时
+  if (dataCenter.formData.step_size != 'R') {
+    if (dataCenter.formData.attr.length > 2) {
+      type = false
+    }
+    if (dataCenter.formData.attr.length == 0) {
+      type = false
+    }
+    let typeNumber = 0
+    dataCenter.formData.attr.forEach(element => {
+      if (element == 'v') {
+        typeNumber++
+      }
+      if (element == 'avgv') {
+        typeNumber++
+      }
+    });
+    if (typeNumber == 2) {
+      type = false
+    }
+
+  }
+  if (dataCenter.dataSource.length == 0) {
+    type = false
+  }
+  return !type
+})
 const expandedKeys = ref<string[]>([]);
 const selectedKeys = ref<string[]>([]);
 const checkedKeys = ref<string[]>([]);
@@ -120,9 +181,201 @@ const handleTree = () => {
     }
   }
 }
+const drawBtn = () => {
+  let timeArr = []
+  let valueArr = []
+  dataCenter.dataSource.forEach(element => {
+    if (element.time != '最大值' && element.time != '最小值') {
+      timeArr.push(element.time)
+      for (const key in element) {
+        if (Object.prototype.hasOwnProperty.call(element, key)) {
+          const elements = element[key];
+          if (elements.indexOf('-') == -1 && elements != '最大值' && elements != '最小值') {
+            valueArr.push(elements * 1)
+          }
+        }
+      }
+    }
+
+  });
+  // 判断是否是水温
+  let yl = false
+  dataCenter.columns.forEach(element => {
+    if (element.title.indexOf('雨量') != -1) {
+      yl = true
+    }
+  });
+  showModal.value = true
+  setTimeout(() => {
+    setChartsFn(timeArr, valueArr, yl)
+  }, 0);
+}
+let chart
+const setChartsFn = (timeArr, valueArr, yl) => {
+  if (chart) {
+    chart.clear();
+  }
+  chart = echarts.init(document.getElementById('visible-id'));
+  var option
+  // if (yl) {
+  option = {
+
+    // toolbox: {
+    //   feature: {
+    //     saveAsImage: {
+    //       name: dataCenter.basicModalTitle
+    //     }
+    //   }
+    // },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      // formatter(params) {
+      //   var relVal = params[0].name;
+      //   for (var i = 0, l = params.length; i < l; i++) {
+      //     console.log('tooltip数据值', params[i].value);
+      //     //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
+      //     relVal +=
+      //       '<br/>' + params[i].marker + dataCenter.oneTitle + ' : ' + Number(params[i].value);
+      //   }
+      //   return relVal;
+      // },
+    },
+    xAxis: {
+      type: 'category',
+      data: timeArr,
+      axisLabel: {
+        //x轴文字的配置
+        show: true,
+        textStyle: {
+          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;
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // name: '单位：mm',
+      scale: true,
+      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, //隐藏或显示
+      },
+    },
+    series: [
+      {
+        data: valueArr,
+        type: yl ? 'bar' : 'line',
+        smooth: true,
+        markPoint: { // 设置最大值和最小值
+          data: [
+            {
+              type: "max",
+              name: "我是最大值",
+            },
+            {
+              type: "min",
+              name: "我是最小值",
+            },
+          ],
+        },
+      },
+    ],
+  };
+  // }
+
+
+  option && chart.setOption(option);
+
+}
+let changeGroupArr = []
+const changeGroup = (e) => {
+  // dataCenter.formData.attr
+  if (changeGroupArr.length > e.length) {
+    let arr = compareArrays(changeGroupArr, e)
+    if (arr[0] == 'maxv') {
+      dataCenter.formData.attr.forEach((element, index) => {
+        if (element == 'maxt') {
+          dataCenter.formData.attr.splice(index, 1)
+        }
+      });
+    }
+    if (arr[0] == 'maxt') {
+      dataCenter.formData.attr.forEach((element, index) => {
+        if (element == 'maxv') {
+          dataCenter.formData.attr.splice(index, 1)
+        }
+      });
+    }
+    if (arr[0] == 'minv') {
+      dataCenter.formData.attr.forEach((element, index) => {
+        if (element == 'mint') {
+          dataCenter.formData.attr.splice(index, 1)
+        }
+      });
+    }
+    if (arr[0] == 'mint') {
+      dataCenter.formData.attr.forEach((element, index) => {
+        if (element == 'minv') {
+          dataCenter.formData.attr.splice(index, 1)
+        }
+      });
+    }
+  } else {
+    let arr = compareArrays(changeGroupArr, e)
+    if (arr[0] == 'maxv') {
+      dataCenter.formData.attr.push('maxt')
+    }
+    if (arr[0] == 'maxt') {
+      dataCenter.formData.attr.push('maxv')
+    }
+    if (arr[0] == 'minv') {
+      dataCenter.formData.attr.push('mint')
+    }
+    if (arr[0] == 'mint') {
+      dataCenter.formData.attr.push('minv')
+    }
+  }
+  changeGroupArr = JSON.parse(JSON.stringify(e))
+}
+function compareArrays(arr1, arr2) {
+  return arr1.concat(arr2).filter(function (v, i, arr) {
+    return arr.indexOf(v) === arr.lastIndexOf(v);
+  });
+}
 // 导出
 const exportDataFn = () => {
-  exportData(dataCenter.columns,dataCenter.dataSource,'数据校核.xlsx')
+  exportData(dataCenter.columns, dataCenter.dataSource, '数据校核.xlsx')
 }
 const setTheadName = (name) => {
   switch (name) {
@@ -146,8 +399,9 @@ const setTheadName = (name) => {
 }
 const changeStepSize = (item) => {
   console.log(item.target.value)
-  if(item.target.value == 'R'){
+  if (item.target.value == 'R') {
     dataCenter.formData.attr = []
+    changeGroupArr = []
   }
 }
 const handleTable = () => {
@@ -171,14 +425,14 @@ const handleTable = () => {
   //判断实时表头
   if (dataCenter.formData.step_size == 'R') {
     dataCenter.tableList.thead.forEach(element => {
-      
+
       element.value.forEach((element1, index1) => {
         let obj = {
           title: element.sensor_name,
           dataIndex: element.senid + '&' + element1,
           key: element.senid + '&' + element1,
           align: 'center',
-          width:100
+          width: 100
         }
         dataCenter.columns.push(obj)
       });
@@ -230,6 +484,7 @@ const resetting = () => {
   dataCenter.time3 = []
   dataCenter.formData.step_size = 'R'
   dataCenter.formData.attr = []
+  changeGroupArr = []
 }
 
 const queryForm = () => {

src/views/historyData/rain/index.vue

@@ -278,7 +278,7 @@ function setOptionsNmae(name) {
   dataCenter.nameArr = [];
   let senid = '';
   dataCenter.searchFormSchema[0].componentProps.options.forEach((element) => {
-    if (element.sensor_name.indexOf(name) != -1 && element.sensor_name.split(name)[1] == '雨量') {
+    if (element.sensor_name == name) {
       senid = element.senid;
     }
   });
@@ -356,6 +356,7 @@ function setTitle(data) {
 function handleTitle(record, text, column) {
   // console.log(text);
   // console.log(column);
+  console.log(record.key);
   // 点击时间
   if (record.customTitle == '时间' && text != '最小值' && text != '最大值') {
     dataCenter.showModal1 = true;
@@ -393,8 +394,7 @@ function multistation(time) {
   dataCenter.nameArr.forEach((element) => {
     dataCenter.searchFormSchema[0].componentProps.options.forEach((elements) => {
       if (
-        elements.sensor_name.indexOf(element) != -1 &&
-        elements.sensor_name.split(element)[1] == '雨量'
+        elements.sensor_name == element
       ) {
         console.log(elements.sensor_name);
         console.log(element);

src/views/realTime/weather/components/carbonWater.vue

@@ -239,7 +239,8 @@ function handleTitle(record, column, item) {
     // dataCenter.activeModal.senid = '9065000110';
     dataCenter.activeModal.sensor_name = dataCenter.activeModal.activeData.sensor[0].sensor_name;
     dataCenter.activeModal.dchar = dataCenter.activeModal.activeData.sensor[0].dchar;
-    dataCenter.cahrtsList.yName = dataCenter.activeModal.activeData.sensor[0].sensor_name.split(dataCenter.activeModal.activeData.sensor[0].ts_layer)[1]+'('+dataCenter.activeModal.activeData.sensor[0].dchar+')';
+    
+    dataCenter.cahrtsList.yName = dataCenter.activeModal.activeData.sensor[0].sensor_name+'('+dataCenter.activeModal.activeData.sensor[0].dchar+')';
     if (dataCenter.activeModal.activeData.st_type == 6) {
       let obj = {};
       dataCenter.activeModal.activeData.sensor?.forEach((i) => {
@@ -319,7 +320,7 @@ function setCharts() {
 }
 //点击弹窗的左侧列表
 function setListItem(item, index) {
-  dataCenter.cahrtsList.yName = item.sensor_name.split(item.ts_layer)[1]+'('+item.dchar+')'
+  dataCenter.cahrtsList.yName = item.sensor_name+'('+item.dchar+')'
   dataCenter.activeModal.senid = item.senid;
   getMonitorInfoData();
 }

src/views/realTime/weather/components/sameAs.vue

@@ -6,25 +6,14 @@
           <a-row>
             <a-col :span="12">
               <span class="span-label"> 关键字: </span>
-              <a-input
-                class="custom-input"
-                v-model:value="dataCenter.formData.value"
-                placeholder="支持流域搜索"
-              />
+              <a-input class="custom-input" v-model:value="dataCenter.formData.value" placeholder="支持流域搜索" />
             </a-col>
             <a-col :span="12">
               <span class="span-label"> 监测站点: </span>
               <!-- {{ dataCenter.optionArr }} -->
-              <a-select
-                class="custom-input sitemore"
-                mode="multiple"
-                placeholder="监测站点(可多选)"
-                :maxTagCount="2"
-                :maxTagTextLength="4"
-                v-model:value="dataCenter.formData.senid"
-                label-in-value
-                :options="dataCenter.optionArr"
-              />
+              <a-select class="custom-input sitemore" mode="multiple" placeholder="监测站点(可多选)" :maxTagCount="2"
+                :maxTagTextLength="4" v-model:value="dataCenter.formData.senid" label-in-value
+                :options="dataCenter.optionArr" />
             </a-col>
           </a-row>
         </div>
@@ -36,26 +25,13 @@
       </template>
     </BasicTable>
   </div>
-  <BasicModal
-  :maskClosable="false"
-    :footer="null"
-    @cancel="cancel"
-    :visible="dataCenter.showModal"
-    :width="1200"
-    :minHeight="600"
-    :title="dataCenter.basicModalTitle"
-  >
+  <BasicModal :maskClosable="false" :footer="null" @cancel="cancel" :visible="dataCenter.showModal" :width="1200"
+    :minHeight="600" :title="dataCenter.basicModalTitle">
     <div class="box-basic">
       <div class="top-search">
         时间范围：
-        <a-range-picker
-          :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 :value="dataCenter.timeData.time" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+          :placeholder="['开始时间', '结束时间']" @change="onChange" :allowClear="true" />
         <a-button @click="getHistoryRain" class="marg-left" type="primary">查询</a-button>
       </div>
       <div class="moddal-box" id="myElement">
@@ -64,19 +40,11 @@
           <ul>
             <template v-for="(item, index) in dataCenter.table_head" :key="item">
               <template v-for="(items, indexs, is) in item" :key="indexs">
-                <li
-                  v-if="
-                    indexs == 'voltage' ||
-                    indexs == 'rain' ||
-                    indexs == 'wd' ||
-                    indexs == 'ws' ||
-                    indexs == 'hum' ||
-                    indexs == 'temp' ||
-                    indexs == 'pa'
-                  "
-                  :class="{ 'active-tab': dataCenter.activeSenName == indexs }"
-                  @click="setListItem(items, indexs)"
-                >
+
+                <li v-if="items != '测站分区' &&
+                  items != '测站' &&
+                  items != '时间'
+                  " :class="{ 'active-tab': dataCenter.activeSenName == indexs }" @click="setListItem(items, indexs)">
                   {{ items }}
                 </li>
               </template>
@@ -103,461 +71,490 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { exportData } from '/@/utils/fnUtils.ts';
-  import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
-  import { BasicModal } from '/@/components/Modal/index';
-  import { getRealWeather, getMonitorInfo } from '/@/api/swHome/index';
-  import { getNowTime } from '/@/utils/fnUtils.ts';
-  import elementResizeDetectorMaker from 'element-resize-detector';
-  let erd = elementResizeDetectorMaker(); //创建实例
-  import * as echarts from 'echarts';
-  let dataCenter = reactive({
-    listData: [], //列表数据
-    columns: [], //表格头部数据
-    searchFormSchema: [], //搜索数据
-    optionArr: [], // 选择框数据列表
-    formData: {
-      value: '',
-      senid: [],
-    },
-    allAll: [],
-    showModal: false,
-    basicModalTitle: '气象监测过程线',
-    timeData: {
-      time: [],
-    },
-    table_head: [],
-    activeSenid: '',
-    activeSenName: '',
-    activeItem: {},
-    cahrtsData: [],
-    cahrtsList: {
-      time: [],
-      data: [],
-      yName: '',
-    },
-  });
-  let chart; //charts
-  // 导出
-  const exportDataFn = () => {
-    let getDataSources = JSON.parse(JSON.stringify(getDataSource()))
-    getDataSources.forEach(element => {
-      for (const key in element) {
-        if (Object.prototype.hasOwnProperty.call(element, key)) {
-          if(key.indexOf('Data') == -1){
-            delete element[key]
-          }
+import { exportData } from '/@/utils/fnUtils.ts';
+import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
+import { BasicTable, useTable } from '/@/components/Table';
+import { BasicModal } from '/@/components/Modal/index';
+import { getRealWeather, getMonitorInfo } from '/@/api/swHome/index';
+import { getNowTime } from '/@/utils/fnUtils.ts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+let erd = elementResizeDetectorMaker(); //创建实例
+import * as echarts from 'echarts';
+let dataCenter = reactive({
+  listData: [], //列表数据
+  columns: [], //表格头部数据
+  searchFormSchema: [], //搜索数据
+  optionArr: [], // 选择框数据列表
+  formData: {
+    value: '',
+    senid: [],
+  },
+  allAll: [],
+  showModal: false,
+  basicModalTitle: '气象监测过程线',
+  timeData: {
+    time: [],
+  },
+  table_head: [],
+  activeSenid: '',
+  activeSenName: '',
+  activeItem: {},
+  cahrtsData: [],
+  cahrtsList: {
+    time: [],
+    data: [],
+    yName: '',
+  },
+});
+let chart; //charts
+// 导出
+const exportDataFn = () => {
+  let getDataSources = JSON.parse(JSON.stringify(getDataSource()))
+  getDataSources.forEach(element => {
+    for (const key in element) {
+      if (Object.prototype.hasOwnProperty.call(element, key)) {
+        if (key.indexOf('Data') == -1) {
+          delete element[key]
         }
       }
-    });
-    console.log(getDataSources)
-    let getColumnss = JSON.parse(JSON.stringify(getColumns()))
-    getColumnss.splice(0,1)
-    exportData(getColumnss,getDataSources,'气象历史查询-一般气象站.xlsx')
-  }
-  function onChange(value, dateString) {
-    dataCenter.timeData.time = dateString;
-  }
-  //点击弹窗的左侧列表
-  function setListItem(item, index) {
-    dataCenter.activeSenName = index;
-    dataCenter.cahrtsList.yName = item;
-    dataCenter.activeSenid = dataCenter.activeItem[index].senid;
-    getMonitorInfoData();
-  }
-  // 处理表头
-  function processingData(table_head) {
-    table_head.forEach((element) => {
-      for (let key in element) {
-        let item = element[key];
-        element.title = item;
-        element.key = key + 'Data';
-        element.dataIndex = key + 'Data';
-        element.ellipsis = true;
-        element.resizable = true;
-        if (element.title == '时间') {
-          element.width = 200;
-        }
+    }
+  });
+  console.log(getDataSources)
+  let getColumnss = JSON.parse(JSON.stringify(getColumns()))
+  getColumnss.splice(0, 1)
+  exportData(getColumnss, getDataSources, '气象历史查询-一般气象站.xlsx')
+}
+function onChange(value, dateString) {
+  dataCenter.timeData.time = dateString;
+}
+//点击弹窗的左侧列表
+function setListItem(item, index) {
+  dataCenter.activeSenName = index;
+  dataCenter.cahrtsList.yName = item;
+  dataCenter.activeSenid = dataCenter.activeItem[index].senid;
+  getMonitorInfoData();
+}
+// 处理表头
+function processingData(table_head) {
+  table_head.forEach((element) => {
+    for (let key in element) {
+      let item = element[key];
+      element.title = item;
+      element.key = key + 'Data';
+      element.dataIndex = key + 'Data';
+      element.ellipsis = true;
+      element.resizable = true;
+      if (element.title == '时间') {
+        element.width = 200;
       }
-    });
-    return table_head;
-  }
-  // 处理列表数据
-  function setTable(table_value) {
-    table_value.forEach((element) => {
-      for (let key in element) {
-        let item = element[key];
-        if (Object.prototype.toString.call(item) === '[object Object]') {
-          element[key + 'Data'] = item.v;
-        } else {
-          element[key + 'Data'] = item;
-        }
+    }
+  });
+  return table_head;
+}
+// 处理列表数据
+function setTable(table_value) {
+  table_value.forEach((element) => {
+    for (let key in element) {
+      let item = element[key];
+      if (Object.prototype.toString.call(item) === '[object Object]') {
+        element[key + 'Data'] = item.v;
+      } else {
+        element[key + 'Data'] = item;
       }
+    }
+  });
+  console.log(table_value);
+  return table_value;
+}
+// 筛选出所有测站
+function measuringStation(table_value) {
+  let measuringStationArr = [];
+  table_value.forEach((element) => {
+    measuringStationArr.push({
+      label: element.st_name,
+      key: element.st_name,
+      value: element.st_name,
     });
-    console.log(table_value);
-    return table_value;
-  }
-  // 筛选出所有测站
-  function measuringStation(table_value) {
-    let measuringStationArr = [];
-    table_value.forEach((element) => {
-      measuringStationArr.push({
-        label: element.st_name,
-        key: element.st_name,
-        value: element.st_name,
-      });
-    });
-    return measuringStationArr;
-  }
-  // 获取一般气象站数据
-  function getListData() {
-    getRealWeather({ st_type: 5 }).then((res) => {
-      dataCenter.listData = res.data;
-      let { table_head, table_value } = res.data;
-      dataCenter.table_head = JSON.parse(JSON.stringify(table_head));
-      dataCenter.allAll = table_value;
-      dataCenter.columns = processingData(table_head);
-      setColumns(dataCenter.columns);
-      setTableData(setTable(table_value));
-      dataCenter.optionArr = measuringStation(table_value);
-    });
-  }
-  // 弹窗处理
-  function cancel(e) {
-    dataCenter.showModal = false;
-  }
-  // 表格数据
-  const [registerTable, { reload, getColumns, getDataSource , setColumns, setTableData }] = useTable({
-    // 表格头部
-    title: '一般气象站',
-    inset: true,
-    // api: realWsaters,
-    columns: dataCenter.columns,
-    showIndexColumn: true,
-    clickToRowSelect: false,
-    beforeFetch: (T) => {
-      console.log(T);
-    },
-    // 搜索表格
-    formConfig: {
-      labelWidth: 120,
-      schemas: dataCenter.searchFormSchema,
-      // 自定义提交逻辑
-      submitFunc: submitFunc,
-      // 自定义重置逻辑
-      resetFunc: resetFunc,
-    },
-    // 是否需要搜索框
-    useSearchForm: true,
-    // 是否需要表格设置框
-    showTableSetting: true,
-    tableSetting: {
-      redo: false,
-      setting: false,
-    },
-    // rowSelection: { type: 'checkbox' },
-    // 是否需要边框
-    bordered: true,
-    rowKey: 'id',
-    ellipsis: false,
-    pagination:false,
-    resizeHeightOffset:30,
-    fetchSetting: {
-      listField: 'data.table_value',
-    },
   });
-  // 提交逻辑
-  function submitFunc() {
-    screenData();
-  }
-  // 弹窗点击查询
-  async function getHistoryRain() {
-    getMonitorInfoData();
-  }
-  // 筛选数据
-  function screenData() {
-    let arr = [];
-    // 都有数据进行两次筛选
-    if (dataCenter.formData.value != '' && dataCenter.formData.senid.length > 0) {
-      dataCenter.allAll.forEach((element) => {
-        dataCenter.formData.senid.forEach((elements) => {
-          if (
-            elements.label == element.st_name &&
-            element.basin_name.indexOf(dataCenter.formData.value) != -1
-          ) {
-            arr.push(element);
-          }
-        });
-      });
-    } else if (dataCenter.formData.value != '') {
-      dataCenter.allAll.forEach((element) => {
-        if (element.basin_name.indexOf(dataCenter.formData.value) != -1) {
-          console.log(element);
+  return measuringStationArr;
+}
+// 获取一般气象站数据
+function getListData() {
+  getRealWeather({ st_type: 5 }).then((res) => {
+    dataCenter.listData = res.data;
+    let { table_head, table_value } = res.data;
+    dataCenter.table_head = JSON.parse(JSON.stringify(table_head));
+    dataCenter.allAll = table_value;
+    dataCenter.columns = processingData(table_head);
+    setColumns(dataCenter.columns);
+    setTableData(setTable(table_value));
+    dataCenter.optionArr = measuringStation(table_value);
+  });
+}
+// 弹窗处理
+function cancel(e) {
+  dataCenter.showModal = false;
+}
+// 表格数据
+const [registerTable, { reload, getColumns, getDataSource, setColumns, setTableData }] = useTable({
+  // 表格头部
+  title: '一般气象站',
+  inset: true,
+  // api: realWsaters,
+  columns: dataCenter.columns,
+  showIndexColumn: true,
+  clickToRowSelect: false,
+  beforeFetch: (T) => {
+    console.log(T);
+  },
+  // 搜索表格
+  formConfig: {
+    labelWidth: 120,
+    schemas: dataCenter.searchFormSchema,
+    // 自定义提交逻辑
+    submitFunc: submitFunc,
+    // 自定义重置逻辑
+    resetFunc: resetFunc,
+  },
+  // 是否需要搜索框
+  useSearchForm: true,
+  // 是否需要表格设置框
+  showTableSetting: true,
+  tableSetting: {
+    redo: false,
+    setting: false,
+  },
+  // rowSelection: { type: 'checkbox' },
+  // 是否需要边框
+  bordered: true,
+  rowKey: 'id',
+  ellipsis: false,
+  pagination: false,
+  resizeHeightOffset: 30,
+  fetchSetting: {
+    listField: 'data.table_value',
+  },
+});
+// 提交逻辑
+function submitFunc() {
+  screenData();
+}
+// 弹窗点击查询
+async function getHistoryRain() {
+  getMonitorInfoData();
+}
+// 筛选数据
+function screenData() {
+  let arr = [];
+  // 都有数据进行两次筛选
+  if (dataCenter.formData.value != '' && dataCenter.formData.senid.length > 0) {
+    dataCenter.allAll.forEach((element) => {
+      dataCenter.formData.senid.forEach((elements) => {
+        if (
+          elements.label == element.st_name &&
+          element.basin_name.indexOf(dataCenter.formData.value) != -1
+        ) {
           arr.push(element);
         }
       });
-    } else if (dataCenter.formData.senid.length > 0) {
-      dataCenter.allAll.forEach((element) => {
-        dataCenter.formData.senid.forEach((elements) => {
-          if (elements.label == element.st_name) {
-            arr.push(element);
-          }
-        });
-      });
-    } else {
-      arr = dataCenter.allAll;
-    }
-    setTableData(setTable(arr));
-  }
-  // 重置逻辑
-  function resetFunc() {
-    dataCenter.formData.value = '';
-    dataCenter.formData.senid = [];
-  }
-  //点击行
-  function rowCLick(item) {
-    dataCenter.basicModalTitle = `气象监测过程线(${item.st_name})`;
-    // 默认24小时
-    dataCenter.timeData.time = [getNowTime(2), getNowTime(1)];
-    console.log(dataCenter.timeData.time);
-    // 设置默认senid
-    dataCenter.activeSenid = item.pa.senid;
-    dataCenter.activeSenName = 'pa';
-    dataCenter.table_head.forEach((element) => {
-      if (element['pa']) {
-        dataCenter.cahrtsList.yName = element['pa'];
+    });
+  } else if (dataCenter.formData.value != '') {
+    dataCenter.allAll.forEach((element) => {
+      if (element.basin_name.indexOf(dataCenter.formData.value) != -1) {
+        console.log(element);
+        arr.push(element);
       }
     });
-    dataCenter.showModal = true;
-    dataCenter.activeItem = item;
-    getMonitorInfoData();
-    setTimeout(() => {
-      erd.listenTo(document.getElementById('myElement'), () => {
-        if (chart) {
-          chart.resize();
+  } else if (dataCenter.formData.senid.length > 0) {
+    dataCenter.allAll.forEach((element) => {
+      dataCenter.formData.senid.forEach((elements) => {
+        if (elements.label == element.st_name) {
+          arr.push(element);
         }
       });
-    }, 300);
-  }
-  // 查询测站数据
-  async function getMonitorInfoData() {
-    let historyFormData = {};
-    historyFormData.senid = dataCenter.activeSenid;
-    historyFormData.start_time = dataCenter.timeData.time[0] ? dataCenter.timeData.time[0] : '';
-    historyFormData.end_time = dataCenter.timeData.time[1] ? dataCenter.timeData.time[1] : '';
-    let activeInfoData = await getMonitorInfo(historyFormData).then((res) => {
-      return res.data;
     });
-    dataCenter.cahrtsData = activeInfoData;
-    setTimeout(() => {
-      setCharts();
-    }, 0);
+  } else {
+    arr = dataCenter.allAll;
   }
-  // 处理charts数据
-  function setCharts() {
-    dataCenter.cahrtsList.time = [];
-    dataCenter.cahrtsList.data = [];
-    dataCenter.cahrtsData.forEach((element) => {
-      dataCenter.cahrtsList.time.push(element.time);
-      dataCenter.cahrtsList.data.push(element.factv);
+  setTableData(setTable(arr));
+}
+// 重置逻辑
+function resetFunc() {
+  dataCenter.formData.value = '';
+  dataCenter.formData.senid = [];
+}
+//点击行
+function rowCLick(item) {
+  console.log(item)
+  dataCenter.basicModalTitle = `气象监测过程线(${item.st_name})`;
+  // 默认24小时
+  dataCenter.timeData.time = [getNowTime(2), getNowTime(1)];
+  console.log(dataCenter.timeData.time);
+  // 设置默认senid
+  dataCenter.activeSenid = item['10'].senid;
+  dataCenter.activeSenName = '10';
+  dataCenter.table_head.forEach((element) => {
+    if (element['10']) {
+      dataCenter.cahrtsList.yName = element['10'];
+    }
+  });
+  dataCenter.showModal = true;
+  dataCenter.activeItem = item;
+  getMonitorInfoData();
+  setTimeout(() => {
+    erd.listenTo(document.getElementById('myElement'), () => {
+      if (chart) {
+        chart.resize();
+      }
     });
-    echarts1();
-  }
-  // 图表
-  function echarts1() {
-    chart = echarts.init(document.getElementById('charts-box1'));
-    var option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-        formatter(params) {
-          var relVal = params[0].name;
-          for (var i = 0, l = params.length; i < l; i++) {
-              console.log('tooltip数据值',params[i].value)
-              //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
-              relVal += '<br/>' + params[i].marker  + Number(params[i].value)
-          }
-          return relVal;
-        },
+  }, 300);
+}
+// 查询测站数据
+async function getMonitorInfoData() {
+  let historyFormData = {};
+  historyFormData.senid = dataCenter.activeSenid;
+  historyFormData.start_time = dataCenter.timeData.time[0] ? dataCenter.timeData.time[0] : '';
+  historyFormData.end_time = dataCenter.timeData.time[1] ? dataCenter.timeData.time[1] : '';
+  let activeInfoData = await getMonitorInfo(historyFormData).then((res) => {
+    return res.data;
+  });
+  dataCenter.cahrtsData = activeInfoData;
+  setTimeout(() => {
+    setCharts();
+  }, 0);
+}
+// 处理charts数据
+function setCharts() {
+  dataCenter.cahrtsList.time = [];
+  dataCenter.cahrtsList.data = [];
+  dataCenter.cahrtsData.forEach((element) => {
+    dataCenter.cahrtsList.time.push(element.time);
+    dataCenter.cahrtsList.data.push(element.factv);
+  });
+  echarts1();
+}
+// 图表
+function echarts1() {
+  chart = echarts.init(document.getElementById('charts-box1'));
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
       },
-      xAxis: {
-        type: 'category',
-        data: dataCenter.cahrtsList.time,
-        axisLabel: {
-          //x轴文字的配置
-          show: true,
-          textStyle: {
-            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'; //按需要求余
+      formatter(params) {
+        var relVal = params[0].name;
+        for (var i = 0, l = params.length; i < l; i++) {
+          console.log('tooltip数据值', params[i].value)
+          //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
+          relVal += '<br/>' + params[i].marker + Number(params[i].value)
+        }
+        return relVal;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: dataCenter.cahrtsList.time,
+      axisLabel: {
+        //x轴文字的配置
+        show: true,
+        textStyle: {
+          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;
             }
-            return str;
-          },
+
+            if (!(i % 10)) str += '\n'; //按需要求余
+          }
+          return str;
         },
       },
-      yAxis: {
-        type: 'value',
-        name: dataCenter.cahrtsList.yName,
-        scale: true,
-        axisLabel: {
-          //y轴文字的配置
-          textStyle: {
-            color: '#333',
-            margin: 15,
-          },
-          formatter: function (value) {
-            return value + '';
-          },
-          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
+    },
+    yAxis: {
+      type: 'value',
+      name: dataCenter.cahrtsList.yName,
+      scale: true,
+      axisLabel: {
+        //y轴文字的配置
+        textStyle: {
+          color: '#333',
+          margin: 15,
         },
-        splitLine: {
-          //网格线
-          lineStyle: {
-            type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
-            width: 1, //y轴线的宽度
-            color: '#ccc',
-          },
-          show: true, //隐藏或显示
+        formatter: function (value) {
+          return value + '';
         },
+        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
       },
-      series: [
-        {
-          data: dataCenter.cahrtsList.data,
-          type: 'line',
-          smooth: true,
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
+          width: 1, //y轴线的宽度
+          color: '#ccc',
         },
-      ],
-    };
-    option && chart.setOption(option);
-  }
-  onMounted(() => {
-    getListData();
-  });
+        show: true, //隐藏或显示
+      },
+    },
+    series: [
+      {
+        data: dataCenter.cahrtsList.data,
+        type: 'line',
+        smooth: true,
+      },
+    ],
+  };
+  option && chart.setOption(option);
+}
+onMounted(() => {
+  getListData();
+});
 </script>
 <style scoped lang="less">
-  .form-box {
-    position: absolute;
-    z-index: 9;
-    width: 66.6666%;
-    .custom-input {
-      width: calc(100% - 100px);
-    }
-  }
-  .span-label {
-    width: 90px;
-    padding-right: 10px;
-    display: inline-block;
-    text-align: right;
-    line-height: 32px;
-  }
-  .marg-left {
-    margin-left: 10px;
+.form-box {
+  position: absolute;
+  z-index: 9;
+  width: 66.6666%;
+
+  .custom-input {
+    width: calc(100% - 100px);
   }
-  .ant-table-striped-modal {
-    margin-top: 20px;
+}
+
+.span-label {
+  width: 90px;
+  padding-right: 10px;
+  display: inline-block;
+  text-align: right;
+  line-height: 32px;
+}
+
+.marg-left {
+  margin-left: 10px;
+}
+
+.ant-table-striped-modal {
+  margin-top: 20px;
+}
+
+.box-basic {
+  height: calc(100% - 46px);
+  width: calc(100% - 28px);
+  position: absolute;
+  // min-height: 600px;
+}
+
+.moddal-box {
+  display: flex;
+  height: calc(100% - 32px);
+
+  .left-box {
+    width: 140px;
+    overflow: hidden;
+    height: 100%;
+    background-color: #f4f4f4;
+
+    ul {
+      padding: 10px;
+
+      li {
+        line-height: 40px;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+    }
   }
-  .box-basic {
-    height: calc(100% - 46px);
-    width: calc(100% - 28px);
-    position: absolute;
-    // min-height: 600px;
+
+  .center-box {
+    flex: 1;
+    overflow: hidden;
+    height: 100%;
+    margin-left: 20px;
   }
-  .moddal-box {
-    display: flex;
-    height: calc(100% - 32px);
-    .left-box {
-      width: 140px;
-      overflow: hidden;
-      height: 100%;
-      background-color: #f4f4f4;
-      ul {
-        padding: 10px;
-        li {
-          line-height: 40px;
-          padding-left: 10px;
-          cursor: pointer;
+
+  .right-box {
+    width: 400px;
+    height: 100%;
+    overflow: auto;
+    margin-left: 20px;
+    position: relative;
+
+    ul {
+
+      // position: relative;
+      li {
+        display: flex;
+        line-height: 36px;
+
+        &>div {
+          // flex: 1;
+          text-align: center;
         }
-      }
-    }
-    .center-box {
-      flex: 1;
-      overflow: hidden;
-      height: 100%;
-      margin-left: 20px;
-    }
-    .right-box {
-      width: 400px;
-      height: 100%;
-      overflow: auto;
-      margin-left: 20px;
-      position: relative;
-      ul {
-        // position: relative;
-        li {
-          display: flex;
-          line-height: 36px;
-          & > 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(1) {
+          min-width: 180px;
         }
-        li:nth-child(1) {
-          position: absolute;
-          width: 100%;
+
+        &>div:nth-child(2) {
+          flex: 1;
         }
-        li:nth-child(2) {
-          padding-top: 36px;
+
+        &>div:nth-child(3) {
+          flex: 1;
         }
       }
+
+      li:nth-child(1) {
+        position: absolute;
+        width: 100%;
+      }
+
+      li:nth-child(2) {
+        padding-top: 36px;
+      }
     }
   }
-  .top-search {
-    padding-bottom: 10px;
-  }
-  .active-tab {
-    background-color: #ccc;
-  }
-  
+}
+
+.top-search {
+  padding-bottom: 10px;
+}
+
+.active-tab {
+  background-color: #ccc;
+}
 </style>
 <style lang="less">
 ::v-deep .ant-table {
   width: 100% !important;
-  .ant-table-body{
+
+  .ant-table-body {
     overflow: auto !important;
-    th,tr,td {
+
+    th,
+    tr,
+    td {
       white-space: nowrap;
-       text-overflow: ellipsis;
-       word-break: break-word;
-       overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+      overflow: hidden;
     }
   }
-  .ant-table-tbody{
-    th,tr,td {
+
+  .ant-table-tbody {
+
+    th,
+    tr,
+    td {
       white-space: nowrap;
-       text-overflow: ellipsis;
-       word-break: break-word;
-       overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+      overflow: hidden;
     }
   }
 }

src/views/realTime/weather/components/standard.vue

@@ -64,8 +64,7 @@
           <ul>
             <template v-for="(item, index) in dataCenter.table_head" :key="item">
               <template v-for="(items, indexs, is) in item" :key="indexs">
-                <li
-                  v-if="
+                <!-- v-if="
                     indexs == 'voltage' ||
                     indexs == 'rain' ||
                     indexs == 'wd' ||
@@ -73,10 +72,11 @@
                     indexs == 'hum' ||
                     indexs == 'temp' ||
                     indexs == 'pa'
-                  "
-                  :class="{ 'active-tab': dataCenter.activeSenName == indexs }"
-                  @click="setListItem(items, indexs)"
-                >
+                  " -->
+                <li v-if="items != '测站分区' &&
+                  items != '测站' &&
+                  items != '时间'
+                  " :class="{ 'active-tab': dataCenter.activeSenName == indexs }" @click="setListItem(items, indexs)">
                   {{ items }}
                 </li>
               </template>
@@ -318,11 +318,11 @@
     // 默认24小时
     dataCenter.timeData.time = [getNowTime(2), getNowTime(1)];
     // 设置默认senid
-    dataCenter.activeSenid = item.pa.senid;
-    dataCenter.activeSenName = 'pa';
+    dataCenter.activeSenid = item['10'].senid;
+    dataCenter.activeSenName = '10';
     dataCenter.table_head.forEach((element) => {
-      if (element['pa']) {
-        dataCenter.cahrtsList.yName = element['pa'];
+      if (element['10']) {
+        dataCenter.cahrtsList.yName = element['10'];
       }
     });
     dataCenter.showModal = true;