单井信息详情-右侧锚点

vue/src/plugins/antd.ts

@@ -20,7 +20,7 @@ import {
   Space, Cascader,
   Tree,
   Transfer,Image,Progress,List,Avatar,Badge,Spin,Pagination,Popover,Tag,Timeline,Dropdown,
-  AutoComplete,TreeSelect,Layout
+  AutoComplete,TreeSelect,Layout,Anchor
 } from 'ant-design-vue';
 import type { App } from 'vue';
 //导入组件库
@@ -73,5 +73,6 @@ export function setupAntd(app: App<Element>) {
     .use(AutoComplete)
     .use(TreeSelect)
     .use(Tree).use(Progress).use(List).use(Avatar).use(Badge).use(Spin).use(Pagination).use(Popover).use(Tag).use(Dropdown)
+    .use(Anchor)
     .use(Timeline);
 }

vue/src/views/wellinfo/detail.vue

@@ -1,337 +1,338 @@
 <template>
-
-  <div>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%" @click="cardSettings.cardSummary.expand=!cardSettings.cardSummary.expand">
-          井史简介
-        </div>
-      </template>
-      <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" class="info-body">
-        <p>井名<span>{{ dataModel.well_common_name }}</span>构造位置<span>{{
-            dataModel.structure_pos
-          }}</span>
-          <template v-if="dataModel.spud_date_fmt">
-            ，于<span>{{ dataModel.spud_date_fmt }}</span>开钻
-          </template>
-          <template v-if="dataModel.end_drilling_date_fmt">
-            ，<span>{{ dataModel.end_drilling_date_fmt }}</span>完钻
+  <div id="wellInfoDetail">
+    <a-layout>
+      <a-layout-content>
+        <a-card id="jsjj" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%" @click="cardSettings.cardSummary.expand=!cardSettings.cardSummary.expand">
+              井史简介
+            </div>
           </template>
-          <template v-if="dataModel.completion_method">
-            ，采取<span>{{ dataModel.completion_method }}</span>方式完井。
+          <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>
-        </p>
+          <div v-if="cardSettings.cardSummary.expand" class="info-body">
+            <p>井名<span>{{ dataModel.well_common_name }}</span>构造位置<span>{{
+                dataModel.structure_pos
+              }}</span>
+              <template v-if="dataModel.spud_date_fmt">
+                ，于<span>{{ dataModel.spud_date_fmt }}</span>开钻
+              </template>
+              <template v-if="dataModel.end_drilling_date_fmt">
+                ，<span>{{ dataModel.end_drilling_date_fmt }}</span>完钻
+              </template>
+              <template v-if="dataModel.completion_method">
+                ，采取<span>{{ dataModel.completion_method }}</span>方式完井。
+              </template>
+            </p>
 
-        <p>
-          <template v-if="dataModel.prod_horizon">
-            投产于<span>{{ dataModel.start_prod_date }}，</span>
-          </template>
-          <template v-if="dataModel.prod_horizon">
-            生产层位<span>{{ dataModel.prod_horizon }}</span>层位。
+            <p>
+              <template v-if="dataModel.prod_horizon">
+                投产于<span>{{ dataModel.start_prod_date }}，</span>
+              </template>
+              <template v-if="dataModel.prod_horizon">
+                生产层位<span>{{ dataModel.prod_horizon }}</span>层位。
+              </template>
+              <template v-if="dataModel.recent_testing_date">
+                <span>{{ dataModel.recent_testing_date }}</span>
+              </template>
+              <template v-if="dataModel.recent_testing_name">
+                进行最近一次<span>{{ dataModel.recent_testing_name }}</span>测试。
+              </template>
+              <template v-if="dataModel.recent_prod_date">
+                最近一次产油时间<span>{{ dataModel.recent_prod_date }}</span>，
+              </template>
+              油嘴<span>{{ dataModel.oil_nozzle ?? '--' }}</span>mm
+              ，油压<span>{{ dataModel.tubing_pres ?? '--' }}</span>MPa
+              ，套压<span>{{ dataModel.casing_pres ?? '--' }}</span>MPa
+              ，日产液量<span>{{ dataModel.fluid_prod_daily ?? '--' }}</span>t/d
+              ，日产油量<span>{{ dataModel.oil_prod_daily ?? '--' }}</span>t/d
+              ，含水<span>{{ dataModel.water_cut ?? '--' }}</span>%
+              ，动液面<span>{{ dataModel.start_pump_liq_level ?? '--' }}</span>m
+              ，截止目前累产油<span>{{ dataModel.oil_prod_cum ?? '--' }}</span>吨。
+            </p>
+          </div>
+        </a-card>
+        <a-card id="scdt" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%" @click="cardSettings.cardChat.expand=!cardSettings.cardChat.expand">生产动态
+            </div>
           </template>
