Parcourir la source

井筒-领域检索界面

xiaoqiao il y a 9 mois
Parent
commit
4a9c3e91a9

BIN
vue/src/assets/images/chat.png


BIN
vue/src/assets/images/doc.png


+ 47 - 0
vue/src/components/basic/es-result/chat-view.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div class="search-title">2023年度作业区域 年报 | 月报</div>
+    <div class="search-view">
+      <div class="search-view-chat">
+        <img class="search-chat" src="~@/assets/images/chat.png"/>
+        <div>
+          <span>井号:留70-175X</span>
+          <span>井ID: HB_la0X7IYDTvIlePbaHlRc4SF3sfx33</span>
+          <span>作业阶段ID:sdfsfasefewesf3322233fsmtSddwg2r24F</span>
+          <span>起始时间:2021-7-30  12:00:00</span>
+          <span>终止时间:2022-1-30  20:00:00</span>
+          <span>井号:留70-175X</span>
+          <span>井ID: HB_la0X7IYDTvIlePbaHlRc4SF3sfx33</span>
+          <span>作业阶段ID:sdfsfasefewesf3322233fsmtSddwg2r24F</span>
+          <span>起始时间:2021-7-30  12:00:00</span>
+          <span>终止时间:2022-1-30  20:00:00</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+
+export default defineComponent({
+  name: 'chat-view',
+  components: {},
+  props: {
+    kid: String,
+  },
+  setup(props) {
+    console.log(props);
+    const data = ref([]);
+
+    return {
+      data
+    };
+  }
+});
+</script>
+
+
+<style lang="less" scoped>
+
+</style>

