井筒全息快照

src/main/java/com/bowintek/practice/services/impl/WellInfoServiceImpl.java

@@ -18,6 +18,8 @@ import org.springframework.stereotype.Component;
 import java.util.HashMap;
 import java.util.List;
 
+import static com.bowintek.practice.util.Constant.FACT_CURRENT_STATE;
+
 @Component
 public class WellInfoServiceImpl implements WellInfoService {
 
@@ -33,6 +35,12 @@ public class WellInfoServiceImpl implements WellInfoService {
         List<HashMap<String,Object>> dataList = wellInfoCQuery.getWellInfoList(params);
 
         PageInfo< HashMap<String, Object>> result = new PageInfo(dataList);
+
+        result.getList().forEach(it->{
+            if(FACT_CURRENT_STATE.keySet().contains(it.get("current_state"))){
+                it.put("current_state_name",FACT_CURRENT_STATE.get(it.get("current_state")));
+            }
+        });
         return result;
     }
 }

src/main/java/com/bowintek/practice/util/Constant.java

@@ -1,6 +1,20 @@
 package com.bowintek.practice.util;
 
+import java.util.HashMap;
+
 public class Constant {
     public static final String YES = "是";
     public static final String No = "否";
+
+    /**
+     * 井生产状态
+     */
+    public static final HashMap<String,String>  FACT_CURRENT_STATE=new HashMap<>(){
+        {
+            this.put("00","停用不启用流程");
+            this.put("01","停用但启用流程");
+            this.put("02","启用但不启用流");
+            this.put("11","启用并启用流程");
+        }
+    };
 }

src/main/resources/application.yml

@@ -105,7 +105,6 @@ mybatis:
   configuration:
     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
 pagehelper:
-  helperDialect: mysql
   reasonable: true
   supportMethodsArguments: true
   params: count=countSql

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

@@ -3,13 +3,54 @@
 <mapper namespace="com.bowintek.practice.mapper.cquery.WellInfoCQuery">
 
     <select id="getWellInfoList" parameterType="com.bowintek.practice.vo.query.WellInfoParams"  resultType="java.util.HashMap">
-        select well.*,fact.oil_prod_begin_date,fact.oil_prod_recent_date,fact.current_state,fact.water_cut
+        select well.*,fact_daily.oil_prod_begin_date,fact_daily.oil_prod_recent_date,fact_daily.current_state,fact_daily.water_cut,
+               fact_mon.oil_prod_mon,fact_mon.gas_prod_mon,fact_mon.gas_prod_year,fact_mon.oil_prod_year
         from well_basic_information well