-          <template v-if="dataModel.recent_testing_date">
-            <span>{{ dataModel.recent_testing_date }}</span>
+          <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>
-          <template v-if="dataModel.recent_testing_name">
-            进行最近一次<span>{{ dataModel.recent_testing_name }}</span>测试。
+          <div v-if="cardSettings.cardChat.expand">
+            <ChartProdDynmics :wellId="dataModel.well_id"></ChartProdDynmics>
+          </div>
+        </a-card>
+        <a-card id="jbxx" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%"
+                 @click="cardSettings.cardBaseInfo.expand=!cardSettings.cardBaseInfo.expand">基本信息
+            </div>
           </template>
-          <template v-if="dataModel.recent_prod_date">
-            最近一次产油时间<span>{{ dataModel.recent_prod_date }}</span>，
+          <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>
-          油嘴<span>{{ dataModel.oil_nozzle ?? '--' }}</span>mm
-          ，油压<span>{{ dataModel.tubing_pres ?? '--' }}</span>MPa
-          ，套压<span>{{ dataModel.casing_pres ?? '--' }}</span>MPa
-          ，日产液量<span>{{ dataModel.fluid_prod_daily ?? '--' }}</span>t/d
-          ，日产油量<span>{{ dataModel.oil_prod_daily ?? '--' }}</span>t/d
-          ，含水<span>{{ dataModel.water_cut ?? '--' }}</span>%
-          ，动液面<span>{{ dataModel.start_pump_liq_level ?? '--' }}</span>m
-          ，截止目前累产油<span>{{ dataModel.oil_prod_cum ?? '--' }}</span>吨。
-        </p>
-      </div>
-    </a-card>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%" @click="cardSettings.cardChat.expand=!cardSettings.cardChat.expand">生产动态
-        </div>
-      </template>
-      <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">
-        <ChartProdDynmics :wellId="dataModel.well_id"></ChartProdDynmics>
-      </div>
-    </a-card>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%"
-             @click="cardSettings.cardBaseInfo.expand=!cardSettings.cardBaseInfo.expand">基本信息
-        </div>
-      </template>
-      <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" style="display: flex">
-        <div style="width:70%">
-          <a-divider type="vertical" class="info-title" style="margin-top: 0px" dashed>井身结构</a-divider>
-          <a-descriptions bordered>
-            <a-descriptions-item label="井名：" :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}">
-              {{ dataModel.well_common_name }}
-            </a-descriptions-item>
-            <a-descriptions-item label="井别：">{{ dataModel.well_purpose }}</a-descriptions-item>
-            <a-descriptions-item label="井型：">{{ dataModel.well_type }}</a-descriptions-item>
-            <a-descriptions-item label="开钻日期：">{{ dataModel.spud_date_fmt }}</a-descriptions-item>
-            <a-descriptions-item label="完钻日期：">{{ dataModel.end_drilling_date_fmt }}</a-descriptions-item>
-            <a-descriptions-item label="设计井深：">{{
-                dataModel.budgeted_md == null ? "" : (dataModel.budgeted_md + "m")
-              }}
-            </a-descriptions-item>
-            <a-descriptions-item label="完钻层位：">{{ dataModel.completion_formation }}</a-descriptions-item>
-            <a-descriptions-item label="完井方式：">{{ dataModel.completion_method }}</a-descriptions-item>
-            <a-descriptions-item label="生产井段：">{{ dataModel.well_production_sections }}</a-descriptions-item>
-            <a-descriptions-item label="T₇⁴顶深：">{{
-                dataModel.t74_top_depth == null ? "" : (dataModel.t74_top_depth + "m")
-              }}
-            </a-descriptions-item>
-            <a-descriptions-item label="造斜点：">{{
-                dataModel.ko_azimuth == null ? "" : (dataModel.ko_azimuth + "m")
-              }}
-            </a-descriptions-item>
-            <a-descriptions-item label="水平位移：">
-              {{ dataModel.ko_horizontal_dislocation == null ? "" : (dataModel.ko_horizontal_dislocation + "m") }}
-            </a-descriptions-item>
-            <a-descriptions-item label="方位角：">{{
-                dataModel.azimuth_angle == null ? "" : (dataModel.azimuth_angle + "°")
-              }}
-            </a-descriptions-item>
-            <a-descriptions-item label="井位坐标经度：">{{ dataModel.well_coordinates_x }}</a-descriptions-item>
-            <a-descriptions-item label="井位坐标纬度：">{{ dataModel.well_coordinates_y }}</a-descriptions-item>
-          </a-descriptions>
-          <a-divider type="vertical" class="info-title" dashed>井A1信息</a-divider>
-          <a-descriptions bordered>
-            <a-descriptions-item :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}" label="采油厂机构：">
-              {{ dataModel.org_name_a1 }}
-            </a-descriptions-item>
-            <a-descriptions-item label="单位名称：">{{ dataModel.org_name_a2 }}</a-descriptions-item>
-            <a-descriptions-item label="标准井名：">{{ dataModel.well_legal_name }}</a-descriptions-item>
-            <a-descriptions-item label="地理位置描述：" :span="3">{{ dataModel.geo_description }}</a-descriptions-item>
-            <a-descriptions-item label="构造位置描述：" :span="3">{{ dataModel.structure_pos }}</a-descriptions-item>
-            <a-descriptions-item label="创建/更新日期：">
-              {{ dataModel.update_date_fmt == null ? dataModel.create_date_fmt : dataModel.update_date_fmt }}
-            </a-descriptions-item>
-            <a-descriptions-item label="井筒生命阶段：">{{ dataModel.phase }}</a-descriptions-item>
-            <a-descriptions-item label="通用井筒名：">{{ dataModel.wellbore_common_name }}</a-descriptions-item>
-            <a-descriptions-item label="目的层：">{{ dataModel.target_formation }}</a-descriptions-item>
-            <a-descriptions-item label="审定测量深度：">
-              {{ dataModel.authorized_md }}
-              <template v-if="dataModel.authorized_md">m</template>
-            </a-descriptions-item>
-            <a-descriptions-item label="审定真垂直深度：">{{ dataModel.authorized_tvd }}
-              <template v-if="dataModel.authorized_tvd">m</template>
-            </a-descriptions-item>
-
-            <a-descriptions-item label="井底测量深度：">{{ dataModel.bh_md }}
-              <template v-if="dataModel.bh_md">m</template>
-            </a-descriptions-item>
-            <a-descriptions-item label="井底位置描述信息：" :span="2">{{
-                dataModel.geo_description_bh
-              }}
-            </a-descriptions-item>
-            <a-descriptions-item label="井底真垂直深度：">{{ dataModel.bh_tvd }}
-              <template v-if="dataModel.bh_tvd">m</template>
-            </a-descriptions-item>
-            <a-descriptions-item label="相对于参考面的造斜点深度：">{{ dataModel.ko_md }}
-              <template v-if="dataModel.ko_md">m</template>
-            </a-descriptions-item>
-            <a-descriptions-item label="实际造斜点真垂直深度：">{{ dataModel.ko_tvd }}
-              <template v-if="dataModel.ko_tvd">m</template>
-            </a-descriptions-item>
-            <a-descriptions-item label="地质单元：">{{ dataModel.project_name }}</a-descriptions-item>
-            <a-descriptions-item label="单元类型：">{{ dataModel.project_type }}</a-descriptions-item>
-            <a-descriptions-item label="单元等级：">{{ dataModel.project_level }}</a-descriptions-item>
-            <a-descriptions-item label="备注：" :span="3">{{ dataModel.remarks }}</a-descriptions-item>
-          </a-descriptions>
-          <a-divider type="vertical" class="info-title" dashed>井盆地凹陷信息</a-divider>
-          <a-descriptions bordered>
-            <a-descriptions-item :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}" label="标准盆地：">
-              {{ dataModel.bz_basin }}
-            </a-descriptions-item>
-            <a-descriptions-item label="标准地陷：">{{ dataModel.bz_depression }}</a-descriptions-item>
-            <a-descriptions-item label="标准凹陷：">{{ dataModel.bz_depressed }}</a-descriptions-item>
-            <a-descriptions-item label="标准构造带：">{{ dataModel.bz_structural_belt }}</a-descriptions-item>
-            <a-descriptions-item label="标准区块：">{{ dataModel.bz_qkdy }}</a-descriptions-item>
-            <a-descriptions-item label="标准组织机构：">{{ dataModel.bz_org_name }}</a-descriptions-item>
-            <a-descriptions-item label="标准作业区名：">{{ dataModel.bz_dwmc }}</a-descriptions-item>
-          </a-descriptions>
-        </div>
-        <div style="flex:1;">
-          <a-divider type="vertical" class="info-title" style="margin-top: 0px" dashed>井身结构图片</a-divider>
-          <ChartImage ref="chartImageRef" style="margin-left: 10px"></ChartImage>
-
-          <a-divider type="vertical" class="info-title" dashed>相关文档</a-divider>
-          <div style="margin-left:10px;border:1px solid #f0f0f0;padding:5px;">
-            <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 v-if="cardSettings.cardBaseInfo.expand" style="display: flex">
+            <div style="width:70%">
+              <a-divider type="vertical" class="info-title" style="margin-top: 0px" dashed>井身结构</a-divider>
+              <a-descriptions bordered>
+                <a-descriptions-item label="井名：" :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}">
+                  {{ dataModel.well_common_name }}
+                </a-descriptions-item>
+                <a-descriptions-item label="井别：">{{ dataModel.well_purpose }}</a-descriptions-item>
+                <a-descriptions-item label="井型：">{{ dataModel.well_type }}</a-descriptions-item>
+                <a-descriptions-item label="开钻日期：">{{ dataModel.spud_date_fmt }}</a-descriptions-item>
+                <a-descriptions-item label="完钻日期：">{{ dataModel.end_drilling_date_fmt }}</a-descriptions-item>
+                <a-descriptions-item label="设计井深：">{{
+                    dataModel.budgeted_md == null ? "" : (dataModel.budgeted_md + "m")
+                  }}
+                </a-descriptions-item>
+                <a-descriptions-item label="完钻层位：">{{ dataModel.completion_formation }}</a-descriptions-item>
+                <a-descriptions-item label="完井方式：">{{ dataModel.completion_method }}</a-descriptions-item>
+                <a-descriptions-item label="生产井段：">{{ dataModel.well_production_sections }}</a-descriptions-item>
+                <a-descriptions-item label="T₇⁴顶深：">{{
+                    dataModel.t74_top_depth == null ? "" : (dataModel.t74_top_depth + "m")
+                  }}
+                </a-descriptions-item>
+                <a-descriptions-item label="造斜点：">{{
+                    dataModel.ko_azimuth == null ? "" : (dataModel.ko_azimuth + "m")
+                  }}
+                </a-descriptions-item>
+                <a-descriptions-item label="水平位移：">
+                  {{ dataModel.ko_horizontal_dislocation == null ? "" : (dataModel.ko_horizontal_dislocation + "m") }}
+                </a-descriptions-item>
+                <a-descriptions-item label="方位角：">{{
+                    dataModel.azimuth_angle == null ? "" : (dataModel.azimuth_angle + "°")
+                  }}
+                </a-descriptions-item>
+                <a-descriptions-item label="井位坐标经度：">{{ dataModel.well_coordinates_x }}</a-descriptions-item>
+                <a-descriptions-item label="井位坐标纬度：">{{ dataModel.well_coordinates_y }}</a-descriptions-item>
+              </a-descriptions>
+              <a-divider type="vertical" class="info-title" dashed>井A1信息</a-divider>
+              <a-descriptions bordered>
+                <a-descriptions-item :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}" label="采油厂机构：">
+                  {{ dataModel.org_name_a1 }}
+                </a-descriptions-item>
+                <a-descriptions-item label="单位名称：">{{ dataModel.org_name_a2 }}</a-descriptions-item>
+                <a-descriptions-item label="标准井名：">{{ dataModel.well_legal_name }}</a-descriptions-item>
+                <a-descriptions-item label="地理位置描述：" :span="3">{{ dataModel.geo_description }}</a-descriptions-item>
+                <a-descriptions-item label="构造位置描述：" :span="3">{{ dataModel.structure_pos }}</a-descriptions-item>
+                <a-descriptions-item label="创建/更新日期：">
+                  {{ dataModel.update_date_fmt == null ? dataModel.create_date_fmt : dataModel.update_date_fmt }}
+                </a-descriptions-item>
+                <a-descriptions-item label="井筒生命阶段：">{{ dataModel.phase }}</a-descriptions-item>
+                <a-descriptions-item label="通用井筒名：">{{ dataModel.wellbore_common_name }}</a-descriptions-item>
+                <a-descriptions-item label="目的层：">{{ dataModel.target_formation }}</a-descriptions-item>
+                <a-descriptions-item label="审定测量深度：">
+                  {{ dataModel.authorized_md }}
+                  <template v-if="dataModel.authorized_md">m</template>
+                </a-descriptions-item>
+                <a-descriptions-item label="审定真垂直深度：">{{ dataModel.authorized_tvd }}
+                  <template v-if="dataModel.authorized_tvd">m</template>
+                </a-descriptions-item>
+
+                <a-descriptions-item label="井底测量深度：">{{ dataModel.bh_md }}
+                  <template v-if="dataModel.bh_md">m</template>
+                </a-descriptions-item>
+                <a-descriptions-item label="井底位置描述信息：" :span="2">{{
+                    dataModel.geo_description_bh
+                  }}
+                </a-descriptions-item>
+                <a-descriptions-item label="井底真垂直深度：">{{ dataModel.bh_tvd }}
+                  <template v-if="dataModel.bh_tvd">m</template>
+                </a-descriptions-item>
+                <a-descriptions-item label="相对于参考面的造斜点深度：">{{ dataModel.ko_md }}
+                  <template v-if="dataModel.ko_md">m</template>
+                </a-descriptions-item>
+                <a-descriptions-item label="实际造斜点真垂直深度：">{{ dataModel.ko_tvd }}
+                  <template v-if="dataModel.ko_tvd">m</template>
+                </a-descriptions-item>
+                <a-descriptions-item label="地质单元：">{{ dataModel.project_name }}</a-descriptions-item>
+                <a-descriptions-item label="单元类型：">{{ dataModel.project_type }}</a-descriptions-item>
+                <a-descriptions-item label="单元等级：">{{ dataModel.project_level }}</a-descriptions-item>
+                <a-descriptions-item label="备注：" :span="3">{{ dataModel.remarks }}</a-descriptions-item>
+              </a-descriptions>
+              <a-divider type="vertical" class="info-title" dashed>井盆地凹陷信息</a-divider>
+              <a-descriptions bordered>
+                <a-descriptions-item :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}" label="标准盆地：">
+                  {{ dataModel.bz_basin }}
+                </a-descriptions-item>
+                <a-descriptions-item label="标准地陷：">{{ dataModel.bz_depression }}</a-descriptions-item>
+                <a-descriptions-item label="标准凹陷：">{{ dataModel.bz_depressed }}</a-descriptions-item>
+                <a-descriptions-item label="标准构造带：">{{ dataModel.bz_structural_belt }}</a-descriptions-item>
+                <a-descriptions-item label="标准区块：">{{ dataModel.bz_qkdy }}</a-descriptions-item>
+                <a-descriptions-item label="标准组织机构：">{{ dataModel.bz_org_name }}</a-descriptions-item>
+                <a-descriptions-item label="标准作业区名：">{{ dataModel.bz_dwmc }}</a-descriptions-item>
+              </a-descriptions>
             </div>