+ 122 - 0
vue/src/components/basic/es-result/cycle-view.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="search-title">生命周期  井号:留70-175X    井名:录井</div>
+    <div class="search-view">
+      <div class="search-view-cycle">
+        <div v-for="(it,index) in data" class="search-view-cycle-body">
+          <div :class="it.state>1?'search-view-cycle-box search-view-cycle-box-active':'search-view-cycle-box search-view-cycle-box-normal'">
+            <div class="search-view-cycle-top">
+              <p v-if="index==0" class="search-view-cycle-line-hide">&nbsp;</p>
+              <p v-else :class="it.state>1?'search-view-cycle-line-active':'search-view-cycle-line'">&nbsp;</p>
+              <p v-if="it.state==3" class="search-view-cycle-num-over">✓</p>
+              <p v-else class="search-view-cycle-num">{{index+1}}</p>
+              <p v-if="index==data.length-1" class="search-view-cycle-line-hide">&nbsp;</p>
+              <p v-else :class="data[index+1].state>1?'search-view-cycle-line-active':'search-view-cycle-line'">&nbsp;</p>
+            </div>
+            <div>{{it.node}}</div>
+            <div>开始时间:</div>
+            <div style="padding: 0px 20px;">{{it.starTime}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+
+export default defineComponent({
+  name: 'chat-view',
+  components: {},
+  props: {
+    kid: String,
+  },
+  setup(props) {
+    console.log(props);
+    const data = ref([{node:'钻井',state:3,starTime:'2017-10-01 12:00'},
+      {node:'录井',state:3,starTime:'2017-10-02 12:00'},
+      {node:'测井',state:2,starTime:'2017-10-03 13:00'},
+      {node:'试油',state:1,starTime:'2017-10-04 14:00'},
+      {node:'采油',state:1,starTime:'2017-10-05 15:00'},
+      {node:'结果',state:1,starTime:'2017-10-06 16:00'}]);
+
+    return {
+      data
+    };
+  }
+});
+</script>
+
+
+<style lang="less" scoped>
+
+.search-view-cycle{
+  width: 100%;
+  border: 1px solid #e4e4e4;
+  border-radius: 25px;
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 10px;
+
+  .search-view-cycle-body{
+    margin:0px;
+    flex-grow: 1;
+
+    .search-view-cycle-box-active{
+      color:#1890FF;
+    }
+    .search-view-cycle-box-normal{
+      color:#CCCCCC;
+    }
+    .search-view-cycle-box{
+      width: 120px;
+      display: flex;
+      align-items: center;
+      flex-flow: column;
+      width: 100%;
+
+      .search-view-cycle-top{
+        display: flex;
+        justify-content:center;
+        align-items: center;
+        width: 100%;
+      }
+      .search-view-cycle-line{
+        border: 1px solid #CCCCCC;
+        height: 2px;
+        flex: 1;
+      }
+      .search-view-cycle-line-active{
+        border: 1px solid #1890FF;
+        height: 2px;
+        flex: 1;
+      }
+      .search-view-cycle-line-hide{
+        border: 1px solid #fff;
+        height: 0px;
+        flex: 1;
+      }
+      div{
+        margin-top:5px
+      }
+      .search-view-cycle-num{
+        width: 30px;
+        padding: 2px 0px;
+        border-radius: 50%;
+        border: 1px solid #CCCCCC;
+        text-align: center;
+        font-weight: bold;
+      }
+      .search-view-cycle-num-over{
+        width: 30px;
+        padding: 2px 0px;
+        border-radius: 50%;
+        border: 1px solid #1890FF;
+        text-align: center;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

+ 49 - 0
vue/src/components/basic/es-result/doc-view.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="search-title">录井文档</div>
+    <div class="search-view">
+      <div class="search-view-doc">
+        <img src="~@/assets/images/doc.png"/>
+        <div>
+          <span>文档名称:</span><span>井号:留70-175X</span> <span>井名:录井</span>
+          <span>
+          文档类型:
+            </span><br>
+          <span>
+          文档大小:
+          </span><br>
+          <span>
+          上传时间:
+          </span><br>
+          <span>
+          上传作者:
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+
+export default defineComponent({
+  name: 'doc-view',
+  components: {},
+  props: {
+    kid: String,
+  },
+  setup(props) {
+    console.log(props);
+    const data = ref([]);
+
+    return {
+      data
+    };
+  }
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 71 - 0
vue/src/components/basic/es-result/list-view.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="search-title">业务过程</div>
+    <div class="search-view">
+      <a-table :columns="columns" :data-source="data" :scroll="{ x:'1500', y: 500 }"
+               :pagination="false" @resizeColumn="handleResizeColumn"
+               bordered>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {get} from "@/api/common";
+
+export default defineComponent({
+  name: 'list-view',
+  components: {},
+  props: {
+    kid: String,
+  },
+  setup(props) {
+    console.log(props);
+
+    const data = ref([]);
+
+    const columns = ref([
+      {title: '开始时间', dataIndex: 'start_time', key: 'start_time', resizable: true, width: 120},
+      {title: '结束时间', dataIndex: 'end_time', key: 'end_time', resizable: true, width: 120},
+      {title: '施工简述', dataIndex: 'constr_description', key: 'constr_description', resizable: true, width: 120},
+      {title: '备注', dataIndex: 'remarks', key: 'remarks', resizable: true, width: 120},
+      {
+        title: '生产井段',
+        dataIndex: 'well_production_sections',
+        key: 'well_production_sections',
+        resizable: true,
+        width: 120
+      },
+      {title: '层位', dataIndex: 'formation_name', key: 'formation_name', resizable: true, width: 120},
+      {title: '井段顶深', dataIndex: 'top_md', key: 'top_md', resizable: true, width: 120},
+      {title: '井段底深', dataIndex: 'btm_md', key: 'btm_md', resizable: true, width: 120},
+      {title: '厚度', dataIndex: 'thickness', key: 'thickness', resizable: true, width: 120},
+      {title: '层序号', dataIndex: 'layer_no', key: 'layer_no', resizable: true, width: 120},
+      {title: '作业类型', dataIndex: 'working_type', key: 'working_type', resizable: true, width: 120},
+      {title: '作业工序名称', dataIndex: 'test_processes_name', key: 'test_processes_name', resizable: true, width: 120},
+      {title: '作业工作内容', dataIndex: 'worksummary', key: 'worksummary', resizable: true, width: 120},
+      {title: '施工次序', dataIndex: 'construct_no', key: 'construct_no', resizable: true, width: 120},
+      {title: '作业队伍', dataIndex: 'work_team', key: 'work_team', resizable: true, width: 120},
+      {title: '泵深', dataIndex: 'pump_depth', key: 'pump_depth', resizable: true, width: 120},
+    ])
+    get('esindex/getList', {page: 1, rows: 10}).then(result => {
+      data.value = result.list;
+    })
+    return {
+      columns, data,
+      handleResizeColumn: (w, col) => {
+        col.width = w;
+      }
+    };
+  },
+  created() {
+  },
+  activated() {
+  }
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 42 - 0
vue/src/components/basic/es-result/table-view.vue

@@ -0,0 +1,42 @@
+<template>
+<div>
+  <div class="search-title">业务解释</div>
+  <div class="search-view">
+    <span>井号:留70-175X</span>
+    <span>井ID: HB_la0X7IYDTvIlePbaHlRc4SF3sfx33</span>
+    <span>作业阶段ID:sdfsfasefewesf3322233fsmtSddwg2r24F</span>
+    <span>起始时间:2021-7-30  12:00:00</span>
+    <span>终止时间:2022-1-30  20:00:00</span>
+    <span>井号:留70-175X</span>
+    <span>井ID: HB_la0X7IYDTvIlePbaHlRc4SF3sfx33</span>
+    <span>作业阶段ID:sdfsfasefewesf3322233fsmtSddwg2r24F</span>
+    <span>起始时间:2021-7-30  12:00:00</span>
+    <span>终止时间:2022-1-30  20:00:00</span>
+  </div>
+</div>
+</template>
+
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+
+export default defineComponent({
+  name: 'table-view',
+  components: {},
+  props: {
+    kid: String,
+  },
+  setup(props) {
+    console.log(props);
+    const data = ref([]);
+
+    return {
+      data
+    };
+  }
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 2 - 2
vue/src/router/asyncModules/sale.ts

@@ -9,8 +9,8 @@ export default {
   'views/subjectdetail': () => import( '@/views/subject/detail.vue'),
   'views/wellinfo': () => import( '@/views/wellinfo/index.vue'),
   'views/wellinfoDetail': () => import( '@/views/wellinfo/detail.vue'),
-  'views/domain': () => import( '@/views/domainES/index.vue'),
-  'views/domainResult': () => import( '@/views/domainES/result.vue'),
+  'views/domain': () => import( '@/views/esdomain/index.vue'),
+  'views/domainResult': () => import( '@/views/esdomain/result.vue'),
   'views/esindexlist': () => import( '@/views/esindex/index.vue'),
   'views/esindexedit': () => import( '@/views/esindex/edit.vue'),
   'views/esindexdetail': () => import( '@/views/esindex/detail.vue'),

+ 0 - 13
vue/src/views/domainES/result.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-  name: "result.vue"
-}
-</script>
-
-<style scoped>
-
-</style>

+ 3 - 1
vue/src/views/domainES/index.vue

@@ -64,12 +64,14 @@ import {reactive, defineComponent, ref} from 'vue';
 import {useRoute, useRouter} from "vue-router";
 import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
 import type {FormInstance, SelectProps} from "ant-design-vue";
+import {useTabsViewStore} from "@/store/modules/tabsView";
 
 export default defineComponent({
   name: 'domainESIndex',
   components: {DownOutlined, UpOutlined},
   setup() {
 
+    const tabsViewStore = useTabsViewStore();
     const route = useRoute();
     const router = useRouter();
     const formRef = ref<FormInstance>();
@@ -92,7 +94,7 @@ export default defineComponent({
     ] as SelectProps['options'];
 
     const onQuery = () => {
-      console.log("");
+      tabsViewStore.addTabByPath('/domain/result', {});
     }
     function addQuery(){
       queryList.value.push({});

+ 229 - 0
vue/src/views/esdomain/result.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="card-search">
+    <div>
+      <a-form
+        ref="formRef"
+        name="advanced_search"
+        class="ant-advanced-search-form"
+        :model="formState"
+        @finish="onQuery"
+      >
+        <div>
+          <a-space>
+            <a-select v-model:value="formState.tabName" :options="fieldList" class="operTexts"></a-select>
+            <a-input v-model:value="formState.subjectName" style="width: 400px"></a-input>
+            <a-button type="primary" html-type="submit" @click="onQuery">查询</a-button>
+            <a-button @click="() => {formRef.resetFields();}">重置</a-button>
+          </a-space>
+        </div>
+        <a-divider orientation="center" @click="pageState.showMoreQuery=!pageState.showMoreQuery">
+          <template v-if="pageState.showMoreQuery">
+            展开更多
+            <DoubleRightOutlined rotate="90"/>
+          </template>
+          <template v-else>
+            折 叠
+            <DoubleLeftOutlined rotate="90"/>
+          </template>
+        </a-divider>
+      </a-form>
+      <div class="search-container">
+        <div class="search-body">
+          <div class="search-order">
+            <div>综合排序
+              <p class="search-order-icon">
+              <caret-up-outlined @click="pageState.defaultOrder='asc'" :style="{ color: pageState.defaultOrder=='asc'? '#1890FF':'#cccccc' }"/>
+              <caret-down-outlined @click="pageState.defaultOrder='desc'" :style="{ color: pageState.defaultOrder=='desc'? '#1890FF':'#cccccc' }"/></p></div>
+            <div>创建时间
+              <p class="search-order-icon">
+                <caret-up-outlined @click="pageState.timeOrder='asc'" :style="{ color: pageState.timeOrder=='asc'? '#1890FF':'#cccccc' }"/>
+                <caret-down-outlined @click="pageState.timeOrder='desc'" :style="{ color: pageState.timeOrder=='desc'? '#1890FF':'#cccccc' }"/></p>
+            </div>
+          </div>
+          <component is="cycleView" :kid="'id'"></component>
+          <component is="listView" :kid="'id'"></component>
+          <component is="tableView"></component>
+          <component is="listView"></component>
+          <component is="tableView"></component>
+          <component is="chatView" :kid="'id'"></component>
+          <component is="docView"></component>
+        </div>
+        <div class="search-sider">
+          <div class="search-sider-block">
+            <b>你可能要找的对象</b>
+            <a-list size="small" :data-source="listData">
+              <template #renderItem="{ item }">
+                <a-list-item>{{ item }}
+                  <template #actions>
+                    <a key="list-loadmore-edit">井筒</a>
+                  </template>
+                </a-list-item>
+              </template>
+            </a-list>
+          </div>
+          <div class="search-sider-block">
+            <b>你可能要找的年月报</b>
+            <a-list size="small" :data-source="listData">
+              <template #renderItem="{ item }">
+                <a-list-item>{{ item }}
+                  <template #actions>
+                    <a key="list-loadmore-edit">年报</a>
+                  </template>
+                </a-list-item>
+              </template>
+            </a-list>
+          </div>
+          <div class="search-sider-block">
+            <b>你可能要找的业务过程</b>
+            <div class="search-sider-process">
+              <template v-for="it in listData">
+                <span>{{ it }}</span>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive, ref} from 'vue';
+import {useRoute, useRouter} from "vue-router";
+import type {SelectProps, FormInstance} from "ant-design-vue";
+import tableView from '@/components/basic/es-result/table-view.vue';
+import listView from '@/components/basic/es-result/list-view.vue';
+import chatView from '@/components/basic/es-result/chat-view.vue';
+import docView from '@/components/basic/es-result/doc-view.vue';
+import cycleView from '@/components/basic/es-result/cycle-view.vue';
+
+export default defineComponent({
+  name: 'esdomainResult',
+  components: {tableView, listView, chatView, docView,cycleView},
+  setup() {
+
+    const route = useRoute();
+    const router = useRouter();
+    const formRef = ref<FormInstance>();
+    const formState = reactive({
+      page: 1, rows: 10, subjectName: '', tabName: '', tabCode: null, total: 0
+    });
+    const pageState = reactive({
+      showMoreQuery: false,
+      defaultOrder:'',
+      timeOrder:''
+    });
+
+    const fieldList = [
+      {value: '', label: '不限'},
+      {value: 'wellId', label: '井号'},
+      {value: 'wellName', label: '井名'}
+    ] as SelectProps['options'];
+
+    function onQuery() {
+      console.log("");
+    }
+
+    const listData: string[] = [
+      '井号1-1.',
+      '井号2-1',
+      '井号3-1',
+      '井号4-1',
+      '井号5-1',
+      '井号5-1',
+      '井号5-1',
+    ];
+    return {
+      router, route, formState, fieldList, formRef, onQuery, pageState, listData
+    };
+  },
+  created() {
+  },
+  activated() {
+  }
+});
+</script>
+
+<style lang="less">
+.search-container {
+  display: flex;
+
+  .search-body {
+    width: 80%;
+    min-width: 800px;
+
+    .search-order {
+      display: flex;
+      font-size: 16px;
+      margin-bottom: 9px;
+      justify-content: flex-end;
+
+      div{
+        display: flex;
+        margin-right: 10px;
+      }
+      .search-order-icon{
+        width: 15px;
+        height: 15px;
+        display: flex;
+        flex-wrap: wrap;
+
+        span{
+          height: 9px;
+          cursor:pointer;
+        }
+      }
+    }
+  }
+
+  .search-sider {
+    flex: 1;
+    margin-left: 10px;
+
+    .search-sider-block {
+      margin-bottom: 10px;
+
+      .search-sider-process{
+        display: flex;
+        flex-wrap: wrap;
+        span{
+          padding: 3px 10px;
+          border: 1px solid black;
+          margin: 5px;
+          background-color: #f5f5f5;
+          cursor:pointer;
+        }
+      }
+    }
+  }
+}
+
+.search-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 10px 0px;
+}
+
+.search-view {
+  .search-view-chat {
+    display: flex;
+
+    .search-chat {
+      margin-right: 10px;
+    }
+  }
+
+  .search-view-doc {
+    display: flex;
+
+    img {
+      margin-right: 10px;
+    }
+  }
+
+  span {
+    margin-right: 10px;
+    line-height: 25px;
+  }
+}
+</style>