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;colspan=6;"/>
      </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
          ref="treeRef"
          :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;colspan=8;"/>
    </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_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-tree-select
                  v-model:value="formState.well_type"
                  show-search
                  allow-clear
                  tree-line
                  :tree-data="wellTypeTree"
                  tree-node-filter-prop="label">
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="well_type" label="井别:">
                <a-tree-select
                  v-model:value="formState.well_purpose"
                  show-search
                  allow-clear
                  tree-line
                  :tree-data="wellPurposeTree"
                  tree-node-filter-prop="label">
                </a-tree-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="18">
              <a-form-item name="well_id" label="组织机构:">
                <a-tree-select
                  v-model:value="formState.orgList"
                  show-search
                  allow-clear
                  multiple
                  tree-line
                  :tree-data="filterOrgTree(subjectTrees.organizationTree)"
                  tree-node-filter-prop="label"
                  @change="onOrgTreeChange"
                >
                </a-tree-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" class="query-index-row" v-if="showQuery">
            <a-col :span="18">
              <a-form-item name="spud_date_begin" label="地质单元:">
                <a-tree-select
                  v-model:value="formState.unitList"
                  show-search
                  allow-clear
                  multiple
                  tree-line
                  :tree-data="filterUnitTree(subjectTrees.constructUnitTree)"
                  tree-node-filter-prop="label"  @change="onUnitTreeChange">
                </a-tree-select>
              </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 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 class="edit-operation">
            <a-col :span="24" style="text-align: right">
              <a-checkbox-group v-model:value="showColumnType" @change="onCheckboxChange">
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="oil">显示产油</a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="gas">显示产气</a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="water">显示产水</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" @resizeColumn="handleResizeColumn"
                   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.dataIndex === 'water'">
                <div style="height:25px">
                  <ChartCell :timeType="('month')" :dataType="('vol')" :wellId="record.well_id"></ChartCell>
                </div>
              </template>
              <template v-if="column.key === 'well_common_name'">
                <a-button type="link" size="small" @click="detail(record.well_id)">{{
                    record.well_common_name
                  }}
                </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="colspan" v-for="item in data">
              <a-card :title="'井名：'+item.well_common_name" class="ant-card-index" 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 v-if="showColumnType.includes('oil')">
                    <th>最近月产油量：</th>
                    <td>
                      {{ item.oil_prod_mon == null ? "" : (numberToCurrencyNo(item.oil_prod_mon) + "t") }}
                    </td>
                    <td colspan="2" rowspan="2">
                      <div style="height:25px">
                        <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="item.well_id"
                                   :lineColor="('#E63038')"></ChartCell>
                      </div>
                    </td>
                  </tr>
                  <tr v-if="showColumnType.includes('oil')">
                    <th>累产油量：</th>
                    <td>
                      {{ item.oil_prod_year == null ? "" : (numberToCurrencyNo(item.oil_prod_year) + "t") }}
                    </td>
                  </tr>
                  <tr v-if="showColumnType.includes('gas')">
                    <th>最近月产气量：</th>
                    <td>
                      {{ item.gas_prod_mon == null ? "" : (numberToCurrencyNo(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 v-if="showColumnType.includes('gas')">
                    <th>累产气量：</th>
                    <td>
                      {{ item.gas_prod_year == null ? "" : (numberToCurrencyNo(item.gas_prod_year) + "m³") }}
                    </td>
                  </tr>
                  <tr v-if="showColumnType.includes('water')">
                    <th>最近注水量：</th>
                    <td>
                      {{ item.water_prod_mon == null ? "" : (numberToCurrencyNo(item.water_prod_mon) + "t") }}
                    </td>
                    <td colspan="2" rowspan="2">
                      <div style="height:25px">
                        <ChartCell :timeType="('month')" :dataType="('vol')" :wellId="item.well_id"></ChartCell>
                      </div>
                    </td>
                  </tr>
                  <tr v-if="showColumnType.includes('water')">
                    <th>累注水量：</th>
                    <td>
                      {{ item.water_prod_year == null ? "" : (numberToCurrencyNo(item.water_prod_year) + "10kt") }}
                    </td>
                  </tr>
                </table>
              </a-card>
            </a-col>
          </a-row>
        </div>
        <a-pagination :page-size-options="pagination.pageSizeOptions" 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 :datas="data" :isSearch="(true)"></ChartMap>
      </div>
    </div>
    <a-modal v-model:visible="isShowDoc" title="相关文档" :footer="null" @onCancel="isShowDoc=false">
      <a-input-search
        v-model:value="fileOptions.docKey"
        placeholder="查找文档" allow-clear
      />
      <div class="files-type">
        <a-checkable-tag color="processing"
                         :checked="fileOptions.selectBusinessType.length==0||fileOptions.selectBusinessType.length==fileOptions.businessType.length"
                         @change="() => fileOptions.selectBusinessType=[]">全部
        </a-checkable-tag>
        <template v-for="tag in fileOptions.businessType">
          <a-checkable-tag color="processing"
                           :checked="fileOptions.selectBusinessType.includes(tag)"
                           @change="checked => onBusTypeChange(checked,tag)">{{ tag }}
          </a-checkable-tag>
        </template>
      </div>
      <div style="max-height:300px;overflow-y:scroll;margin-top:10px;">
        <a-list item-layout="horizontal" :data-source="docList">
          <template #renderItem="{ item }">
            <a-list-item v-if="(item.file_name.indexOf(fileOptions.docKey)>-1||fileOptions.docKey=='')
                  &&(fileOptions.selectBusinessType.length==0||fileOptions.selectBusinessType.includes(item.file_business_type))">
              <template #actions>
                <filePreview :fileName="item.file_name" :filePath="item.storage_path"></filePreview>
                <a-button type="link" @click="downFile(item)" functioncode="T010501" danger>下载</a-button>
              </template>
              <a-list-item-meta
                :description="item.file_business_type">
                <template #title>
                  {{ item.file_name }}
                </template>
                <template #avatar>
                  <img src="~@/assets/images/file.png"/>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, computed, watch, reactive} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import {useRoute} from 'vue-router';
import {get, postData} from "@/api/common";
import {getPaginationTotalTitle} from "@/utils/common";
import {message} from 'ant-design-vue';
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'
import {download} from "@/utils/downloadFile";
import {columns, filterColumns, formState, getTdColor} from './table'
import filePreview from '@/components/basic/file-preview/index.vue'
import {numberToCurrencyNo} from "@/utils/common";

export default defineComponent({
  name: 'wellinfoindex',
  components: {ChartCell, ChartMap, filePreview},
  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 colspan = ref(8);
    const showTree = ref(true);
    const isShowDoc = ref(false);
    const showColumnType = ref(['oil', 'gas', 'water']);
    const data = ref([{children: [], label: '', value: ''}]);
    const viewModel = ref("list");
    const tabsViewStore = useTabsViewStore();
    const docKey = ref('');
    const docList = ref<any>([]);
    const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
    const wellPurposeList = ref([{label: "探井", value: "探井"}, {label: "开发井", value: "开发井"}, {label: "水井", value: "水井"}]);
    const replaceFields = {
      children: 'children',
      title: 'label',
      key: 'value',
    };
    const fileOptions = reactive({
      docKey: '',
      businessType: [] as any[],
      selectBusinessType: [] as any[]
    })
    const wellPurposeTree = ref([]);
    get('wellInfo/getWellPurposeTree', {}).then(data => {
      wellPurposeTree.value = data;
    });

    const wellTypeTree = ref([]);
    get('wellInfo/getWellTypeTree', {}).then(data => {
      wellTypeTree.value = data;
    });

    function onBusTypeChange(checked, it) {
      if (checked) {
        fileOptions.selectBusinessType.push(it);
      } else {
        fileOptions.selectBusinessType.splice(fileOptions.selectBusinessType.indexOf(it), 1);
      }
      console.log(checked, it);
    }

    const downFile = (record: any) => {
      download(record.storage_path, record.file_name);
    };
    const resetFields = function () {
      let keys: string[] = Object.keys(formState);
      keys.forEach(key => {
        if (typeof (formState[key]) == "string") {
          formState[key] = '';
        } else if (typeof (formState[key]) == "object") {
          formState[key] = [];
        }
      })
    }

    filterColumns.value = [...columns];

    function showColumnTypeChange() {
      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
          }
        }
        if (!showColumnType.value.includes("water")) {
          if (["water_prod_mon", "water_prod_year", "water"].includes(item.dataIndex)) {
            return false
          }
        }
        return true
      })
      //拖拽后在显示隐藏列则需要按拖拽后的列排序
      const sortedArray = filterValue.sort((a, b) => {
        const indexA = filterColumns.value.findIndex(f => f.key == a.key);
        const indexB = filterColumns.value.findIndex(f => f.key == b.key);
        return (indexA == -1 || indexB == -1) ? 1 : indexA - indexB;
      });
      filterColumns.value = [...sortedArray];
      setSettingColumns();
    }

    function getSettingColumns() {
      let userColumnsJson = localStorage.getItem('userColumns');
      let userShowColumnsType = localStorage.getItem('userShowColumnsType');
      if (userColumnsJson != undefined) {
        let array = new Array();
        let userColumns = JSON.parse(userColumnsJson);
        userColumns.forEach(it => {
          array.push(columns.find(c => c.key == it.key));
        })
        filterColumns.value = array;
      }
      if (userShowColumnsType != undefined) {
        showColumnType.value = JSON.parse(userShowColumnsType);
      }
    }

    function setSettingColumns() {
      localStorage.setItem("userShowColumnsType", JSON.stringify(showColumnType.value));
      localStorage.setItem("userColumns", JSON.stringify(filterColumns.value));
    }

    const preCheckValues = ref(Object.assign(showColumnType.value));
    const onCheckboxChange = (checkValues: []) => {
      showColumnTypeChange();
      setTimeout(() => {
        let tbody = document.getElementsByClassName("ant-table-body")[0];
        if (tbody) {
          tbody.scrollLeft = preCheckValues.value.length > checkValues.length ? 0 : tbody.scrollWidth;
        }
        preCheckValues.value = checkValues;
      }, 300)
    }

    const onSelectChange = (keys: any) => {
      selectedRowKeys.value = keys;
    };
    const pagination = computed(() => ({
      total: formState.total,
      current: formState.page,
      pageSize: formState.rows,
      showSizeChanger: true,
      pageSizeOptions: viewModel.value == "list" ? ['10', '20', '30', '40', '50'] : ['12', '24', '36', '48', '60'],
      showTotal: total => getPaginationTotalTitle(total)
    }));

    watch(() => viewModel.value,
      () => {
        pagination.value.current = 1;
        formState.page = 1;
        if (viewModel.value == "list") {
          formState.rows = 10;
          pagination.value.pageSize = 10;
        } else {
          formState.rows = 12;
          pagination.value.pageSize = 12;
        }
        loadData();
      });

    const loadData = async function () {
      loading.value = true;
      const result: any = await postData('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);
      }
      loadData();
      getSubjectTree();
    }
    const detail = (well_id) => {
      tabsViewStore.addTabByPath('/wellinfo/detail', {id: well_id});
    }
    const onQuery = () => {
      loadData();
    }
    const treeRef = ref();
    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 = () => {
      if (subjectTrees.value.searchStr == "") {
        return;
      }
      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);

      if (expanded.length == 0) {
        message.warning('没有查询到相关目录');
      }
      subjectTrees.value.expandedKeys = expanded as string[];
      subjectTrees.value.autoExpandParent = true;
      // (treeRef.value as any).scrollTo({key:expanded[0]});
    }
    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 || activeTab.value == "1") {
        if (activeTab.value == "1") {
          formState.org_id_a1 = selected.length > 0 ? selectedNodes.node.key : '';
          formState.orgList = selected.length > 0 ? [formState.org_id_a1] : [];
        } else {
          formState.project_id = selected.length > 0 ? selectedNodes.node.key : '';
          formState.unitList = selected.length > 0 ? [formState.project_id] : [];
        }
        loadData();
      }
    }
    const orgUnitList: any =ref([]);
    const unitOrgList: any =ref([]);
    let filterTreeData: any[] = [];

    //组织机构和地质单元联动，选择组织机构只显示该组织机构的地质单元
    function filterOrgTree(treeData: any[]) {
      if(formState.unitList.length==0){
        return treeData;
      }
      filterTreeData = [];
      treeData.forEach(node => {
        if (unitOrgList.value.indexOf(node.value) > -1) {
          filterTreeData.push(node);
          return;
        }
        eachOrgTreeNode(node.children);
      })
      return filterTreeData;
    }

    function eachOrgTreeNode(treeData: any[]) {
      if (treeData == undefined) {
        return;
      }
      treeData.forEach(node => {
        if (unitOrgList.value.indexOf(node.value) > -1) {
          filterTreeData.push(node);
          return;
        }
        eachOrgTreeNode(node.children);
      })
    }

    function onOrgTreeChange() {
      postData('wellInfo/getOrgProjectList', {orgList: formState.orgList}).then((data: any[]) => {
        orgUnitList.value = data.map(x => x.project_id);
      })
    }
    function onUnitTreeChange() {
      postData('wellInfo/getOrgProjectList', {unitList: formState.unitList}).then((data: any[]) => {
        unitOrgList.value = data.map(x => x.org_id);
      })
    }
    function filterUnitTree(treeData: any[]) {
      if(formState.orgList.length==0){
        return treeData;
      }
      filterTreeData = [];
      treeData.forEach(node => {
        if (orgUnitList.value.indexOf(node.value) > -1) {
          filterTreeData.push(node);
          return;
        }
        eachUnitTreeNode(node.children);
      })
      return filterTreeData;
    }

    function eachUnitTreeNode(treeData: any[]) {
      if (treeData == undefined) {
        return;
      }
      treeData.forEach(node => {
        if (orgUnitList.value.indexOf(node.value) > -1) {
          filterTreeData.push(node);
          return;
        }
        eachUnitTreeNode(node.children);
      })
    }
    const showDoc = (id) => {
      get('wellInfo/getWellDocumentList', {wellId: id}).then(data => {
        docList.value = data;
        isShowDoc.value = true;
        fileOptions.businessType = docList.value.map(x => x.file_business_type);
        fileOptions.businessType = Array.from(new Set(fileOptions.businessType));
      })
    };
    const labelCol = {style: {width: '100px'}};

    return {
      route, selectedRowKeys, loading, activeTab, showTree, onSelectChange, data,
      expand, onQuery, loadData, onRangeChange, showQuery, wellTypeList, wellPurposeList, replaceFields,
      formRef, viewModel, handleTableChange, detail,
      formState, isShowDoc, showDoc, docKey, docList, resetFields, showColumnType, filterColumns, filterUnitTree,filterOrgTree,
      labelCol, getTdColor, downFile,
      tabChange, onCheckboxChange, treeRef, colspan,
      treeOnExpand,
      subjectTrees, fileOptions, onBusTypeChange, onOrgTreeChange,onUnitTreeChange,
      getSubjectTree, searchTree,
      treeOnSelect, pagination, getSettingColumns, wellPurposeTree, wellTypeTree, numberToCurrencyNo,
      handleResizeColumn: (w, col) => {
        col.width = w;
      }
    };
  },
  created() {
    this.getSettingColumns();
    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 {
  width: 100%;

  th {
    width: 25%;
    text-align: left;
    font-size: 12px;
  }

  td {
    width: 25%;
    text-align: left;
    font-size: 12px;
  }
}

.ant-card-index {

  .ant-card-head-title {
    font-weight: bold;
    color: #1f37dd;
  }

  .ant-card-head {
    padding: 0px 10px;
    height: 35px;
    background-color: #F9FCFF;
  }

  .ant-card-head-wrapper {
    height: 35px;
    margin-top: 5px;
  }
}

.ant-card-index:hover {
  box-shadow: 3px 2px 10px #999;
  opacity: 0.8;
}

.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;
}

.files-type {
  margin-top: 10px;

  span {
    color: #8e9ae1;
    border: 1px solid #c6ccf0;
    padding: 3px 5px;
    margin-bottom: 5px;
  }

  .ant-tag-checkable-checked, .ant-tag-checkable-checked:active {
    background-color: #8e9ae1;
    color: #ffffff;
  }
}
</style>