-            <div style="max-height:990px;overflow-y:scroll;padding:0px 10px;">
-              <a-list item-layout="horizontal" :data-source="dataIndexList">
-                <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>
-                      <PlusOutlined v-if="!item.isApply" @click="onAddCart(item)" title="加入购物车"
-                                    :style="{fontSize: '16px', color: '#08c'}"/>
-                      <a-button type="link" @click="downFile(item)" v-if="item.isDown" danger>下载</a-button>
-                      <filePreview :fileName="item.file_name" :filePath="item.storage_path"></filePreview>
+            <div style="flex:1;">
+              <a-divider type="vertical" class="info-title" style="margin-top: 0px" dashed>井身结构图片</a-divider>
+              <ChartImage ref="chartImageRef" style="margin-left: 10px"></ChartImage>
+
+              <a-divider type="vertical" class="info-title" dashed>相关文档</a-divider>
+              <div style="margin-left:10px;border:1px solid #f0f0f0;padding:5px;">
+                <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:990px;overflow-y:scroll;padding:0px 10px;">
+                  <a-list item-layout="horizontal" :data-source="dataIndexList">
+                    <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>
+                          <PlusOutlined v-if="!item.isApply" @click="onAddCart(item)" title="加入购物车"
+                                        :style="{fontSize: '16px', color: '#08c'}"/>
+                          <a-button type="link" @click="downFile(item)" v-if="item.isDown" danger>下载</a-button>
+                          <filePreview :fileName="item.file_name" :filePath="item.storage_path"></filePreview>
+                        </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-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>
+                  </a-list>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </a-card>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%" @click="cardSettings.cardTest.expand=!cardSettings.cardTest.expand">测试历史
-        </div>
-      </template>
-      <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">
-        <p v-if="testHistoryList.length>0" class="info-body">本井共实施
-          <template v-for="it in testHistorySummary">
-            <span>{{ it.testing_num }}</span>次{{ it.testing_name }},
+        </a-card>
+        <a-card id="csls" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%" @click="cardSettings.cardTest.expand=!cardSettings.cardTest.expand">测试历史
+            </div>
           </template>
