井筒--拖拽列带测试

src/main/resources/mapping/cquery/WellInfoCQuery.xml

@@ -160,8 +160,7 @@
         order by zone_no
     </select>
     <select id="selectTestHistoryList" resultType="java.util.HashMap">
-        select TO_CHAR(testing_date , 'YYYY-MM-dd') testing_date,
-               well_id, well_common_name, testing_name, anal_coy, construction_description
+        select *
         from by_dm.dws_dm_test_history th
         where th.well_id = #{well_id}
     </select>
@@ -172,9 +171,7 @@
         group by th.testing_name
     </select>
     <select id="getLastTestHistory" resultType="java.util.HashMap">
-        select
-            TO_CHAR(testing_date , 'YYYY-MM-dd') testing_date,
-            well_id, well_common_name, testing_name, anal_coy, construction_description
+        select *
         from by_dm.dws_dm_test_history th
         where th.well_id = #{well_id}
         order by th.testing_date desc limit 1
@@ -219,9 +216,10 @@
         order by bha.start_time desc limit 1
     </select>
     <select id="selectDataIndexList" resultType="java.util.HashMap">
-        select *
+        select di.*,well.well_id
         from by_dwr.fact_dwr_well_data_index di
-        where di.well_id = #{well_id}
+                 inner join by_dwr.fact_dwr_well_basic_information well on di.well_common_name=well.well_common_name
+        where well.well_id = #{well_id}
     </select>
     <select id="selectDimProjectTypeList" resultType="java.util.HashMap">
         select name as title,value_id as key

vue/package-lock.json

@@ -13685,6 +13685,21 @@
         "is-plain-object": "5.0.0"
       }
     },
+    "vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "requires": {
+        "sortablejs": "1.14.0"
+      },
+      "dependencies": {
+        "sortablejs": {
+          "version": "1.14.0",
+          "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+          "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        }
+      }
+    },
     "w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",

vue/package.json

