Accueil Explorer Aide
S'inscrire Connexion
ztpt-dev
/
gis-one-map-web
Suivre 4
Voter 0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

定位界面

CzRger il y a 1 an
Parent
6d52ba793b
commit
3cbbc30d03
9 fichiers modifiés avec 331 ajouts et 161 suppressions
Vue séparée Afficher les stats Diff
  1. 0 1
      index.html
  2. BIN
      src/assets/images/cus/cus-tab_type2-active.png
  3. BIN
      src/assets/images/cus/cus-title_type2-icon.png
  4. 38 57
      src/components/cus/CusTab.vue
  5. 1 45
      src/style/cus.scss
  6. 1 0
      src/style/index.scss
  7. 7 5
      src/views/gis/layout/index.vue
  8. 60 49
      src/views/gis/layout/tools/element.vue
  9. 224 4
      src/views/gis/layout/tools/position.vue

+ 0 - 1
index.html
Voir le fichier 

@@ -3,7 +3,6 @@
 
 
 <head>
 
   <meta charset="UTF-8" />
 
-<!--  <link rel="icon" href="/bitbug_favicon.ico" />-->
 
   <meta name="referrer" content="no-referrer" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <meta name="keywords" content="海南省公安厅、综合态势防控平台" />

BIN
src/assets/images/cus/cus-tab_type2-active.png
Voir le fichier


BIN
src/assets/images/cus/cus-title_type2-icon.png
Voir le fichier


+ 38 - 57
src/components/cus/CusTab.vue
Voir le fichier 