-          <span>{{ lastTestHistory.testing_date }}</span>进行最近一次<span>{{ lastTestHistory.testing_name }}</span>，
-          <span>{{ lastTestHistory.construction_description }}</span>
-        </p>
-        <br/>
-        <a-table :columns="testHistoryColumns" :data-source="testHistoryList" :scroll="{ x:'100%', y: 500 }"
-                 :pagination="testHistoryPage"
-                 @change="handleTestHistoryChange" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
-                 bordered>
-        </a-table>
-      </div>
-    </a-card>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%"
-             @click="cardSettings.cardAnalysis.expand=!cardSettings.cardAnalysis.expand">分析化验
-        </div>
-      </template>
-      <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">
-        <p class="info-body">
-          <template v-for="it in analyticalAssaysSummary">
-            {{ it.item_code }}<span>{{ it[it.item_code] }}</span>组、
+          <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>
-        </p>
-        <br>
-        <a-table :columns="analyticalAssaysColumns" :data-source="analyticalAssaysList" :scroll="{ x:'100%', y: 500 }"
-                 :pagination="analyticalAssaysPage"
-                 @change="handleAnalyticalAssaysChange" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
-                 bordered>
-        </a-table>
-      </div>
-    </a-card>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%" @click="cardSettings.cardWork.expand=!cardSettings.cardWork.expand">
-          作业简史（业务过程）
-        </div>
-      </template>
-      <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">
-        <p class="info-body" v-if="historyAssignmentList.length>0">
-          井实施井下作业施工<span>{{ historyAssignmentCount }}</span>次，其中：
-          <template v-for="it in historyAssignmentSummary">
-            {{ it.test_processes_name }}<span>{{ it.testing_num }}</span>次、
+          <div v-if="cardSettings.cardTest.expand">
+            <p v-if="testHistoryList.length>0" class="info-body">本井共实施
+              <template v-for="it in testHistorySummary">
+                <span>{{ it.testing_num }}</span>次{{ it.testing_name }},
+              </template>
+              <span>{{ lastTestHistory.testing_date }}</span>进行最近一次<span>{{ lastTestHistory.testing_name }}</span>，
+              <span>{{ lastTestHistory.construction_description }}</span>
+            </p>
+            <br/>
+            <a-table :columns="testHistoryColumns" :data-source="testHistoryList" :scroll="{ x:'100%', y: 500 }"
+                     :pagination="testHistoryPage"
+                     @change="handleTestHistoryChange" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
+                     bordered>
+            </a-table>
+          </div>
+        </a-card>
+        <a-card id="fxhy" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%"
+                 @click="cardSettings.cardAnalysis.expand=!cardSettings.cardAnalysis.expand">分析化验
+            </div>
           </template>
