企业一张图基本布局

src/components/easyMap/initMapInfo.ts

@@ -4,7 +4,7 @@ import * as source from 'ol/source'
 import HaituImg from './images/bg-ocean.png'
 import store from '@/store/index'
 
-const isInternet = false
+const isInternet = true
 
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],

src/views/gis/business/common/business-main.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="business-main-com">
+    <div class="business-main-com_expend __hover" :class="{'business-main-com_expend-not': !expend}" @click="expend = !expend"></div>
+    <div class="business-main-com_content __box-shadow" v-show="expend">
+      <div class="business-main-com_content-head">
+        <SvgIcon name="close_2" size="18"/>{{title}}
+      </div>
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    title: {}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      expend: true
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.business-main-com {
+  position: fixed;
+  left: 10px;
+  top: 10px;
+  width: 410px;
+  height: calc(100% - 20px);
+  .business-main-com_expend {
+    width: 14px;
+    height: 110px;
+    background: black;
+    position: absolute;
+    top: calc((100% - 110px) / 2);
+    right: -14px;
+    &.business-main-com_expend-not {
+      position: fixed;
+      left: 0;
+    }
+  }
+  .business-main-com_content {
+    width: 100%;
+    height: 100%;
+    background-color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    .business-main-com_content-head {
+      height: 60px;
+      width: 100%;
+      background-color: red;
+    }
+  }
+}
+
+
+</style>

src/views/gis/business/common/focus-content.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="focus-content-com">
+    <div class="focus-content-com_bg"></div>
+    <div class="focus-content-com_slot">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    title: {}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      expend: true
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.focus-content-com {
+  width: 100%;
+  position: relative;
+  .focus-content-com_bg {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #FFFFFF;
+    border: 1px solid #D6D6D6;
+  }
+  .focus-content-com_slot {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+</style>

src/views/gis/business/enterprise/index.vue

@@ -1,11 +1,55 @@
 <template>
-  <div class="__gis-content-main __box-shadow">
-    <div class="__gis-content-main_head">
-      <div class="__gis-content-main_head-title"></div>
-      <SvgIcon name="close_2" color="#0096FF" size="18"/>
+  <BusinessMainCom title="企业一张图">
+    <div class="enterprise">
+      <div class="__gis-business-main_title">数量统计</div>
+      <FocusContentCom class="one">1</FocusContentCom>
+      <FocusContentCom class="two">2</FocusContentCom>
+      <div class="__gis-business-main_title">企业列表</div>
+      <div class="form">
+        <CusFormColumn
+            labelWidth="50"
+            :span="24"
+            link="select"
+            label="类型:"
+            v-model:param="enterprise.tempForm.type"
+            :options="[
+              {dictLabel: '零关税自用进口生产设备', dictValue: 'lgszyjkscsb'},
+              {dictLabel: '加工增值免关税', dictValue: 'jgzzmgs'},
+              {dictLabel: '零关税进口原辅料', dictValue: 'lgsjkyfl'},
+            ]"
+        />
+        <div class="form-two">
+          <CusFormColumn
+              labelWidth="50"
+              :span="24"
+              label="搜索:"
+              v-model:param="enterprise.tempForm.name"
+          />
+          <div class="__cus-buttons-2">
+            <div class="__cus-button-submit __hover" @click="onSearch">搜索</div>
+            <div class="__cus-button-cancel __hover" @click="onReset">重置</div>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="table-card">
+          <template v-for="(item, index) in enterprise.table.data">
+            <div class="table-card-item">
+              {{(enterprise.table.pageNum - 1) * enterprise.table.pageSize + index + 1}}.{{item.name}}
+            </div>
+          </template>
+        </div>
+        <el-pagination
+            class="__cus-pagination"
+            :current-page="enterprise.table.pageNum"
+            :page-size="enterprise.table.pageSize"
+            :total="enterprise.table.total"
+            layout="total,prev,pager,next,jumper"
+            @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
-    企业一张图
-  </div>
+  </BusinessMainCom>
 </template>
 
 <script lang="ts">
@@ -24,21 +68,72 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import BusinessMainCom from '../common/business-main.vue'
+import FocusContentCom from '../common/focus-content.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    BusinessMainCom,
+    FocusContentCom,
+  },
   props: {},
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      expend: true,
+      enterprise: {
+        form: {},
+        tempForm: {
+          type: '',
+          name: ''
+        },
+        table: {
+          data: <any>[],
+          pageNum: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    })
+    const onSearch = () => {
+      state.enterprise.table.pageNum = 1
+      state.enterprise.form = JSON.parse(JSON.stringify(state.enterprise.tempForm))
+      handleSearch()
+    }
+    const onReset = () => {
+      state.enterprise.tempForm = {
+        name: '',
+        type: ''
+      }
+      onSearch()
+    }
+    const handleCurrentChange = (val: number) => {
+      state.enterprise.table.pageNum = val
+      handleSearch()
+    }
+    const handleSearch = () => {
+      state.enterprise.table.data = []
+      state.enterprise.table.total = 100
+      for (let i = 0; i < 10; i++) {
+        state.enterprise.table.data.push({
+          name: '永恒印记市场营销策划（海口）有限公司——',
+          type: '零关税自用进口生产设备'
+        })
+      }
+    }
     onMounted(() => {
+      state.enterprise.form = JSON.parse(JSON.stringify(state.enterprise.tempForm))
+      handleSearch()
     })
     return {
       ...toRefs(state),
+      onSearch,
+      onReset,
+      handleCurrentChange
     }
   },
 })
@@ -46,4 +141,52 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import "../main";
+.enterprise {
+  flex: 1;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .one {
+    height: 238px;
+  }
+  .two {
+    margin-top: 10px;
+    height: 100px;
+  }
+  .form {
+    :deep(.el-form-item) {
+      margin-bottom: 7px;
+    }
+    .form-two {
+      display: flex;
+      align-items: flex-start;
+      .cus-form-column {
+        flex: 1;
+        margin-right: 8px;
+      }
+    }
+  }
+  .table {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .table-card {
+      flex: 1;
+      overflow-y: auto;
+      display: grid;
+      row-gap: 10px;
+      .table-card-item {
+        width: 100%;
+        height: 62px;
+        border: 1px solid #D6D6D6;
+        border-radius: 2px;
+        &:hover {
+          background-color: rgba(16,140,243,0.1);
+        }
+      }
+    }
+  }
+}
 </style>

src/views/gis/business/main.scss

@@ -1,8 +1,8 @@
-.__gis-content-main {
-  position: fixed;
-  left: 10px;
-  top: 10px;
-  width: 410px;
-  height: calc(100% - 20px);
-  background-color: #FFFFFF;
+.__gis-business-main_title {
+  line-height: 50px;
+  height: 50px;
+  font-size: 18px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 600;
+  color: #0096FF;
 }

src/views/gis/layout/tools/select.vue

@@ -224,13 +224,15 @@ export default defineComponent({
 .select-com {
   position: fixed;
   width: 404px;
-  height: calc(100% - 100px);
   display: flex;
   flex-direction: column;
   .draw {
     width: 100%;
+    height: 60px;
     background-color: #FFFFFF;
-    padding: 12px 14px;
+    display: flex;
+    align-items: center;
+    padding: 0 14px;
     .tools {
       display: flex;
       align-items: center;
@@ -275,8 +277,10 @@ export default defineComponent({
     }
   }
   .result {
+    position: fixed;
+    height: calc(100% - 100px - 60px - 2px);
+    bottom: 10px;
     background-color: #FFFFFF;
-    margin-top: 2px;
     flex: 1;
     display: flex;
     flex-direction: column;