smartsearch/vue/src/views/wellinfo/index.vue

<template>
  <div class="query-index">
    <div class="query-index-tree" v-if="showTree">
      <div class="query-index-tree-search">
        <a-tabs v-model:activeKey="activeTab" @change="tabChange" style="width:97%;">
          <a-tab-pane key="1" tab="组织架构目录">
          </a-tab-pane>
          <a-tab-pane key="2" tab="地质单元目录" forceRender="true">
          </a-tab-pane>
        </a-tabs>
        <DoubleLeftOutlined @click="showTree=false"/>
      </div>
      <div style="margin-top: -15px">
        <a-input-search
          v-model:value="subjectTrees.searchStr"
          placeholder="查找目录..." allow-clear
          @search="searchTree"
        />
      </div>
      <div class="query-index-tree-box">
        <a-tree
          :show-line="true" blockNode="true"
          :tree-data="subjectTrees.data"
          v-model:expandedKeys="subjectTrees.expandedKeys"
          v-model:selectedKeys="subjectTrees.selectedKeys"
          :replace-fields="replaceFields"
          :autoExpandParent="subjectTrees.autoExpandParent"
          @expand="treeOnExpand" @select="treeOnSelect">
          <template #switcherIcon="{ switcherCls }"><caret-down-outlined style="font-size:20px;" :class="switcherCls" /></template>
          <template #title="{ label,value,children }">
                    <span v-if="label!=null&&label.indexOf(subjectTrees.searchStr) > -1">
                      {{ label.substr(0, label.indexOf(subjectTrees.searchStr)) }}
                      <span style="color: #f50">{{ subjectTrees.searchStr }}</span>
                      {{ label.substr(label.indexOf(subjectTrees.searchStr) + subjectTrees.searchStr.length) }}
                    </span>
            <span v-else>{{ label }}</span>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="query-index-close" v-else>
      <DoubleRightOutlined @click="showTree=true"/>
    </div>
    <div class="query-index-content">
      <div class="query-index-form">
        <a-form ref="formRef" name="fromQuery"
                class="ant-advanced-search-form"
                :label-col="labelCol"
                :model="formState">
          <a-row :gutter="24" class="query-index-row">
            <a-col :span="6">
              <a-form-item name="well_id" label="井号:">
                <a-input v-model:value="formState.well_id"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="well_common_name" label="井名:">
                <a-input v-model:value="formState.well_common_name"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="well_type" label="井型:">
                <a-select ref="select" v-model:value="formState.well_type"
                          :options="wellTypeList" :field-names="{label:'name',value:'value'}" :allow-clear="true">
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6" style="text-align: left">
              <MenuOutlined @click="showQuery=true" v-if="!showQuery"/>
              <LineOutlined @click="showQuery=false" v-else/>
              <a-button type="primary" html-type="submit" @click="onQuery" style="margin-left: 10px;">查询</a-button>
              <a-button html-type="submit"
                        @click="() => {resetFields();formState.ref_date=new Date(); onQuery()}"
                        style="margin-left: 10px;">
                重置
              </a-button>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="query-index-row" v-if="showQuery">
            <a-col :span="6">
              <a-form-item name="spud_date_begin" label="开钻日期:">
                <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
                                @change="(d)=>{onRangeChange(d,'spud_date_begin','spud_date_end')}"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="completion_date_begin" label="完井日期:">
                <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
                                @change="(d)=>{onRangeChange(d,'completion_date_begin','completion_date_end')}"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="oil_prod_begin_date_begin" label="开始采油日期:">
                <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
                                @change="(d)=>{onRangeChange(d,'oil_prod_begin_date_begin','oil_prod_begin_date_end')}"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="query-index-row" v-if="showQuery">
            <a-col :span="6">
              <a-form-item label="最近采油日期:">
                <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
                                @change="(d)=>{onRangeChange(d,'oil_prod_recent_date_begin','oil_prod_recent_date_end')}"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="edit-operation">
            <a-col :span="24" style="text-align: right">
              <a-checkbox-group v-model:value="showColumnType">
                <a-row>
                  <a-col :span="12">
                    <a-checkbox value="oil">显示产油</a-checkbox>
                  </a-col>
                  <a-col :span="12">
                    <a-checkbox value="gas">显示产气</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
              <a-radio-group v-model:value="viewModel" style="text-align: left">
                <a-radio-button value="list">
                  <UnorderedListOutlined/>
                  列表
                </a-radio-button>
                <a-radio-button value="card">
                  <TableOutlined/>
                  卡片
                </a-radio-button>
              </a-radio-group>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-spin :spinning="loading">
        <div class="query-index-table" v-if="viewModel=='list'">
          <a-table :columns="filterColumns" :data-source="data" :scroll="{ x:'100%', y: 550 }"
                   :row-key="record=>record.tempId" :pagination="false"
                   bordered>
            <template #bodyCell="{ column,record }">
              <template v-if="column.dataIndex === 'oil'">
                <div style="height:25px">
                  <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="record.well_id"></ChartCell>
                </div>
              </template>
              <template v-if="column.dataIndex === 'gas'">
                <div style="height:25px">
                  <ChartCell :timeType="('month')" :dataType="('gas')" :wellId="record.well_id"></ChartCell>
                </div>
              </template>
              <template v-if="column.key === 'well_id'">
                <a-button type="link" size="small" @click="detail(record.well_id)">{{ record.well_id }}</a-button>
              </template>
              <template v-if="column.key === 'operation'">
                <a-button type="link" size="small" @click="showDoc(record.well_id)">相关文档</a-button>
              </template>
            </template>
          </a-table>
        </div>
        <div class="query-index-table" v-else>
          <a-row :gutter="[24,8]">
            <a-col :span="8" v-for="item in data">
              <a-card :title="'井名：'+item.well_common_name" bodyStyle="padding: 10px;">
                <template #extra>
                  <a-button type="link" @click="detail(item.well_id)">查看详情</a-button>
                  <a-button type="link" @click="showDoc(item.well_id)">相关文档</a-button>
                </template>
                <table class="well-card-table">
                  <tr>
                    <th>井型：</th>
                    <td>{{ item.well_type }}</td>
                    <th>状态：</th>
                    <td>{{ item.current_state_name }}</td>
                  </tr>
                  <tr>
                    <th>开钻日期：</th>
                    <td>{{ item.spud_date }}</td>
                    <th>含水率：</th>
                    <td><span style="padding:2px 10px;" :class="getTdColor( item.water_cut)">{{ item.water_cut }}</span>
                    </td>
                  </tr>
                  <tr>
                    <th>开始采油日期：</th>
                    <td>{{ item.oil_prod_begin_date }}</td>
                    <th>最近采油日期：</th>
                    <td>{{ item.oil_prod_recent_date }}</td>
                  </tr>
                  <tr>
                    <th>月产油量：</th>
                    <td>{{ item.oil_prod_mon }}t</td>
                    <td colspan="2" rowspan="2">
                      <div style="height:25px">
                        <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="item.well_id"></ChartCell>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>累产油量：</th>
                    <td>{{ item.oil_prod_year }}t</td>
                  </tr>
                  <tr>
                    <th>月产气量：</th>
                    <td>{{ item.gas_prod_mon }}m³</td>
                    <td colspan="2" rowspan="2">
                      <div style="height:25px">
                        <ChartCell :timeType="('month')" :dataType="('gas')" :wellId="item.well_id"></ChartCell>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>累产气量：</th>
                    <td>{{ item.gas_prod_year }}m³</td>
                  </tr>
                </table>
              </a-card>
            </a-col>
          </a-row>
        </div>
        <a-pagination :page-size-options="['5', '20', '30', '40', '50']" show-size-changer
                      v-model:current="pagination.current" :total="pagination.total"
                      style="float: right;margin-top: 10px;"
                      :pageSize="pagination.pageSize" :show-total="total => `共 ${total} 条`"
                      @change="(current)=>handleTableChange({ current: current,pageSize: pagination.pageSize })"
                      @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
      </a-spin>
      <div style="width:100%;height: 500px;margin-top:15px">
        <ChartMap></ChartMap>
      </div>
    </div>
    <a-modal v-model:visible="isShowDoc" title="相关文档" :footer="null" @onCancel="isShowDoc=false">
      <a-list item-layout="horizontal" :data-source="docList">
        <template #renderItem="{ item }">
          <a-list-item>
            <template #actions>
              <a style="color:#1890ff">下载</a>
            </template>
            <a-list-item-meta
              :description="item.file_business_type">
              <template #title>
                <a href="">{{ item.file_name }}</a>
              </template>
              <template #avatar>
                <img src="~@/assets/images/file.png"/>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-modal>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, reactive, computed, watch} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import {useRoute} from 'vue-router';