-                 inner join (
+                 left join (
             select daily.* from FACT_DWR_PC_PRO_WELL_VOL_DAILY daily
                                     inner join(
                 select  well_id, max(prod_time) prod_time from FACT_DWR_PC_PRO_WELL_VOL_DAILY group by well_id
-            ) maxdaly on daily.well_id=maxdaly.well_id and daily.prod_time=maxdaly.prod_time
-        )fact on well.well_id= fact.well_id
+            ) maxdaily on daily.well_id=maxdaily.well_id and daily.prod_time=maxdaily.prod_time
+        )fact_daily on well.well_id= fact_daily.well_id
+                 left join (
+            select mon.* from fact_dwr_pc_pro_well_vol_monthly mon
+                                  inner join(
+                select  well_id, max(prod_time) prod_time from fact_dwr_pc_pro_well_vol_monthly group by well_id
+            ) maxmon on mon.well_id=maxmon.well_id and mon.prod_time=maxmon.prod_time
+        )fact_mon on well.well_id= fact_mon.well_id
+        where 1=1
+        <if test="well_common_name!='' and well_common_name!=null">
+            and well.well_common_name like Concat('%',#{well_common_name},'%')
+        </if>
+        <if test="well_id!='' and well_id!=null">
+            and well.well_id like Concat('%',#{well_id},'%')
+        </if>
+        <if test="well_type!='' and well_type!=null">
+            and well.well_type like Concat('%',#{well_type},'%')
+        </if>
+        <if test="spud_date_begin!='' and spud_date_begin!=null">
+            and well.spud_date <![CDATA[ >= ]]> CAST(#{spud_date_begin} AS DATE)
+        </if>
+        <if test="spud_date_end!='' and spud_date_end!=null">
+            and well.spud_date  <![CDATA[ < ]]> (CAST(#{spud_date_end} AS DATE) + INTERVAL '1 day')
+        </if>
+        <if test="completion_date_begin!='' and completion_date_begin!=null">
+            and well.completion_date <![CDATA[ >= ]]> CAST(#{completion_date_begin} AS DATE)
+        </if>
+        <if test="completion_date_end!='' and completion_date_end!=null">
+            and well.completion_date  <![CDATA[ < ]]> (CAST(#{completion_date_end} AS DATE) + INTERVAL '1 day')
+        </if>
+        <if test="oil_prod_begin_date_begin!='' and oil_prod_begin_date_begin!=null">
+            and fact_daily.oil_prod_begin_date <![CDATA[ >= ]]> CAST(#{oil_prod_begin_date_begin} AS DATE)
+        </if>
+        <if test="oil_prod_begin_date_end!='' and oil_prod_begin_date_end!=null">
+            and fact_daily.oil_prod_begin_date  <![CDATA[ < ]]> (CAST(#{oil_prod_begin_date_end} AS DATE) + INTERVAL '1 day')
+        </if>
+        <if test="oil_prod_recent_date_begin!='' and oil_prod_recent_date_begin!=null">
+            and fact_daily.oil_prod_recent_date <![CDATA[ >= ]]> CAST(#{oil_prod_recent_date_begin} AS DATE)
+        </if>
+        <if test="oil_prod_recent_date_end!='' and oil_prod_recent_date_end!=null">
+            and fact_daily.oil_prod_recent_date  <![CDATA[ < ]]> (CAST(#{oil_prod_recent_date_end} AS DATE) + INTERVAL '1 day')
+        </if>
     </select>
 </mapper>

target/classes/application.yml

@@ -105,7 +105,6 @@ mybatis:
   configuration:
     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
 pagehelper:
-  helperDialect: mysql
   reasonable: true
   supportMethodsArguments: true
   params: count=countSql

vue/src/router/asyncModules/sale.ts

@@ -8,4 +8,5 @@ export default {
   'views/subjectedit': () => import( '@/views/subject/edit.vue'),
   'views/subjectdetail': () => import( '@/views/subject/detail.vue'),
   'views/wellinfo': () => import( '@/views/wellinfo/index.vue'),
+  'views/wellinfoDetail': () => import( '@/views/wellinfo/detail.vue'),
 }

vue/src/views/query/table.vue

@@ -109,6 +109,7 @@
     <div class="search-result-list" v-else="viewModel=='list'">
       <a-table :columns="columns" :data-source="data" :scroll="{ x:'100%', y: 500 }"
                :loading="loading"
+               :pagination="false"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                :row-key="record=>record.tempId"
                bordered>

vue/src/views/wellinfo/detail.vue

@@ -0,0 +1,194 @@
+<template>
+  <a-card title="井史简介" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardSummary.expand" @click="cardSettings.cardSummary.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardSummary.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardSummary.expand">
+      井名宁13-23构造位置XXXXXXXX，于2015年02月03日开钻，2015年08月22日完钻，采取先期裸眼完并方式完井。
+
+      投产于2015年09月09日，生产层位XXX层位 2023年10月27日进行最近一次流压测试，油层中部压力33.4MPa，中部温度166.85°C，2023年11月07日，油嘴6.5mm，油压14.66MPa，套压0.4MPa，日产液量38.2t/d，日产油量22.58t/d，含水40.88%，动液面788m，截止目前累产油290594.34吨。
+    </div>
+  </a-card>
+  <a-card title="生产动态" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardChat.expand" @click="cardSettings.cardChat.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardChat.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardChat.expand">
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="基本信息" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardBaseInfo.expand" @click="cardSettings.cardBaseInfo.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardBaseInfo.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardBaseInfo.expand">
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="业务解释" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardExplain.expand" @click="cardSettings.cardExplain.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardExplain.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardExplain.expand">
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="相关文档" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardFile.expand" @click="cardSettings.cardFile.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardFile.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardFile.expand">
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="测试历史" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardTest.expand" @click="cardSettings.cardTest.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardTest.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardTest.expand">
+      本井共实施5次系统试井，4次压恢压降试井，5次工程测井， 11次静压测试， 107次流压测试， 2023年10月27日进行最近一次流压测试，油层中部压力33.47MPa，中部温度132.32 ℃
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="分析化验" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardAnalysis.expand" @click="cardSettings.cardAnalysis.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardAnalysis.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardAnalysis.expand">
+      本井共实监原油全分析共90组，原油族组份分析12组，天然气全分析47组，B2S含量分析19组，油田水分析2组，PVT分析3组:
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="作业简史（业务过程）" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardWork.expand" @click="cardSettings.cardWork.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardWork.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardWork.expand">
+      哈23-12井井实施井下作业施工1次，其中油管测试1次；2015年08月23日油管测试，油管测试井段7458m-7613.05m
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+  <a-card title="GIS地图" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+    <template #extra>
+      <UpSquareOutlined v-if="cardSettings.cardGIS.expand" @click="cardSettings.cardGIS.expand=false"
+                        :style="cardSettings.buttonStyle"/>
+      <DownSquareOutlined v-else @click="cardSettings.cardGIS.expand=true"
+                          :style="cardSettings.buttonStyle"/>
+    </template>
+    <div v-if="cardSettings.cardGIS.expand">
+      哈23-12井井实施井下作业施工1次，其中油管测试1次；2015年08月23日油管测试，油管测试井段7458m-7613.05m
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
+    </div>
+  </a-card>
+</template>
+<script lang="ts">
+import {ref, defineComponent} from 'vue';
+import {get} from "@/api/common";
+import {useTabsViewStore} from "@/store/modules/tabsView";
+import dayjs from "dayjs";
+import type {Subject} from "@/views/subject/model";
+import {useRoute} from "vue-router";
+import router from "@/router";
+
+export default defineComponent({
+  name: 'wellinfoDetail',
+  components: {},
+  setup() {
+    const tabsViewStore = useTabsViewStore();
+    const route = useRoute();
+    const cardSettings =ref( {
+      cardHeadStyle: {fontWeight: 'bold'},
+      buttonStyle:{fontSize: '26px', cursor:'pointer'},
+      cardSummary: {expand: true},
+      cardChat: {expand: true},
+      cardBaseInfo: {expand: true},
+      cardExplain: {expand: true},
+      cardFile: {expand: true},
+      cardTest: {expand: true},
+      cardAnalysis: {expand: true},
+      cardWork: {expand: true},
+      cardGIS: {expand: true}
+    })
+    const dataModel = ref<Subject>({
+      subjectName: "",
+      tabCode: "",
+      tabName: "",
+      isReferences: 0,
+      tabDesc: "",
+      execSql: "",
+      tagList: []
+    });
+
+    const loadData = async (id) => {
+      if (id == undefined) {
+        return;
+      }
+      get('subject/getSubject',
+        {subjectId: id}).then(data => {
+        dataModel.value = data;
+      })
+    }
+    const onClose = () => {
+      tabsViewStore.closeCurrentTab(route);
+      router.back();
+    };
+
+    return {
+      loadData, cardSettings,
+      onClose,
+      dataModel,
+      dayjs
+    };
+  },
+  created() {
+    const id = history.state.params?.id;
+    this.loadData(id);
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.card-detail{
+  width: 100%;margin-top:10px;
+}
+</style>

vue/src/views/wellinfo/index.vue

@@ -95,21 +95,37 @@
           </a-row>
           <a-row :gutter="24" class="query-index-row" v-if="showQuery">
             <a-col :span="6">
-              <a-form-item name="tempName" label="开钻日期:">
+              <a-form-item name="tempName" label="最近采油日期:">
                 <a-range-picker 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-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">
+        <div class="query-index-table" v-if="viewModel=='list'">
           <a-table :columns="columns" :data-source="data" :scroll="{ x:'100%', y: 500 }"
-                   :loading="loading"
-                   :row-key="record=>record.tempId"
+                   :row-key="record=>record.tempId" :pagination="false"
                    bordered>
             <template #bodyCell="{ column,record }">
+              <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-popover trigger="hover" placement="left">
                   <template #content>
@@ -122,12 +138,69 @@
                       <a-button type="link" size="small">删除</a-button>
                     </a-popconfirm>
                   </template>
-                  <a-button type="link" size="small">更多</a-button>
+                  <a-button type="link" size="small">相关文档</a-button>
                 </a-popover>
               </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">查看详情</a-button>
+                  |
+                  <a-button type="link">相关文档</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 :class="getTdColor( item.water_cut)">{{ item.water_cut }}</td>
+                  </tr>
+                  <tr>
+                    <th>开始采油日期：</th>
+                    <td>{{ item.oil_prod_begin_date }}</td>
+                    <th>最近采油日期：</th>
+                    <td>{{ item.oil_prod_recent_date }}</td>
+                  </tr>
+                  <tr>
+                    <th>月产油量(t)：</th>
+                    <td>{{ item.oil_prod_mon }}</td>
+                    <td colspan="2" rowspan="2"></td>
+                  </tr>
+                  <tr>
+                    <th>累产油量(t)：</th>
+                    <td>{{ item.oil_prod_year }}</td>
+                  </tr>
+                  <tr>
+                    <th>月产气量(m³)：</th>
+                    <td>{{ item.gas_prod_mon }}</td>
+                    <td colspan="2" rowspan="2"></td>
+                  </tr>
+                  <tr>
+                    <th>累产气量(m³)：</th>
+                    <td>{{ item.gas_prod_year }}</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>
   </div>
@@ -141,9 +214,11 @@ 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";
 
 export default defineComponent({
-  name: 'queryindex',
+  name: 'wellinfoindex',
   components: {},
   setup() {
     const route = useRoute();
@@ -155,6 +230,8 @@ export default defineComponent({
     const activeTab = ref("1");
     const showTree = ref(true);
     const data = ref([]);
+    const viewModel = ref("list");
+    const tabsViewStore = useTabsViewStore();
     const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
     const replaceFields = {
       children: 'children',
@@ -200,7 +277,7 @@ export default defineComponent({
       },
       {
         title: '完井日期', dataIndex: 'completion_date', key: 'completion_date', width: 120, customRender: ({record}) =>
-          record.end_drilling_date == null ? "" : (dayjs(record.end_drilling_date).format('YYYY-MM-DD'))
+          record.end_drilling_date == null ? "" : (dayjs(record.completion_date).format('YYYY-MM-DD'))
       },
       {
         title: '开始采油日期',
@@ -216,17 +293,32 @@ export default defineComponent({
         customRender: ({record}) =>
           record.oil_prod_recent_date == null ? "" : (dayjs(record.oil_prod_recent_date).format('YYYY-MM-DD'))
       },
-      {title: '状态', dataIndex: 'current_state', key: 'current_state', width: 120},
+      {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: 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},
-      {title: '累产油量(t)', dataIndex: 'oil_prod_ year', key: 'oil_prod_ year', width: 120},
+      {title: '累产油量(t)', dataIndex: 'oil_prod_year', key: 'oil_prod_year', width: 120},
       {title: '累产油量趋势', dataIndex: 'tempNo', key: 'tempNo', width: 150},
-      {title: '月产气量(m³)', dataIndex: 'gas_prod_ year', key: 'gas_prod_ year', width: 120},
-      {title: '累产气量(m³)', dataIndex: 'gas_prod_mon', key: 'gas_prod_mon', width: 120},
+      {title: '月产气量(m³)', dataIndex: 'gas_prod_mon', key: 'gas_prod_mon', width: 120},
+      {title: '累产气量(m³)', dataIndex: 'gas_prod_year', key: 'gas_prod_year', width: 120},
       {title: '累产油量趋势', dataIndex: 'tempNo', key: 'tempNo', width: 150},
-      {title: '操作列', dataIndex: 'operation', key: 'operation', width: 120}
+      {title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
     ];
+    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;
     };
@@ -246,6 +338,13 @@ export default defineComponent({
       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") : '';
@@ -256,6 +355,9 @@ export default defineComponent({
 
       }
     }
+    const detail = (well_id) => {
+      tabsViewStore.addTabByPath('/wellinfo/detail', {id: well_id});
+    }
     const onQuery = () => {
       loadData();
     }
@@ -263,7 +365,7 @@ export default defineComponent({
       data: [],
       expandedKeys: [''],
       selectedKeys: [''],
-      autoExpandParent:true,
+      autoExpandParent: true,
       searchStr: ''
     });
     const getSubjectTree = async function () {
@@ -332,9 +434,9 @@ export default defineComponent({
     return {
       route, selectedRowKeys, columns, loading, activeTab, showTree, onSelectChange, data,
       expand, onQuery, loadData, onRangeChange, showQuery, wellTypeList, replaceFields,
-      formRef,
+      formRef, viewModel, handleTableChange, detail,
       formState,
-      labelCol,
+      labelCol, getTdColor,
       tabChange,
       treeOnExpand,
       subjectTrees,
@@ -349,16 +451,7 @@ export default defineComponent({
   }
 });
 </script>
-
-<style lang="less" scoped>
-.ant-form-item {
-  margin: 0 0 10px !important;
-}
-
-.ant-form-item-label label {
-  width: 100% !important;
-  background-color: #2dd36f;
-}
+<style lang="less">
 
 .query-index {
   display: flex;
@@ -427,8 +520,48 @@ export default defineComponent({
   max-height: 600px;
 }
 
-.query-index-row {
+.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, .color_level1:hover {
+}
+
+.color_level2, .color_level2:hover {
+  background-color: #EAF4FF !important;
+}
+
+.color_level3, .color_level3:hover {
+  background-color: #D5EAFF;
+}
 
+.color_level4, .color_level4:hover {
+  background-color: #B7DBFF;
 }
 </style>