@@ -53,70 +53,51 @@ export default defineComponent({
 
 </script>
 
 
 <style scoped lang="scss">
 
-  .cus-tab {
 
-    height: 40px;
 
-    width: 100%;
 
-    border-bottom: 1px solid #DCDFE5;;
 
+.cus-tab {
 
+  height: 40px;
 
+  width: 100%;
 
+  border-bottom: 1px solid #EEEEEE;
 
+  display: flex;
 
+  align-items: center;
 
+  box-sizing: border-box;
 
+  .cus-tab-item {
 
+    height: 100%;
 
     display: flex;
 
     align-items: center;
 
-    box-sizing: border-box;
 
-    .cus-tab-item {
 
-      height: 100%;
 
-      display: flex;
 
-      align-items: center;
 
-      justify-content: center;
 
-      position: relative;
 
-      font-size: 14px;
 
-      font-family: PingFang SC-Regular, PingFang SC;
 
-      font-weight: 400;
 
-      color: #606266;
 
-      margin-right: 16px;
 
-      &:last-child {
 
-        margin-right: 0;
 
-      }
 
-      &.active {
 
-        &:after {
 
-          content: '';
 
-          position: absolute;
 
-          bottom: 0;
 
-        }
 
-      }
 
+    justify-content: center;
 
+    position: relative;
 
+    font-size: 14px;
 
+    font-family: Microsoft YaHei;
 
+    font-weight: 400;
 
+    color: #757575;
 
+    &:last-child {
 
+      margin-right: 0;
 
     }
 
-    &.cus-tab-type1 {
 
-      .cus-tab-item {
 
-        padding: 0 4px;
 
-        &.active {
 
-          color: #0062E9;
 
-          &:after {
 
-            width: 100%;
 
-            height: 2px;
 
-            bottom: -1px;
 
-            background-color: #0062E9;
 
-          }
 
-        }
 
+    &.active {
 
+      &:after {
 
+        content: '';
 
+        position: absolute;
 
+        bottom: 0;
 
       }
 
     }
 
-    &.cus-tab-type2 {
 
-      .cus-tab-item {
 
-        padding: 0 4px;
 
-        min-width: 77px;
 
-        margin-right: 6px;
 
-        &.active {
 
-          font-weight: 500;
 
-          color: #0062E9;
 
-          &:after {
 
-            width: 100%;
 
-            height: 5px;
 
-            bottom: -3px;
 
-            background-image: url("@/assets/images/cus/cus-tab_type2-active.png");
 
-            background-repeat: no-repeat;
 
-            background-size: 100% 100%;
 
-          }
 
+  }
 
+  &.cus-tab-type1 {
 
+    .cus-tab-item {
 
+      padding: 0 4px;
 
+      min-width: 60px;
 
+      &.active {
 
+        color: #0069FF;
 
+        &:after {
 
+          width: 100%;
 
+          height: 3px;
 
+          bottom: -1px;
 
+          background-color: #0062E9;
 
         }
 
       }
 
     }
 
-    .cus-tab-slot {
 
-      margin-left: auto;
 
-    }
 
   }
 
+  .cus-tab-slot {
 
+    margin-left: auto;
 
+  }
 
+}
 
 </style>

+ 1 - 45
src/style/cus.scss
Voir le fichier 

@@ -247,48 +247,4 @@
 
     }
 
   }
 
 }
 
-.__cus-title_1 {
 
-  width: 100%;
 
-  height: 32px;
 
-  font-size: 14px;
 
-  font-family: PingFang SC-Regular, PingFang SC;
 
-  font-weight: 400;
 
-  color: #0062E9;
 
-  display: flex;
 
-  align-items: center;
 
-  position: relative;
 
-  padding-left: 10px;
 
-  box-sizing: border-box;
 
-  &:before {
 
-    content: '';
 
-    position: absolute;
 
-    left: 0;
 
-    width: 2px;
 
-    height: 14px;
 
-    background-color: #0062E9;
 
-  }
 
-}
 
-.__cus-title_2 {
 
-  width: 100%;
 
-  height: 40px;
 
-  background: rgba(0,98,233,0.05);
 
-  font-size: 14px;
 
-  font-family: PingFang SC-Medium, PingFang SC;
 
-  font-weight: 500;
 
-  color: #303133;
 
-  display: flex;
 
-  align-items: center;
 
-  position: relative;
 
-  padding-left: 38px;
 
-  box-sizing: border-box;
 
-  &:before {
 
-    content: '';
 
-    position: absolute;
 
-    left: 10px;
 
-    width: 18px;
 
-    height: 18px;
 
-    background-image: url("@/assets/images/cus/cus-title_type2-icon.png");
 
-    background-repeat: no-repeat;
 
-    background-size: 100% 100%;
 
-  }
 
-}
 
+

+ 1 - 0
src/style/index.scss
Voir le fichier 

@@ -6,6 +6,7 @@
 
   outline: none;  // dom元素选中带边框
 
   -webkit-user-drag: none;
 
   line-height: 1;
 
+  box-sizing: border-box;
 
 }
 
 
 html, body {

+ 7 - 5
src/views/gis/layout/index.vue
Voir le fichier 

@@ -43,8 +43,8 @@
 
           </div>
 
         </template>
 
       </div>
 
-      <div class="gt-tools-component" v-if="toolsType && toolsType !== 'clear'">
 
-        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc"/>
 
+      <div class="gt-tools-component" v-if="toolsType && toolsType !== 'clear' && toolsCom">
 
+        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc" v-model:transfer="toolsParams[toolsType]"/>
 
       </div>
 
     </div>
 
     <div class="gis-content">
 
@@ -64,7 +64,8 @@ import {
 
   getCurrentInstance,
 
   ComponentInternalInstance,
 
   toRefs,
 
-  nextTick
 
+  nextTick,
 
+  markRaw
 
 } from 'vue'
 
 import {useStore} from 'vuex'
 
 import {useRouter, useRoute} from 'vue-router'
 
@@ -104,7 +105,8 @@ export default defineComponent({
 
       toolsType: '',
 
       toolsCom: null,
 
       toolsParams: {
 
-
 
+        element: null,
 
+        position: null
 
       }
 
     })
 
     const ToolsMapper = [
 
@@ -178,7 +180,7 @@ export default defineComponent({
 
       if (item.value === 'clear') {
 
 
       } else {
 
-        state.toolsCom = item.com
 
+        state.toolsCom = markRaw(item.com)
 
         state.toolsType = (state.toolsType === item.value ? '' : item.value)
 
       }
 
     }

+ 60 - 49
src/views/gis/layout/tools/element.vue
Voir le fichier 

@@ -6,7 +6,7 @@
 
       </div>
 
     </div>
 
     <div class="list">
 
-      <template v-for="item in list">
 
+      <template v-for="item in cusTransfer.list">
 
         <div class="check __hover" @click="switchItemActive(item)">
 
           <div class="__check" :class="{active: item.active}"/>{{item.label}}
 
         </div>
 
@@ -48,7 +48,8 @@ export default defineComponent({
 
     },
 
     mapFunc: {
 
       required: true
 
-    }
 
+    },
 
+    transfer: {}
 
   },
 
   setup(props, {emit}) {
 
     const store = useStore();
 
@@ -56,54 +57,57 @@ export default defineComponent({
 
     const route = useRoute();
 
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
 
     const state = reactive({
 
-      list: <any>[
 
-        {
 
-          label: '处置力量',
 
-          active: false,
 
-          children: [
 
-            {label: '海岸警察', value: 'hajc', active: false},
 
-            {label: '缉私警', value: 'jsj', active: false},
 
-            {label: '网格员', value: 'wgy', active: false},
 
-          ]
 
-        },
 
-        {
 
-          label: '危险车辆', value: 'wxcl', active: true
 
-        },
 
-        {
 
-          label: '设备资源',
 
-          active: true,
 
-          children: [
 
-            {label: '公安类设备', value: 'galsb', active: true},
 
-            {label: '社会类设备', value: 'shlsb', active: true},
 
-            {label: '民用类设备', value: 'mylsb', active: true},
 
-          ]
 
-        },
 
-        {
 
-          label: '企业',
 
-          active: false,
 
-          children: [
 
-            {label: '零关税自用进口生产设备', value: 'lgszyjkscsb', active: false},
 
-            {label: '加工增值免关税', value: 'jgzzmgs', active: false},
 
-            {label: '零关税进口原辅料', value: 'lgsjkyfl', active: false},
 
-          ]
 
-        },
 
-        {
 
-          label: '景区', value: 'jq', active: false
 
-        },
 
-        {
 
-          label: '旅馆', value: 'lg', active: false
 
-        },
 
-        {
 
-          label: '出租屋', value: 'czw', active: false
 
-        },
 
-        {
 
-          label: '火车站', value: 'hcz', active: false
 
-        },
 
-      ]
 
+      transfer: <any>props.transfer,
 
+      cusTransfer: <any>{
 
+        list: <any>[
 
+          {
 
+            label: '处置力量',
 
+            active: false,
 
+            children: [
 
+              {label: '海岸警察', value: 'hajc', active: false},
 
+              {label: '缉私警', value: 'jsj', active: false},
 
+              {label: '网格员', value: 'wgy', active: false},
 
+            ]
 
+          },
 
+          {
 
+            label: '危险车辆', value: 'wxcl', active: true
 
+          },
 
+          {
 
+            label: '设备资源',
 
+            active: true,
 
+            children: [
 
+              {label: '公安类设备', value: 'galsb', active: true},
 
+              {label: '社会类设备', value: 'shlsb', active: true},
 
+              {label: '民用类设备', value: 'mylsb', active: true},
 
+            ]
 
+          },
 
+          {
 
+            label: '企业',
 
+            active: false,
 
+            children: [
 
+              {label: '零关税自用进口生产设备', value: 'lgszyjkscsb', active: false},
 
+              {label: '加工增值免关税', value: 'jgzzmgs', active: false},
 
+              {label: '零关税进口原辅料', value: 'lgsjkyfl', active: false},
 
+            ]
 
+          },
 
+          {
 
+            label: '景区', value: 'jq', active: false
 
+          },
 
+          {
 
+            label: '旅馆', value: 'lg', active: false
 
+          },
 
+          {
 
+            label: '出租屋', value: 'czw', active: false
 
+          },
 
+          {
 
+            label: '火车站', value: 'hcz', active: false
 
+          },
 
+        ]
 
+      }
 
     })
 
     const isSelectAllCpt = computed(() => {
 
       let flag = true
 
-      state.list.forEach(p => {
 
+      state.cusTransfer.list.forEach(p => {
 
         if (!p.active) {
 
           flag = false
 
         }
 
@@ -116,15 +120,16 @@ export default defineComponent({
 
       return flag
 
     })
 
     const switchListActive = (flag) => {
 
-      state.list.forEach(p => {
 
+      state.cusTransfer.list.forEach(p => {
 
         p.active = flag
 
         p.children?.forEach(s => {
 
           s.active = flag
 
         })
 
       })
 
+      emit('update:transfer', state.cusTransfer)
 
     }
 
     const switchItemActive = (item) => {
 
-      state.list.forEach(p => {
 
+      state.cusTransfer.list.forEach(p => {
 
         if (`${p.label}_${p.value}` === `${item.label}_${item.value}`) {
 
           p.active = !p.active
 
           p.children?.forEach(v => {
 
@@ -138,8 +143,14 @@ export default defineComponent({
 
           }
 
         })
 
       })
 
+      emit('update:transfer', state.cusTransfer)
 
     }
 
     onMounted(() => {
 
+      if (props.transfer) {
 
+        state.cusTransfer = props.transfer
 
+      } else {
 
+        emit('update:transfer', state.cusTransfer)
 
+      }
 
     })
 
     return {
 
       ...toRefs(state),

+ 224 - 4
src/views/gis/layout/tools/position.vue
Voir le fichier 

@@ -1,6 +1,96 @@
 
 <template>
 
-  <div class="position-com">
 
-    定位
 
+  <div class="position-com __box-shadow">
 
+    <CusTab :tabs="[
 
+          {name: '度', value: 'd'},
 
+          {name: '度分', value: 'df'},
 
+          {name: '度分秒', value: 'dfm'},
 
+      ]"  v-model:param="cusTransfer.tab" style="padding-left: 12px;"/>
 
+    <div class="content">
 
+      <div class="item">
 
+        <div class="input">
 
+          <div class="label">经度：</div>
 
+          <template v-if="cusTransfer.tab === 'd'">
 
+            <CusFormColumn
 
+                link="number"
 
+                :decimal="8"
 
+                v-model:param="cusTransfer.format.d.lon1"/>
 
+            <div class="unit">°</div>
 
+          </template>
 
+          <template v-else-if="cusTransfer.tab === 'df'">
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.df.lon1"/>
 
+            <div class="unit">°</div>
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.df.lon2"/>
 
+            <div class="unit">‘</div>
 
+          </template>
 
+          <template v-else-if="cusTransfer.tab === 'dfm'">
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.dfm.lon1"/>
 
+            <div class="unit">°</div>
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.dfm.lon2"/>
 
+            <div class="unit">‘</div>
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.dfm.lon3"/>
 
+            <div class="unit">"</div>
 
+          </template>
 
+        </div>
 
+        <div class="switch __hover" @click="cusTransfer.format.isEast = !cusTransfer.format.isEast">
 
+          <div class="switch-item" :class="{active: cusTransfer.format.isEast}">E</div>
 
+          <div class="switch-item" :class="{active: !cusTransfer.format.isEast}">W</div>
 
+        </div>
 
+      </div>
 
+      <div class="item">
 
+        <div class="input">
 
+          <div class="label">纬度：</div>
 
+          <template v-if="cusTransfer.tab === 'd'">
 
+            <CusFormColumn
 
+                link="number"
 
+                :decimal="8"
 
+                v-model:param="cusTransfer.format.d.lat1"/>
 
+            <div class="unit">°</div>
 
+          </template>
 
+          <template v-else-if="cusTransfer.tab === 'df'">
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.df.lat1"/>
 
+            <div class="unit">°</div>
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.df.lat2"/>
 
+            <div class="unit">‘</div>
 
+          </template>
 
+          <template v-else-if="cusTransfer.tab === 'dfm'">
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.dfm.lat1"/>
 
+            <div class="unit">°</div>
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.dfm.lat2"/>
 
+            <div class="unit">‘</div>
 
+            <CusFormColumn
 
+                link="number"
 
+                v-model:param="cusTransfer.format.dfm.lat3"/>
 
+            <div class="unit">"</div>
 
+          </template>
 
+        </div>
 
+        <div class="switch __hover" @click="cusTransfer.format.isSouth = !cusTransfer.format.isSouth">
 
+          <div class="switch-item" :class="{active: cusTransfer.format.isSouth}">S</div>
 
+          <div class="switch-item" :class="{active: !cusTransfer.format.isSouth}">N</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <div class="buttons">
 
+      <div class="__hover">确定</div>
 
+      <div class="__hover cancel">取消</div>
 
+    </div>
 
   </div>
 
 </template>
 
 
@@ -30,15 +120,48 @@ export default defineComponent({
 
     },
 
     mapFunc: {
 
       required: true
 
-    }
 
+    },
 
+    transfer: {}
 
   },
 
   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({
 
+      transfer: <any>props.transfer,
 
+      cusTransfer: <any>{
 
+        tab: 'd',
 
+        format: {
 
+          d: {
 
+            lon1: null,
 
+            lat1: null,
 
+          },
 
+          df: {
 
+            lon1: null,
 
+            lon2: null,
 
+            lat1: null,
 
+            lat2: null,
 
+          },
 
+          dfm: {
 
+            lon1: null,
 
+            lon2: null,
 
+            lon3: null,
 
+            lat1: null,
 
+            lat2: null,
 
+            lat3: null,
 
+          },
 
+          isEast: true,
 
+          isSouth: false,
 
+        },
 
+      }
 
+    })
 
     onMounted(() => {
 
+      if (props.transfer) {
 
+        state.cusTransfer = props.transfer
 
+      } else {
 
+        emit('update:transfer', state.cusTransfer)
 
+      }
 
     })
 
     return {
 
       ...toRefs(state),
 
@@ -48,4 +171,101 @@ export default defineComponent({
 
 </script>
 
 
 <style scoped lang="scss">
 
+.position-com {
 
+  width: 100%;
 
+  background-color: #FFFFFF;
 
+  padding-bottom: 12px;
 
+  .content {
 
+    display: flex;
 
+    flex-direction: column;
 
+    padding: 0 12px;
 
+    margin-top: 12px;
 
+    .item {
 
+      width: 100%;
 
+      display: flex;
 
+      align-items: center;
 
+      &:not(:last-child) {
 
+        margin-bottom: 8px;
 
+      }
 
+      .input {
 
+        display: flex;
 
+        align-items: center;
 
+        flex: 1;
 
+        .label {
 
+          width: 44px;
 
+          font-size: 14px;
 
+          font-family: Microsoft YaHei;
 
+          font-weight: 400;
 
+          color: #434343;
 
+        }
 
+        :deep(.cus-form-column) {
 
+          flex: 1;
 
+          height: 36px;
 
+          max-width: unset;
 
+        }
 
+        .unit {
 
+          margin-left: 7px;
 
+          margin-right: 12px;
 
+          align-self: flex-start;
 
+          margin-top: 3px;
 
+        }
 
+      }
 
+      .switch {
 
+        width: 50px;
 
+        height: 28px;
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+        border: 2px solid #108DF3;
 
+        border-radius: 4px;
 
+        .switch-item {
 
+          width: 16px;
 
+          height: 16px;
 
+          font-size: 14px;
 
+          font-family: Microsoft YaHei;
 
+          font-weight: 400;
 
+          color: #108DF3;
 
+          border-radius: 2px;
 
+          display: flex;
 
+          align-items: center;
 
+          justify-content: center;
 
+          margin: 0 3px;
 
+          &.active {
 
+            font-size: 12px;
 
+            color: #FFFFFF;
 
+            background-color: #108DF3;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .buttons {
 
+    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>