import {get} from "@/api/common";
import type {TableColumnsType} from "ant-design-vue";
import dayjs from "dayjs";
import {getPaginationTotalTitle} from "@/utils/common";
import type {TableProps} from "ant-design-vue";
import {useTabsViewStore} from "@/store/modules/tabsView";
import ChartCell from '@/components/basic/chart/chart-cell.vue'
import ChartMap from '@/components/basic/chart/chart-map.vue'

export default defineComponent({
  name: 'wellinfoindex',
  components: {ChartCell, ChartMap},
  setup() {
    const route = useRoute();
    const expand = ref(false);
    const formRef = ref<FormInstance>();
    const loading = ref(false);
    const showQuery = ref(false);
    const selectedRowKeys = ref([]);
    const activeTab = ref("1");
    const showTree = ref(true);
    const isShowDoc = ref(false);
    const showColumnType = ref(['oil','gas']);
    const data = ref([{children: [], label: '', value: ''}]);
    const viewModel = ref("list");
    const tabsViewStore = useTabsViewStore();
    const docList = ref([]);
    const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
    const replaceFields = {
      children: 'children',
      title: 'label',
      key: 'value',
    };
    const formState = reactive({
      page: 1,
      rows: 10,
      total: 0,
      ref_date: new Date(), //重置查询条件使用
      well_common_name: '',
      well_id: '',
      well_type: '',
      spud_date_begin: '',
      spud_date_end: '',
      completion_date_begin: '',
      completion_date_end: '',
      oil_prod_begin_date_begin: '',
      oil_prod_begin_date_end: '',
      oil_prod_recent_date_begin: '',
      oil_prod_recent_date_end: '',
      org_id_a1: '',
      project_id: ''
    });
    const resetFields = function () {
      let keys: string[] = Object.keys(formState);
      keys.forEach(key => {
        if (typeof (formState[key]) == "string") {
          formState[key] = '';
        }
      })
    }
    const oilHeader = () => {
      return {
        style: {'border-top': '2px solid red'},
      }
    }
    const gasHeader = () => {
      return {
        style: {'border-top': '2px solid #0c6be2'},
      }
    }
    const filterColumns = ref([]);

    const columns: TableColumnsType = [
      {
        title: '序号',
        width: 60,
        dataIndex: 'index',
        key: 'index',
        align: "center", fixed: 'left',
        customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
      },
      {title: '井号', dataIndex: 'well_id', key: 'well_id', width: 120, fixed: 'left'},
      {title: '井名', dataIndex: 'well_common_name', key: 'well_common_name', width: 120},
      {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}) =>
          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}) =>
          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}) =>
          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,
        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,
        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: 'water_cut', key: 'water_cut', width: 60, align: 'center', customCell: (record) => {
          return {class: getTdColor(record.water_cut)};
        }
      },
      {
        title: '最近月产油量(t)',
        dataIndex: 'oil_prod_mon',
        key: 'oil_prod_mon',
        width: 120,
        customHeaderCell: oilHeader
      },
      {
        title: '累产油量(t)',
        dataIndex: 'oil_prod_year',
        key: 'oil_prod_year',
        width: 120,
        customHeaderCell: oilHeader
      },
      {title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 100, customHeaderCell: oilHeader},
      {
        title: '最近月产气量(m³)',
        dataIndex: 'gas_prod_mon',
        key: 'gas_prod_mon',
        width: 130,
        customHeaderCell: gasHeader
      },
      {
        title: '累产气量(m³)',
        dataIndex: 'gas_prod_year',
        key: 'gas_prod_year',
        width: 120,
        customHeaderCell: gasHeader
      },
      {title: '累产气量趋势', dataIndex: 'gas', key: 'gas', width: 100, customHeaderCell: gasHeader},
      {title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
    ];
    filterColumns.value = columns as any;

    watch(
      () => showColumnType.value,
      () => {
        const filterValue = columns.filter((item: any) => {
          if (!showColumnType.value.includes("oil")) {
            if (["oil_prod_mon", "oil_prod_year", "oil"].includes(item.dataIndex)) {
              return false
            }
          }
          if (!showColumnType.value.includes("gas")) {
            if (["gas_prod_mon", "gas_prod_year", "gas"].includes(item.dataIndex)) {
              return false
            }
          }
          return true
        })
        filterColumns.value = filterValue as any;
      }
    );
    const getTdColor = (water_cut) => {
      if (water_cut == null || water_cut <= 2) {
        return "";
      } else if (water_cut > 2 && water_cut <= 40) {
        return "color_level2";
      } else if (water_cut > 40 && water_cut <= 8) {
        return "color_level3";
      } else {
        return "color_level4";
      }
    }
    const onSelectChange = (keys: any) => {
      selectedRowKeys.value = keys;
    };
    const pagination = computed(() => ({
      total: formState.total,
      current: formState.page,
      pageSize: formState.rows,
      showSizeChanger: true,
      showTotal: total => getPaginationTotalTitle(total)
    }));

    const loadData = async function () {
      loading.value = true;
      const result: any = await get('wellInfo/getList', formState);

      data.value = result.list;
      formState.total = result.total;
      loading.value = false;
    }
    const handleTableChange: TableProps['onChange'] = (
      pag: { pageSize: number; current: number },
    ) => {
      formState.page = pag.current;
      formState.rows = pag.pageSize;
      loadData();
    };
    const onRangeChange = (dateString, begin, end) => {
      formState[begin] = dateString ? dateString[0].format("YYYY-MM-DD") : '';
      formState[end] = dateString ? dateString[1].format("YYYY-MM-DD") : '';
    };
    const tabChange = (key) => {
      console.log("tabChange", key);
      if (key == "2") {
        formState.org_id_a1 = '';
        subjectTrees.value.data = Object.assign(subjectTrees.value.constructUnitTree);
      } else {
        formState.project_id = ''
        subjectTrees.value.data = Object.assign(subjectTrees.value.organizationTree);
      }
      getSubjectTree();
    }
    const detail = (well_id) => {
      tabsViewStore.addTabByPath('/wellinfo/detail', {id: well_id});
    }
    const onQuery = () => {
      loadData();
    }
    const subjectTrees = ref({
      data: [],
      organizationTree: [],
      constructUnitTree: [],
      expandedKeys: [''],
      selectedKeys: [''],
      autoExpandParent: true,
      searchStr: ''
    });
    const getSubjectData = async function () {
      get('wellInfo/getOrganizationTree', {tabName: subjectTrees.value.searchStr}).then(data => {
        subjectTrees.value.organizationTree = data;
        subjectTrees.value.data = Object.assign(data);
        getSubjectTree();
      });
      get('wellInfo/getConstructUnitTree', {tabName: subjectTrees.value.searchStr}).then(data => {
        subjectTrees.value.constructUnitTree = data;
      });
    }
    const getSubjectTree = async function () {
      //计算第一个展开节点
      subjectTrees.value.expandedKeys = [];
      if (subjectTrees.value.data && subjectTrees.value.data.length > 0) {
        subjectTrees.value.expandedKeys.push((subjectTrees.value.data[0] as any).value + "");
      }
      generateList(subjectTrees.value.data);
    }
    getSubjectData();

    const searchTree = () => {
      const expanded = dataList
        .map((item: any) => {
          if (item.label != null && item.label.indexOf(subjectTrees.value.searchStr) > -1) {
            return getParentKey(item.value as string, subjectTrees.value.data);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      subjectTrees.value.expandedKeys = expanded as string[];
      subjectTrees.value.autoExpandParent = true;
    }
    const dataList: any[] = [];
    const generateList = (data: any[]) => {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const label = node.label;
        dataList.push({value: node.value, label: label as string});
        if (node.children) {
          generateList(node.children);
        }
      }
    };

    const getParentKey = (key: string, tree: any[]): string | number | undefined => {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some(item => item.value === key)) {
            parentKey = node.value;
          } else if (getParentKey(key, node.children)) {
            parentKey = getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    };

    const treeOnExpand = function (keys: string[]) {
      subjectTrees.value.expandedKeys = keys;
      subjectTrees.value.autoExpandParent = false;
    }
    const treeOnSelect = function (selected, selectedNodes, node) {
      console.log(selected, selectedNodes, node);
      if (selectedNodes.node.parent != undefined) {
        if (activeTab.value == "1") {
          formState.org_id_a1 = selected.length > 0 ? selectedNodes.node.key : '';
        } else {
          formState.project_id = selected.length > 0 ? selectedNodes.node.key : '';
        }
        loadData();
      }
    }
    const showDoc = (id) => {
      get('wellInfo/getWellDocumentList', {wellId: id}).then(data => {
        docList.value = data;
        isShowDoc.value = true;
      })
    };
    const labelCol = {style: {width: '100px'}};

    return {
      route, selectedRowKeys, loading, activeTab, showTree, onSelectChange, data,
      expand, onQuery, loadData, onRangeChange, showQuery, wellTypeList, replaceFields,
      formRef, viewModel, handleTableChange, detail,
      formState, isShowDoc, showDoc, docList, resetFields, showColumnType, filterColumns,
      labelCol, getTdColor,
      tabChange,
      treeOnExpand,
      subjectTrees,
      getSubjectTree, searchTree,
      treeOnSelect, pagination
    };
  },
  created() {
    this.loadData();
  },
  activated() {
  }
});
</script>
<style lang="less">

