提交项目

src/views/historyData/rain/index.vue

@@ -312,11 +312,13 @@ function setTitle(data) {
     partition.children = [];
     for (const elements in element['最大值']) {
       let content = element['最大值'][elements];
+      const { chineseCount, otherCount } = countCharacters(elements);
+      console.log(elements,chineseCount*23+otherCount*15)
       partition.children.push({
         title: elements,
         dataIndex: elements,
         key: elements,
-        width: elements.length*24,
+        width: chineseCount*16 + otherCount*10 + 16,
         ellipsis: 'auto',
         customRender: ({ record, column, index, text }) => {
           // customRender的返回值要遵循vue-jsx语法,要加()和换行
@@ -353,6 +355,26 @@ function setTitle(data) {
     setColumns(columns);
   }, 100);
 }
+function countCharacters(str) {
+  let chineseCount = 0;
+  let otherCount = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charAt(i);
+    const charCode = char.charCodeAt(0);
+    
+    if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
+      chineseCount++; // 是汉字
+    } else {
+      otherCount++; // 是其他字符
+    }
+  }
+
+  return {
+    chineseCount,
+    otherCount
+  };
+}
 function handleTitle(record, text, column) {
   // console.log(text);
   // console.log(column);

src/views/historyData/rain/index2.vue

@@ -180,15 +180,19 @@ const [registerTable, { reload, getRawDataSource, getForm, setLoading, setColumn
     sortFn: (info) => {
       if (info.order == 'descend') {
         dataArr.sort((a, b) => {
-          if (a[info.field] < b[info.field]) return 1;
-          if (a[info.field] > b[info.field]) return -1;
+        let aNum = a[info.field] == '--'?-1:a[info.field]*1
+        let bNum = b[info.field] == '--'?-1:b[info.field]*1
+          if ( aNum < bNum) return 1;
+          if ( aNum > bNum) return -1;
           return 0;
         });
       }
       if (info.order == 'ascend') {
         dataArr.sort((a, b) => {
-          if (a[info.field] < b[info.field]) return -1;
-          if (a[info.field] > b[info.field]) return 1;
+        let aNum = a[info.field] == '--'?-1:a[info.field]*1
+        let bNum = b[info.field] == '--'?-1:b[info.field]*1
+          if (aNum < bNum) return -1;
+          if (aNum > bNum) return 1;
           return 0;
         });
       }

src/views/realTime/rain/index.vue

@@ -37,7 +37,11 @@
         <a-table class="ant-table-striped ant-table-striped-modal" :dataSource="tableDataModal.table_value"
           :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" bordered size="middle"
           :pagination="false" :columns="tableDataModal.table_head" :scroll="{ y: '60vh' }"
-          :rowKey="(record, index) => index" />
+          :rowKey="(record, index) => index">
+          <template #diagram="{ record  }">
+            <Progress :percent="record.factv/maxNum*100" :show-info="false" />
+          </template>
+        </a-table>
       </div>
     </BasicModal>
   </div>
@@ -49,6 +53,7 @@ import { BasicModal } from '/@/components/Modal/index';
 import { getRealRain, getRiverTree, historyRain } from '/@/api/swHome/index';
 import { getNowTime, exportData } from '/@/utils/fnUtils.ts';
 import { Authority } from '../../../components/Authority/index';
+import { Progress } from 'ant-design-vue';
 let columns = [];
 let searchFormSchema = [];
 let dataArr = []
@@ -64,20 +69,24 @@ const [registerTable, { reload, setColumns, setTableData }] = useTable({
     console.log(T);
   },
   sortFn: (info) => {
-    console.log(info)
-    console.log(dataArr)
+    // console.log(info)
+    // console.log(dataArr)
     if (info.order == 'descend') {
       
       dataArr.sort((a, b) => {
-        if (a[info.field] < b[info.field]) return 1;
-        if (a[info.field] > b[info.field]) return -1;
+        let aNum = a[info.field] == '--'?-1:a[info.field]*1
+        let bNum = b[info.field] == '--'?-1:b[info.field]*1
+        if ( aNum < bNum) return 1;
+        if ( aNum > bNum) return -1;
         return 0;
       });
     }
     if (info.order == 'ascend') {
       dataArr.sort((a, b) => {
-        if (a[info.field] < b[info.field]) return -1;
-        if (a[info.field] > b[info.field]) return 1;
+        let aNum = a[info.field] == '--'?-1:a[info.field]*1
+        let bNum = b[info.field] == '--'?-1:b[info.field]*1
+        if (aNum < bNum) return -1;
+        if (aNum > bNum) return 1;
         return 0;
       });
     }
@@ -125,6 +134,7 @@ let tableDataModal = reactive({
       dataIndex: 'key',
       key: 'key',
       align: 'center',
+      width:100,
       customRender: (text, record, index) => {
         return text.index + 1;
       }, //此处为重点
@@ -133,11 +143,21 @@ let tableDataModal = reactive({
       title: '时间',
       dataIndex: 'time',
       key: 'time',
+      align: 'center',
     },
     {
       title: '时段雨量',
       dataIndex: 'factv',
       key: 'factv',
+      align: 'center',
+    },
+    {
+      title: '图示',
+      dataIndex: 'factv',
+      key: 'factv',
+      align: 'center',
+      width:200,
+      slots: { customRender: 'diagram' },
     },
   ],
   table_value: [],
@@ -173,6 +193,18 @@ function getHistoryRain() {
   historyFormData.end_time = timeData.time[1] ? timeData.time[1] : '';
   historyRain(historyFormData).then((res) => {
     tableDataModal.table_value = res.data;
+    tableNumSet(res.data)
+  });
+}
+// 设置项目
+let maxNum = ref(0)
+const tableNumSet = (table) => {
+  maxNum.value = 0
+  table.forEach(element => {
+    let factv = element.factv*1
+    if(maxNum.value<factv){
+      maxNum.value = factv
+    }
   });
 }
 // 所有雨量站数据
@@ -234,11 +266,14 @@ function processingData(table_head) {
       if (element.title == '时间') {
         element.width = 200;
       }
+      // if (element.title == '传感器ID') {
+      //   element.width = 147;
+      // }
       if (element.title != '时间'
         && element.title != '流域分区'
         && element.title != '测站'
         && element.title != '传感器ID') {
-        element.width = 200;
+        element.width = 140;
         element.sorter = true
       }
     }
@@ -300,6 +335,9 @@ onMounted(async () => {
 
 .ant-table-striped-modal {
   margin-top: 20px;
+  ::v-deep(.ant-table-fixed-header .ant-table-scroll .ant-table-header){
+    width: 1182px !important;
+  }
 }
 
 .vben-basic-table-form-container {