-          <span v-if="lastHistoryAssignment.test_processes_name">{{
-              lastHistoryAssignment.start_time
-            }}{{ lastHistoryAssignment.test_processes_name }}，</span>
-          <span>{{
-              lastHistoryAssignment.test_processes_name
-            }}</span><span v-if="lastHistoryAssignment.well_production_sections">井段{{
-            lastHistoryAssignment.well_production_sections
-          }}</span></p>
-        <br/>
-        <a-table :columns="historyAssignmentColumns" :data-source="historyAssignmentList" :scroll="{ x:'100%', y: 500 }"
-                 :pagination="false" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
-                 bordered>
-        </a-table>
-      </div>
-    </a-card>
-    <a-card :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
-      <template #title>
-        <div slot="title" style="width:100%" @click="cardSettings.cardExplain.expand=!cardSettings.cardExplain.expand">
-          测井解释
-        </div>
-      </template>
-      <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">
-        <a-checkbox-group v-model:value="checkedBoreholeInterCheckboxList" :options="boreholeInterCheckboxOptions"/>
-        <a-table :columns="boreholeInterColumns" :data-source="boreholeInterList" :scroll="{ x:'1500', y: 500 }"
-                 :pagination="false" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
-                 bordered>
-        </a-table>
-      </div>
-    </a-card>
-    <a-card :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">
+            <p class="info-body">
+              <template v-for="it in analyticalAssaysSummary">
+                {{ it.item_code }}<span>{{ it[it.item_code] }}</span>组、
+              </template>
+            </p>
+            <br>
+            <a-table :columns="analyticalAssaysColumns" :data-source="analyticalAssaysList" :scroll="{ x:'100%', y: 500 }"
+                     :pagination="analyticalAssaysPage"
+                     @change="handleAnalyticalAssaysChange" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
+                     bordered>
+            </a-table>
+          </div>
+        </a-card>
+        <a-card id="zyjs" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%" @click="cardSettings.cardWork.expand=!cardSettings.cardWork.expand">
+              作业简史（业务过程）
+            </div>
+          </template>
+          <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">
+            <p class="info-body" v-if="historyAssignmentList.length>0">
+              井实施井下作业施工<span>{{ historyAssignmentCount }}</span>次，其中：
+              <template v-for="it in historyAssignmentSummary">
+                {{ it.test_processes_name }}<span>{{ it.testing_num }}</span>次、
+              </template>
+              <span v-if="lastHistoryAssignment.test_processes_name">{{
+                  lastHistoryAssignment.start_time
+                }}{{ lastHistoryAssignment.test_processes_name }}，</span>
+              <span>{{
+                  lastHistoryAssignment.test_processes_name
+                }}</span><span v-if="lastHistoryAssignment.well_production_sections">井段{{
+                lastHistoryAssignment.well_production_sections
+              }}</span></p>
+            <br/>
+            <a-table :columns="historyAssignmentColumns" :data-source="historyAssignmentList" :scroll="{ x:'100%', y: 500 }"
+                     :pagination="false" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
+                     bordered>
+            </a-table>
+          </div>
+        </a-card>
+        <a-card id="cjjs" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
+          <template #title>
+            <div slot="title" style="width:100%" @click="cardSettings.cardExplain.expand=!cardSettings.cardExplain.expand">
+              测井解释
+            </div>
+          </template>
+          <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">
+            <a-checkbox-group class="checkbox-group" v-model:value="checkedBoreholeInterCheckboxList" :options="boreholeInterCheckboxOptions"/>
+            <a-table :columns="boreholeInterColumns" :data-source="boreholeInterList" :scroll="{ x:'1500', y: 500 }"
+                     :pagination="false" @resizeColumn="handleResizeColumn" :rowClassName = "rowClassName"
+                     bordered>
+            </a-table>
+          </div>
+        </a-card>
+        <a-card id="gisdt" :bordered="false" :headStyle="cardSettings.cardHeadStyle" class="card-detail">
       <template #title>
         <div slot="title" style="width:100%" @click="cardSettings.cardGIS.expand=!cardSettings.cardGIS.expand">GIS地图
         </div>