.query-index {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  background-color: white;
}

.query-index-tree {
  min-width: 260px;
  max-width: 360px;
  border-right: 2px solid #f2f2f2;
  margin-right: 5px;
}

.query-index-close {
  width: 15px;
  padding-top: 10px;
  padding-left: 10px;
}

.query-index-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 80%;
}

.query-index-form {
  padding: 15px 10px 10px 15px;
}

.query-index-table {
  flex-grow: 1;
  display: flex;

  .ant-row {
    width: 100%;
  }
}

.query-index-tabs {
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  flex: 1;
}

.tabs-view-content {
  padding: 0px;
}

.query-index-tree-item {
  white-space: nowrap; /*强制span不换行*/
  display: inline-block; /*将span当做块级元素对待*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
}

.query-index-tree-search {
  padding: 5px;
  border-bottom: 2px solid #f2f2f2;
  display: flex;
  align-items: center;
}

.query-index-tree-box {
  padding: 5px;
  padding-top: 10px;
  overflow-y: scroll;
  max-height: 1000px;
}

.col-text {
  padding-right: 0px !important;
  text-align: right;
  font-weight: bold;
}

.col-content {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ant-card-body {
  padding: 10px;
}

.well-card-table {
  th {
    width: 25%;
    text-align: right;
  }

  td {
    width: 25%;
    text-align: left;
  }
}

.color_level1, .ant-table-tbody>tr>td.color_level1:hover {
}

.color_level2, .ant-table-tbody>tr>td.color_level2:hover {
  background-color: #EAF4FF !important;
}

.color_level3, .ant-table-tbody>tr>td.color_level3:hover {
  background-color: #D5EAFF !important;
}

.color_level4, .ant-table-tbody>tr>td.color_level4:hover {
  background-color: #B7DBFF !important;
}
</style>