@@ -64,6 +64,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "~4.2.1",
+    "vuedraggable": "^4.1.0",
     "xlsx": "~0.18.5"
   },
   "devDependencies": {

vue/public/appconfig.json

@@ -1,5 +1,5 @@
 {
   "isDev": true,
   "SSOLoginUrl": "http://www.baidu.com",
-  "huabeiHost": "http://192.168.0.68:8077/"
+  "huabeiHost": "http://10.73.178.206:8077/"
 }

vue/src/views/wellinfo/index.vue

@@ -262,6 +262,20 @@
                       @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
       </a-spin>
       <div style="width:100%;height: 500px;margin-top:15px">
+
+        <!--        <draggable v-model="filterColumns" item-key="id">
+                  <template #item="{element}">
+                    <div> {{ element.title }}</div>
+                  </template>
+                </draggable>
+                <ul>
+                  <li v-for="(item,index) in filterColumns" draggable="true"
+                      @dragstart="dragStart(index)"
+                      @dragover.prevent="dragOver($event)"
+                      @dragenter.prevent @drop="dragEnter(index)">
+                    {{ item.title }}
+                  </li>
+                </ul>-->
         <ChartMap :datas="data"></ChartMap>
       </div>
     </div>
@@ -301,11 +315,137 @@ import {useTabsViewStore} from "@/store/modules/tabsView";
 import ChartCell from '@/components/basic/chart/chart-cell.vue'
 import ChartMap from '@/components/basic/chart/chart-map.vue'
 import {download} from "@/utils/downloadFile";
+import type {GetComponentProps} from "ant-design-vue/lib/vc-table/interface";
 
 export default defineComponent({
   name: 'wellinfoindex',
   components: {ChartCell, ChartMap},
   setup() {
+    const state = reactive({
+      dragIndex: 0
+    });
+    const dragStart = (e) => {
+      e.stopPropagation();
+      state.dragIndex = parseInt(e.srcElement.attributes["colstart"].value);
+    }
+    const dragOver = (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+    }
+    const handleDrag = (e) => {
+      e.currentTarget.style.opacity = "0";
+    };
+    const dragEnd = (e) => {
+      e.currentTarget.style.opacity = "1";
+      state.dragIndex = -1;
+    };
+    const groupList = ['oil_prod_mon', 'oil_prod_year', 'oil', 'gas_prod_mon', 'gas_prod_year', 'gas', 'water_prod_mon', 'water_prod_year', 'water'];
+    const dragEnter = (e) => {
+      e.preventDefault();
+      console.log(e.srcElement.attributes["colstart"].value);
+      let index = parseInt(e.srcElement.attributes["colstart"].value);
+      if (state.dragIndex != -1 && state.dragIndex != index) {
+
+        let newItems = [...filterColumns.value];
+        const dragItem = filterColumns.value[state.dragIndex];
+        const dragKey = dragItem.key == undefined ? "" : dragItem.key.toString();
+
+        const moveItem = filterColumns.value[index];
+        const moveKey = moveItem.key == undefined ? "" : moveItem.key.toString();
+
+        if (state.dragIndex < index) {//右移
+          /*  let num1 = moveItem.key == 'oil_prod_mon' || dragItem.key == 'oil_prod_mon' ? 3 : 1;//如果是块的情况多移动两个列
+            let num2 = dragItem.key == 'oil_prod_mon' ? state.dragIndex : index;//块为起点还是放下点
+            let num3 = dragItem.key == 'oil_prod_mon' ?1:0;
+            let group = newItems.slice(num2, num2 + num1);
+            console.log(state.dragIndex,'dragIndex',index,'index',group);
+            newItems.splice(num2, num1);
+            newItems.splice(state.dragIndex+num3, 0, ...group);*/
+          let moveList = groupList;
+          if (!groupList.includes(moveKey)) {
+            moveList = [moveKey];
+          } else {
+            let star = groupList.indexOf(moveKey);
+            moveList = groupList.slice(star, star + 3);
+          }
+          let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
+          newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
+          newItems.splice(state.dragIndex, 0, ...group);
+          //如果起始为块则需要减两列
+          //如果放下为块则要加两列
+          /* let shift = groupList.includes(moveKey) || groupList.includes(dragKey) ? 3 : 1;
+           index = (groupList.includes(dragKey) ? index - 2 + (groupList.includes(moveKey) ? 2 : 0) : state.dragIndex + shift);*/
+          if (!groupList.includes(dragKey)&&!groupList.includes(moveKey)){
+            index = state.dragIndex+ 1;
+          }
+          if (groupList.includes(dragKey)) {
+            index = index - 2;
+          }
+          if (groupList.includes(moveKey)) {
+            index = index + 2;
+          }
+          // index = index + (num1 - 1);
+          /* let oil = ['oil_prod_mon', 'oil_prod_year', 'oil'];
+           let group = newItems.filter(x => oil.includes(x.key == undefined ? "" : x.key.toString()));
+           newItems = newItems.filter(x => !oil.includes(x.key == undefined ? "" : x.key.toString()));
+           newItems.splice(state.dragIndex+1, 0, ...group); */
+        } else {//=左移
+
+          let moveList = groupList;
+          if (!groupList.includes(dragKey)) {
+            moveList = [dragKey];
+          } else {
+            let star = groupList.indexOf(dragKey);
+            moveList = groupList.slice(star, star + 3);
+          }
+          let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
+          newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
+          newItems.splice(index, 0, ...group);
+          filterColumns.value = newItems;
+          //单个块可正常移动
+          /* let num1 = moveItem.key == 'oil_prod_mon' || dragItem.key == 'oil_prod_mon' ? 3 : 1;//如果是块的情况多移动两个列
+           let num2 = dragItem.key == 'oil_prod_mon' ? state.dragIndex : index;//块为起点还是放下点
+           let num3 = dragItem.key == 'oil_prod_mon' ? 0 : 1;
+           let group = newItems.slice(num2, num2 + num1);
+           newItems.splice(num2, num1);
+           newItems.splice(index + num3, 0, ...group);*/
+        }
+
+        /*if (moveItem.key == 'oil_prod_mon' || dragItem.key == "oil_prod_mon") {
+          if (state.dragIndex < index) {//右移
+            let group = newItems.slice(index, index + 3);
+            newItems.splice(index, 3);
+            newItems.splice(state.dragIndex, 0, ...group);
+          } else {
+            let group = newItems.slice(state.dragIndex, state.dragIndex + 3);
+            newItems.splice(state.dragIndex, 3);
+            newItems.splice(index, 0, ...group);
+          }
+        } else {
+          newItems.splice(state.dragIndex, 1);
+          newItems.splice(index, 0, dragItem);
+        }*/
+        //单个列移动
+        /* newItems.splice(state.dragIndex, 1);
+        newItems.splice(index, 0, dragItem);
+        state.dragIndex = index;
+        filterColumns.value = newItems;*/
+
+        filterColumns.value = newItems;
+        state.dragIndex = index;
+      }
+    };
+    const onHeaderCell= () => {
+      return {
+        draggable: true,
+        onDragstart: dragStart,
+        onDrop: dragEnter,
+        onDragover: dragOver,
+        onHandleDrag: handleDrag,
+        onDragEnd: dragEnd,
+        onDragenter: dragEnter
+      }
+    }
     const route = useRoute();
     const expand = ref(false);
     const formRef = ref<FormInstance>();
@@ -321,7 +461,10 @@ export default defineComponent({
     const viewModel = ref("list");
     const tabsViewStore = useTabsViewStore();
     const docList = ref([]);
-    const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
+    const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {
+      label: "分支井",
+      value: "分支井"
+    }]);
     const replaceFields = {
       children: 'children',
       title: 'label',
@@ -363,17 +506,27 @@ export default defineComponent({
         style: {'border-top': '2px solid red'},
       }
     }
+    const oilDragHeader:GetComponentProps<any> = () => {
+      return {...oilHeader(),...onHeaderCell()}
+    }
+
     const gasHeader = () => {
       return {
         style: {'border-top': '2px solid #009900'},
       }
     }
+    const gasDragHeader:GetComponentProps<any> = () => {
+      return {...gasHeader(),...onHeaderCell()}
+    }
     const waterHeader = () => {
       return {
         style: {'border-top': '2px solid #4472C4'},
       }
     }
-    const filterColumns = ref([]);
+    const waterDragHeader:GetComponentProps<any> = () => {
+      return {...waterHeader(),...onHeaderCell()}
+    }
+    const filterColumns = ref<TableColumnsType>([]);
 
     const columns: TableColumnsType = [
       {
@@ -384,40 +537,67 @@ export default defineComponent({
         align: "center", fixed: 'left',
         customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
       },
-      {title: '井名', dataIndex: 'well_common_name', key: 'well_common_name', width: 120, fixed: 'left'},
-      {title: '采油厂机构', dataIndex: 'org_name_a1', key: 'org_name_a1', width: 120},
-      {title: '地质单元', dataIndex: 'project_name', key: 'project_name', width: 120},
-      {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 120},
       {
-        title: '开钻日期', dataIndex: 'spud_date', key: 'spud_date', width: 120, customRender: ({record}) =>
+        title: '井名',
+        dataIndex: 'well_common_name',
+        key: 'well_common_name',
+        width: 120,
+        fixed: 'left'
+      },
+      {title: '采油厂机构', dataIndex: 'org_name_a1', key: 'org_name_a1', width: 120, customHeaderCell: onHeaderCell},
+      {title: '地质单元', dataIndex: 'project_name', key: 'project_name', width: 120, customHeaderCell: onHeaderCell},
+      {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 120, customHeaderCell: onHeaderCell},
+      {
+        title: '开钻日期',
+        dataIndex: 'spud_date',
+        key: 'spud_date',
+        width: 120,
+        customHeaderCell: onHeaderCell,
+        customRender: ({record}) =>
           record.spud_date == null ? "" : (dayjs(record.spud_date).format('YYYY-MM-DD'))
       },
       {
-        title: '完钻日期', dataIndex: 'end_drilling_date', key: 'end_drilling_date', width: 120, customRender: ({record}) =>
+        title: '完钻日期',
+        dataIndex: 'end_drilling_date',
+        key: 'end_drilling_date',
+        width: 120,
+        customHeaderCell: onHeaderCell,
+        customRender: ({record}) =>
           record.end_drilling_date == null ? "" : (dayjs(record.end_drilling_date).format('YYYY-MM-DD'))
       },
       {
-        title: '完井日期', dataIndex: 'completion_date', key: 'completion_date', width: 120, customRender: ({record}) =>
+        title: '完井日期',
+        dataIndex: 'completion_date',
+        key: 'completion_date',
+        width: 120,
+        customHeaderCell: onHeaderCell,
+        customRender: ({record}) =>
           record.end_drilling_date == null ? "" : (dayjs(record.completion_date).format('YYYY-MM-DD'))
       },
       {
         title: '开始采油日期',
         dataIndex: 'oil_prod_begin_date',
-        key: 'oil_prod_begin_date', width: 120,
+        key: 'oil_prod_begin_date', width: 120, customHeaderCell: onHeaderCell,
         customRender: ({record}) =>
           record.oil_prod_begin_date == null ? "" : (dayjs(record.oil_prod_begin_date).format('YYYY-MM-DD'))
       },
       {
         title: '最近采油日期',
         dataIndex: 'oil_prod_recent_date',
-        key: 'oil_prod_recent_date', width: 120,
+        key: 'oil_prod_recent_date', width: 120, customHeaderCell: onHeaderCell,
         customRender: ({record}) =>
           record.oil_prod_recent_date == null ? "" : (dayjs(record.oil_prod_recent_date).format('YYYY-MM-DD'))
       },
-      {title: '状态', dataIndex: 'current_state_name', key: 'current_state', width: 120},
-      {title: '设计井深(m)', dataIndex: 'budgeted_md', key: 'tempNo', width: 120},
+      {title: '状态', dataIndex: 'current_state_name', key: 'current_state', width: 120, customHeaderCell: onHeaderCell},
+      {title: '设计井深(m)', dataIndex: 'budgeted_md', key: 'tempNo', width: 120, customHeaderCell: onHeaderCell},
       {
-        title: '含水率', dataIndex: 'water_cut', key: 'water_cut', width: 60, align: 'center', customCell: (record) => {
+        title: '含水率',
+        dataIndex: 'water_cut',
+        key: 'water_cut',
+        width: 60,
+        align: 'center',
+        customHeaderCell: onHeaderCell,
+        customCell: (record) => {
           return {class: getTdColor(record.water_cut)};
         }
       },
@@ -426,7 +606,7 @@ export default defineComponent({
         dataIndex: 'oil_prod_mon',
         key: 'oil_prod_mon',
         width: 120,
-        customHeaderCell: oilHeader
+        customHeaderCell: oilDragHeader
       },
       {
         title: '累产油量(10kt)',
@@ -441,7 +621,7 @@ export default defineComponent({
         dataIndex: 'gas_prod_mon',
         key: 'gas_prod_mon',
         width: 170,
-        customHeaderCell: gasHeader
+        customHeaderCell: gasDragHeader
       },
       {
         title: '累产气量(10^8m³)',
@@ -456,7 +636,7 @@ export default defineComponent({
         dataIndex: 'water_prod_mon',
         key: 'water_prod_mon',
         width: 110,
-        customHeaderCell: waterHeader
+        customHeaderCell:waterDragHeader
       },
       {
         title: '累注水量(10kt)',
@@ -468,7 +648,7 @@ export default defineComponent({
       {title: '累注水量趋势', dataIndex: 'water', key: 'water', width: 100, customHeaderCell: waterHeader},
       {title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
     ];
-    filterColumns.value = columns as any;
+    filterColumns.value = [...columns];
 
     watch(
       () => showColumnType.value,
@@ -491,18 +671,18 @@ export default defineComponent({
           }
           return true
         })
-        filterColumns.value = filterValue as any;
+        filterColumns.value = [...filterValue];
       }
     );
 
-    const preCheckValues =ref( Object.assign(showColumnType.value));
+    const preCheckValues = ref(Object.assign(showColumnType.value));
     const onCheckboxChange = (checkValues: []) => {
       setTimeout(() => {
         let tbody = document.getElementsByClassName("ant-table-body")[0];
         if (tbody) {
           tbody.scrollLeft = preCheckValues.value.length > checkValues.length ? 0 : tbody.scrollWidth;
         }
-        preCheckValues.value =checkValues;
+        preCheckValues.value = checkValues;
       }, 300)
     }
     const getTdColor = (water_cut) => {
@@ -685,12 +865,14 @@ export default defineComponent({
       treeOnExpand,
       subjectTrees,
       getSubjectTree, searchTree,
-      treeOnSelect, pagination
+      treeOnSelect, pagination, dragStart, dragEnter, dragOver
     };
   },
-  created() {
+  created
+  () {
     this.loadData();
-  },
+  }
+  ,
   activated() {
   }
 });