@@ -348,6 +349,16 @@
         </div>
       </div>
     </a-card>
+      </a-layout-content>
+      <a-layout-sider>
+        <a-anchor wrapper-class="anchor" :target-offset="50"
+                  @click.prevent="handleClickAnchor"
+                  :get-container="getContainer">
+          <a-anchor-link v-for="(item, index) in steps"
+                         :href="item.id" :key="index" :title="item.title"/>
+        </a-anchor>
+      </a-layout-sider>
+    </a-layout>
   </div>
 </template>
 <script lang="ts">
@@ -535,7 +546,9 @@ export default defineComponent({
 
         fileOptions.businessType = wellData.dataIndexList.map(x => x.file_business_type);
         fileOptions.businessType = Array.from(new Set(fileOptions.businessType));
-        chartImageRef.value.getImageUrl(data.dataModel.well_common_name);
+        if(chartImageRef.value){
+          chartImageRef.value.getImageUrl(data.dataModel.well_common_name);
+        }
       })
       get('wellInfo/getExpendSetting', {wellId: id}).then(data => {
         if (data != null) {
@@ -612,6 +625,33 @@ export default defineComponent({
       console.log(record);
       return index % 2 === 0 ? 'even' : 'odd';
     }
+
+    //#regin 锚点
+    const getContainer = () => {
+      return document.querySelector(".tabs-view-content")
+      // return document.querySelector("#wellInfoDetail")
+    }
+
+    const handleClickAnchor = (e: any, link: any) => {
+      console.log(e)
+      if (link.href) {
+        const element = document.querySelector(link.href);
+        element && element.scrollIntoView({block: 'start', behavior: 'smooth', alignToTop: 'false'});
+      }
+    }
+
+    const steps = ref([
+      {id: '#jsjj', title: '井史简介', content: '井史简介'},
+      {id: '#scdt', title: '生产动态', content: '生产动态'},
+      {id: '#jbxx', title: '基本信息', content: '基本信息'},
+      {id: '#csls', title: '测试历史', content: '测试历史'},
+      {id: '#fxhy', title: '分析化验', content: '分析化验'},
+      {id: '#zyjs', title: '作业简史（业务过程）', content: '作业简史（业务过程）'},
+      {id: '#cjjs', title: '测井解释', content: '测井解释'},
+      {id: '#gisdt', title: 'GIS地图', content: 'GIS地图'},
+    ]);
+    //#endregin
+
     return {
       ...toRefs(wellData),
       loadData, cardSettings,
@@ -621,6 +661,7 @@ export default defineComponent({
         col.width = w;
       },
       chartImageRef, onChangeBoreholeInterCheckbox, boreholeInterColumns, boreholeInterCheckboxOptions,checkedBoreholeInterCheckboxList,
+      getContainer, handleClickAnchor, steps
     };
   },
   created() {
@@ -634,66 +675,83 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.even {
-  background-color: #f2f2f2;
-}
-
-.odd {
-  background-color: #ffffff;
-}
-
-.card-detail {
-  width: 100%;
-  margin-top: 10px;
-
-  a {
-    color: #1890ff;
+#wellInfoDetail{
+  .ant-layout-sider{
+    background-color: white;
   }
 
-  .ant-card-head-title {
-    font-weight: bold;
-    color: #40a9ff;
+  .anchor{
+    margin: 0px 20px;
+    position: fixed;
+    top: 200px;
   }
 
-  .ant-card-head {
-    padding: 0px 10px;
-    height: 35px;
-    cursor: pointer;
+  .even {
+    background-color: #f2f2f2;
   }
 
-  .ant-card-head-wrapper {
-    height: 35px;
-    margin-top: 5px;
+  .odd {
+    background-color: #ffffff;
   }
-}
 
-.files-type {
-  margin-top: 10px;
+  .card-detail {
+    width: 100%;
+    margin-top: 10px;
+
+    a {
+      color: #1890ff;
+    }
+
+    .ant-card-head-title {
+      font-weight: bold;
+      color: #40a9ff;
+    }
+
+    .ant-card-head {
+      padding: 0px 10px;
+      height: 35px;
+      cursor: pointer;
+    }
 
-  span {
-    color: #8e9ae1;
-    border: 1px solid #c6ccf0;
-    padding: 3px 5px;
-    margin-bottom: 5px;
+    .ant-card-head-wrapper {
+      height: 35px;
+      margin-top: 5px;
+    }
+    .checkbox-group{
+      width: 100%;
+      text-align: right;
+      padding: 5px 0px;
+    }
   }
 
-  .ant-tag-checkable-checked, .ant-tag-checkable-checked:active {
-    background-color: #8e9ae1;
-    color: #ffffff;
+  .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;
+    }
   }
-}
 
-.info-body {
-  line-height: 30px;
+  .info-body {
+    line-height: 30px;
 
-  span {
-    color: #1890ff;
+    span {
+      color: #1890ff;
+    }
   }
-}
 
-.info-title {
-  border-color: #7cb305;
-  margin: 15px;
-  font-weight: bold;
+  .info-title {
+    border-color: #7cb305;
+    margin: 15px;
+    font-weight: bold;
+  }
 }
 </style>