框选表格

src/components/cus/CusFormColumn.vue

@@ -431,13 +431,20 @@ export default defineComponent({
   }
   :deep(.el-form-item) {
     .el-form-item__label {
+      word-break: keep-all;
       line-height: 1;
       text-align: right;
       display: flex;
       align-items: center;
       padding-left: 10px;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #434343;
+      height: 36px;
     }
     .el-form-item__content {
+      height: 36px;
       flex-wrap: unset;
       >div:first-child {
         flex: 1;
@@ -449,6 +456,12 @@ export default defineComponent({
         font-weight: 400;
         color: #606266;
       }
+      .el-input {
+        height: 100%;
+        .el-input__wrapper {
+          border-radius: 2px;
+        }
+      }
     }
   }
 }

src/components/cus/CusTable.vue

@@ -2,6 +2,7 @@
   <div class="cus-table" :class="{'cus-table-normal': !otherStyle, 'cus-table-full': full !== false}">
     <div class="cus-table-main" ref="ref_tableMain">
       <el-table
+          stripe
           v-bind="$attrs"
           class="ct-table"
           ref="ref_table"
@@ -71,19 +72,18 @@
       </el-table>
     </div>
     <div class="ct-page">
-      <div class="total">
-        <template v-if="$util.isValue(selected?.length)">
-          已选中 {{ selected.length }} 条 /
-        </template>
-        共 {{ total }} 条
-      </div>
+<!--      <div class="total">-->
+<!--        <template v-if="$util.isValue(selected?.length)">-->
+<!--          已选中 {{ selected.length }} 条 /-->
+<!--        </template>-->
+<!--        共 {{ total }} 条-->
+<!--      </div>-->
       <el-pagination
           v-if="noPage === false"
           ref="ref_tablePage"
           class="__cus-pagination"
           :currentPage="page"
           :page-size="pageSize"
-          background
           :page-sizes="pageSizes"
           :layout="pageLayoutCpt"
           :total="Number(total)"
@@ -152,7 +152,7 @@ import {
         default: false
       },
       noLayout: {
-        default: () => []
+        default: () => ['sizes']
       },
       full: {
         default: false
@@ -168,7 +168,7 @@ import {
       const ref_tablePage = ref();
       const state = reactive({
         tempTableHead: <any>[],
-        pageLayout: ['sizes', 'prev', 'pager', 'next', 'jumper']
+        pageLayout: ['total', 'sizes', 'prev', 'pager', 'next', 'jumper']
       });
       watch(() => props.tableHead, (nVal: any) => {
         formatTableHead(nVal)
@@ -249,8 +249,8 @@ import {
   max-height: 100%;
   display: flex;
   flex-direction: column;
-  $cus-page-height: 32px;
-  $cus-page-mt: 25px;
+  $cus-page-height: 20px;
+  $cus-page-mt: 10px;
   position: relative;
   :deep(.el-popper) {
     max-width: 60% !important;
@@ -261,6 +261,9 @@ import {
     position: absolute;
     :deep(.ct-table) {
       height: 100%;
+      .el-scrollbar__bar {
+        width: 4px;
+      }
     }
   }
   :deep(.ct-page) {
@@ -270,7 +273,7 @@ import {
     font-weight: 400;
     color: #999999;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     .total {
       display: flex;
       align-items: center;
@@ -312,12 +315,13 @@ import {
                 border-right: none;
                 border-bottom: none;
                 background-color: #F5F5F5;
-                height: 52px;
+                height: 32px;
+                padding: 0;
                 .cell {
-                  font-size: 14px;
-                  font-family: 微软雅黑;
+                  font-size: 12px;
+                  font-family: Microsoft YaHei;
                   font-weight: 400;
-                  color: #666666;
+                  color: #757575;
                 }
               }
               &:first-child {
@@ -338,10 +342,10 @@ import {
                 border-right: none;
                 border-bottom-color: #F4F4F4;
                 .cell {
-                  font-size: 14px;
-                  font-family: 微软雅黑;
+                  font-size: 12px;
+                  font-family: Microsoft YaHei;
                   font-weight: 400;
-                  color: #666666;
+                  color: #757575;
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis;

src/components/easyMap/func/draw.ts

@@ -48,7 +48,8 @@ export default function Draw (map, typeSelect) {
                         }),
                         stroke: new style.Stroke({
                             color: '#2E81FF',  //边框颜色
-                            width: 2   // 边框宽度
+                            width: 2,   // 边框宽度
+                            lineDash: [10, 10]
                         }),
                         image: new style.Circle({
                             radius: 7,
@@ -160,6 +161,7 @@ export default function Draw (map, typeSelect) {
                         stroke: new style.Stroke({
                             color: "#2E81FF",
                             width: 2,
+                            lineDash: [10, 10]
                         }),
                         image: new style.Circle({
                             radius: 5,

src/store/modules/dictionary.ts

@@ -4,9 +4,39 @@ import { dictionary, dictionaryDefine } from './dictionary-define'
 
 const state = {
 	...dictionary,
+	elementTypeList: [
+		{dictLabel: '海岸警察', dictValue: 'hajc'},
+		{dictLabel: '缉私警', dictValue: 'jsj'},
+		{dictLabel: '网格员', dictValue: 'wgy'},
+		{dictLabel: '危险车辆', dictValue: 'wxcl'},
+		{dictLabel: '公安类设备', dictValue: 'galsb'},
+		{dictLabel: '社会类设备', dictValue: 'shlsb'},
+		{dictLabel: '民用类设备', dictValue: 'mylsb'},
+		{dictLabel: '零关税自用进口生产设备', dictValue: 'lgszyjkscsb'},
+		{dictLabel: '加工增值免关税', dictValue: 'jgzzmgs'},
+		{dictLabel: '零关税进口原辅料', dictValue: 'lgsjkyfl'},
+		{dictLabel: '景区', dictValue: 'jq'},
+		{dictLabel: '旅馆', dictValue: 'lg'},
+		{dictLabel: '出租屋', dictValue: 'czw'},
+		{dictLabel: '火车站', dictValue: 'hcz'},
+		{dictLabel: '线索(反走私)', dictValue: 'fzs'},
+		{dictLabel: '线索(岸线船舶研判预警)', dictValue: 'axcbypyj'},
+		{dictLabel: '线索(公共场所风险预防)', dictValue: 'ggcsfxyf'},
+		{dictLabel: '线索(消防救援)', dictValue: 'xfjy'},
+		{dictLabel: '线索(企业风险防控)', dictValue: 'qyfxfk'},
+		{dictLabel: '线索(社会治理风险防控)', dictValue: 'shzlfxfk'},
+		{dictLabel: '案件', dictValue: 'aj'},
+	]
 }
 
 const getters = {
+	elementTypeMap: (state) => {
+		const map = new Map()
+		state.elementTypeList.forEach(v => {
+			map.set(v.dictValue, v.dictLabel)
+		})
+		return map
+	}
 }
 
 const mutations = {

src/style/cus.scss

@@ -14,6 +14,7 @@
 
 .__box-shadow {
   box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.4);
+  border: 1px solid #C7CFDE;
 }
 
 .__background-grid {
@@ -66,77 +67,87 @@
   margin: 0;
   padding: 0;
   .el-pagination__total {
-    font-size: 14px;
+    font-size: 12px;
     font-family: Microsoft YaHei;
     font-weight: 400;
-    color: #999999;
-  }
-  .el-pagination__sizes {
-    .el-input {
-      max-width: 100px !important;
-      .el-input__wrapper {
-        padding-left: 8px !important;
-        padding-right: 8px !important;
-        .el-input__inner {
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #999999;
-        }
-      }
-    }
+    color: #AEAEAE;
   }
+  //.el-pagination__sizes {
+  //  .el-input {
+  //    max-width: 100px !important;
+  //    .el-input__wrapper {
+  //      padding-left: 8px !important;
+  //      padding-right: 8px !important;
+  //      .el-input__inner {
+  //        font-size: 14px;
+  //        font-family: Microsoft YaHei;
+  //        font-weight: 400;
+  //        color: #999999;
+  //      }
+  //    }
+  //  }
+  //}
   .btn-prev, .btn-next {
     background-color: transparent !important;
-    color: #999999 !important;
+    color: #AEAEAE !important;
+    margin-left: unset;
+    min-width: unset;
   }
   .el-pager {
     .number {
-      font-size: 14px;
+      font-size: 12px;
       font-family: Microsoft YaHei;
       font-weight: 400;
-      color: #999999 !important;
-      border: 1px solid #eaeaea;
+      color: #AEAEAE !important;
       background-color: transparent !important;
+      min-width: unset;
+      padding: 0 1px;
       &:hover {
-        background-color: #0062e9 !important;
         opacity: 0.75;
-        color: #ffffff !important;
+        color: #1174DB !important;
       }
       &.is-active {
-        color: #ffffff !important;
-        background-color: #0062e9 !important;
+        color: #1174DB !important;
         opacity: 1;
       }
     }
     .more {
       background-color: transparent !important;
-      color: #999999 !important;
+      color: #AEAEAE !important;
       &:hover {
-        color: #0062e9 !important;
+        color: #1174DB !important;
       }
     }
   }
   button:hover {
-    color: #0062e9 !important;
+    color: #1174DB !important;
   }
   .el-pagination__jump {
-    font-size: 14px;
+    font-size: 12px;
     font-family: Microsoft YaHei;
     font-weight: 400;
-    color: #999999;
+    color: #AEAEAE;
+    margin-left: unset;
+    .el-pagination__goto {
+      margin-right: 2px;
+    }
     .el-input {
+      width: 30px;
+      height: 20px;
       .el-input__wrapper {
         padding-left: 2px !important;
         padding-right: 2px !important;
         .el-input__inner {
-          font-size: 14px;
+          font-size: 12px;
           font-family: Microsoft YaHei;
           font-weight: 400;
-          color: #999999;
+          color: #AEAEAE;
         }
       }
     }
+    .el-pagination__classifier {
+      margin-left: 2px;
+    }
   }
 }
 
@@ -248,3 +259,59 @@
   }
 }
 
+.__cus-buttons-1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  >div {
+    width: 80px;
+    height: 36px;
+    border: 1px solid #1270DA;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+  .__cus-button-submit {
+    background-color: #1280F1;
+    color: #FFFFFF;
+  }
+  .__cus-button-cancel {
+    background-color: #FFFFFF;
+    color: #108DF3;
+  }
+}
+.__cus-buttons-2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  >div {
+    width: 50px;
+    height: 36px;
+    border: 1px solid #1270DA;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+  .__cus-button-submit {
+    background-color: #1280F1;
+    color: #FFFFFF;
+  }
+  .__cus-button-cancel {
+    background-color: #FFFFFF;
+    color: #108DF3;
+  }
+}

src/views/gis/layout/index.vue

@@ -185,6 +185,8 @@ export default defineComponent({
       }
     }
     onMounted(() => {
+      state.toolsCom = SelectCom
+      state.toolsType = 'select'
     })
     return {
       ...toRefs(state),

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="example-com">
+  <div class="example-com __box-shadow">
     <template v-for="p in listMapper">
       <div class="p-label">{{p.label}}</div>
       <div class="son">

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

@@ -87,9 +87,9 @@
         </div>
       </div>
     </div>
-    <div class="buttons">
-      <div class="__hover" @click="toPosition">确定</div>
-      <div class="__hover cancel" @click="$emit('cancel')">取消</div>
+    <div class="__cus-buttons-1">
+      <div class="__cus-button-submit __hover" @click="toPosition">确定</div>
+      <div class="__cus-button-cancel __hover" @click="$emit('cancel')">取消</div>
     </div>
   </div>
 </template>
@@ -255,33 +255,8 @@ export default defineComponent({
       }
     }
   }
-  .buttons {
+  .__cus-buttons-1 {
     margin-top: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    >div {
-      width: 80px;
-      height: 36px;
-      background-color: #1280F1;
-      border: 1px solid #1270DA;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #FFFFFF;
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-    .cancel {
-      background-color: #FFFFFF;
-      border-color: #1270DA;
-      color: #108DF3;
-    }
   }
 }
 </style>

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

@@ -1,6 +1,70 @@
 <template>
   <div class="select-com">
-    框选
+    <div class="draw __box-shadow">
+      <div class="tools">
+        <div class="label">空间选择：</div>
+        <div class="right">
+          <div class="item __hover" :class="{active: selectParams.type === 'circle'}" @click="mapDraw('circle')">
+            <img src="@/assets/images/gis-layout/gis-layout-tools_select-circle.png" alt=""/>圆形
+          </div>
+          <div class="line"/>
+          <div class="item __hover" :class="{active: selectParams.type === 'rectangle'}" @click="mapDraw('rectangle')">
+            <img src="@/assets/images/gis-layout/gis-layout-tools_select-rectangle.png" alt=""/>矩形
+          </div>
+          <div class="line"/>
+          <div class="item __hover" :class="{active: selectParams.type === 'polygon'}" @click="mapDraw('polygon')">
+            <img src="@/assets/images/gis-layout/gis-layout-tools_select-polygon.png" alt=""/>多边形
+          </div>
+          <div class="line"/>
+          <div class="item __hover" @click="mapClear">
+            <img src="@/assets/images/gis-layout/gis-layout-tools_select-clear.png" alt=""/>清除
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="result __box-shadow" v-if="selectParams.wkt">
+      <div class="head">查询结果</div>
+      <div class="chart">查询结果</div>
+      <div class="data">
+        <div class="form">
+          <CusFormColumn
+              labelWidth="50"
+              :span="24"
+              link="select"
+              label="类型:"
+              v-model:param="result.tempForm.type"
+              :options="hasTypeCpt"
+          />
+          <div class="two">
+            <CusFormColumn
+                labelWidth="50"
+                :span="24"
+                label="搜索:"
+                v-model:param="result.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">
+          <CusTable
+              ref="ref_cusTable"
+              :tableData="resultTableDataCpt"
+              :tableHead="result.table.head"
+              :total="resultTableFilterCpt.length"
+              :page="result.table.pageNum"
+              :pageSize="result.table.pageSize"
+              @handlePage="handlePage"
+          >
+            <template #type-column-value="{ scope }">
+              {{$store.getters['dictionary/elementTypeMap'].get(scope.row.type) ?? scope.row.type}}
+            </template>
+          </CusTable>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -20,6 +84,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import {randomNum} from "@/utils/util";
 
 export default defineComponent({
   name: '',
@@ -28,7 +93,7 @@ export default defineComponent({
     map: {
       required: true
     },
-    mapFunc: {
+    mapFunc: <any>{
       required: true
     }
   },
@@ -37,15 +102,212 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      selectParams: {
+        type: '',
+        wkt: '22'
+      },
+      result: {
+        form: {},
+        tempForm: {
+          type: '',
+          name: ''
+        },
+        table: {
+          head: [
+            {value: "type", label: "类型", show: true, align: 'left', width: 100},
+            {value: "name", label: "名称", show: true, align: 'left'},
+          ],
+          data: <any>[],
+          pageNum: 1,
+          pageSize: 10,
+        }
+      }
+    })
+    const mapClear = () => {
+      props.mapFunc.drawClear()
+      state.selectParams = {
+        type: '',
+        wkt: ''
+      }
+      state.result.table.data = []
+      state.result.table.pageNum = 1
+      state.result.form = {
+        type: '',
+        name: ''
+      }
+    }
+    const mapDraw = (type) => {
+      props.mapFunc.draw(type).then(({feature, wkt}) => {
+        state.selectParams.type === type
+        state.selectParams.wkt = wkt
+        initData()
+      }).catch(() => {})
+    }
+    const initData = () => {
+      state.result.table.data = []
+      state.result.table.pageNum = 1
+      for (let i = 0; i <= 10000; i++) {
+        const dict = store.state.dictionary.elementTypeList
+        const p = dict[that.$util.randomNum(0, dict.length - 1)]
+        const obj = {
+          name: p.dictLabel + '_' + i,
+          type: p.dictValue,
+        }
+        state.result.table.data.push(obj)
+      }
+    }
+    const resultTableFilterCpt = computed(() => {
+      return state.result.table.data.filter(v => (!state.result.form.type || v.type === state.result.form.type) && v.name.includes(state.result.form.name))
+    })
+    const resultTableDataCpt = computed(() => {
+      return resultTableFilterCpt.value.slice((state.result.table.pageNum - 1) * state.result.table.pageSize, state.result.table.pageNum * state.result.table.pageSize)
+    })
+    const handlePage = ({page, pageSize}: any) => {
+      state.result.table.pageNum = page
+      state.result.table.pageSize = pageSize
+    }
+    const hasTypeCpt = computed(() => {
+      const m = new Map()
+      state.result.table.data.forEach(v => {
+        m.set(v.type, v.type)
+      })
+      const arr: any = []
+      m.forEach(v => {
+        arr.push({
+          dictValue: v,
+          dictLabel: store.getters['dictionary/elementTypeMap'].get(v)
+        })
+      })
+      return arr
+    })
+    const onSearch = () => {
+      state.result.table.pageNum = 1
+      state.result.form = JSON.parse(JSON.stringify(state.result.tempForm))
+    }
+    const onReset = () => {
+      state.result.tempForm = {
+        name: '',
+        type: ''
+      }
+      onSearch()
+    }
     onMounted(() => {
+      initData()
+      state.result.form = JSON.parse(JSON.stringify(state.result.tempForm))
     })
     return {
       ...toRefs(state),
+      mapDraw,
+      mapClear,
+      resultTableFilterCpt,
+      resultTableDataCpt,
+      handlePage,
+      hasTypeCpt,
+      onSearch,
+      onReset
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
+.select-com {
+  position: fixed;
+  width: 404px;
+  height: calc(100% - 100px);
+  display: flex;
+  flex-direction: column;
+  .draw {
+    width: 100%;
+    background-color: #FFFFFF;
+    padding: 12px 14px;
+    .tools {
+      display: flex;
+      align-items: center;
+      .label {
+        width: 72px;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #4C4C4C;
+        display: flex;
+        align-items: center;
+      }
+      .right {
+        flex: 1;
+        height: 36px;
+        background-color: rgba(170, 198, 238, 0.2);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 10px;
+        .item {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #4C4C4C;
+          >img {
+            margin-right: 8px;
+          }
+          &:hover {
+            color: #1174DB;
+          }
+        }
+        .line {
+          width: 1px;
+          height: 16px;
+          background: linear-gradient(0deg, rgba(17,116,219,0) 0%, rgba(17,116,219,0.99) 50%, rgba(17,116,219,0) 100%);
+        }
+      }
+    }
+  }
+  .result {
+    background-color: #FFFFFF;
+    margin-top: 2px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .head {
+      height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #0096FF;
+      display: flex;
+      align-items: center;
+      padding-left: 14px;
+      border-bottom: 1px solid #EEEEEE;
+    }
+    .chart {
+      height: 212px;
+      width: 100%;
+    }
+    .data {
+      flex: 1;
+      padding: 0 12px 12px 12px;
+      display: flex;
+      flex-direction: column;
+      .form {
+        :deep(.el-form-item) {
+          margin-bottom: 7px;
+        }
+        .two {
+          display: flex;
+          align-items: flex-start;
+          .cus-form-column {
+            flex: 1;
+            margin-right: 8px;
+          }
+        }
+      }
+      .table {
+        flex: 1;
+      }
+    }
+  }
+}
 </style>

src/views/gis/layout/tools/tool-draw.ts

@@ -14,7 +14,8 @@ import {unByKey} from "ol/Observable";
 import {formatPosition} from "@/utils/easyMap";
 import {isValue} from "@/utils/util";
 import {fromCircle} from "ol/geom/Polygon";
-import PointIcon from '@/assets/images/gis-layout/gis-layout-tools_tool-bz_icon.png'
+// @ts-ignore
+import PointIcon from "@/assets/images/gis-layout/gis-layout-tools_tool-bz_icon.png"
 
 const globalLineDash = [
     [0, 0], //实线