瓦片

src/views/ship-test/business/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="business">
-    <ShipFilterCom class="ship-filter"/>
-    <ShipInfoCom class="ship-info"/>
+    <ShipFilterCom class="ship-filter" :map="map" :mapFunc="mapFunc"/>
+    <ShipInfoCom class="ship-info" :map="map" :mapFunc="mapFunc"/>
   </div>
 </template>
 
@@ -30,7 +30,10 @@ export default defineComponent({
     ShipFilterCom,
     ShipInfoCom
   },
-  props: {},
+  props: {
+    map: {},
+    mapFunc: {},
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();

src/views/ship-test/business/ship-filter.vue

@@ -21,240 +21,27 @@
               </div>
               <div class="filters">
                 <template v-for="item in shipSource">
-                  <div v-if="typeof item === 'object'" class="f-checkbox __hover" :class="{active: item.active}" v-html="item.name" @click="handleSource(item)"/>
+                  <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.name" @click="handleSource(item)"/>
                 </template>
               </div>
-<!--              <template v-if="tempActiveLayerComputed">-->
-<!--                &lt;!&ndash;        船速&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].speedMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">船速</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <template v-if="shipTempParams[tempActiveLayerComputed].speedMapper.cus.active">-->
-<!--                        <div class="t-r-cancel __hover" @click="shipTempParams[tempActiveLayerComputed].speedMapper.cus.active = false">取消自定义</div>-->
-<!--                      </template>-->
-<!--                      <template v-else>-->
-<!--                        <div class="t-r-cus __hover" @click="shipTempParams[tempActiveLayerComputed].speedMapper.cus.active = true">自定义</div>-->
-<!--                        <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].speedMapper.list.some(v => !v.active)}" @click="handleSubFilterSelectAll('speedMapper.list')"><div class="block"/>全选</div>-->
-<!--                      </template>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-if="shipTempParams[tempActiveLayerComputed].speedMapper.cus.active">-->
-<!--                      <div class="cus-value">-->
-<!--                        <CusFormColumn-->
-<!--                          required-->
-<!--                          v-model:param="shipTempParams[tempActiveLayerComputed].speedMapper.cus.sVal"-->
-<!--                          type="number"-->
-<!--                          :min="0"-->
-<!--                          v-model:max="shipTempParams[tempActiveLayerComputed].speedMapper.cus.eVal"-->
-<!--                        />-->
-<!--                        <div class="divider"></div>-->
-<!--                        <CusFormColumn-->
-<!--                          required-->
-<!--                          v-model:param="shipTempParams[tempActiveLayerComputed].speedMapper.cus.eVal"-->
-<!--                          type="number"-->
-<!--                          v-model:min="shipTempParams[tempActiveLayerComputed].speedMapper.cus.sVal"-->
-<!--                        />-->
-<!--                        <div class="unit">(节)</div>-->
-<!--                      </div>-->
-<!--                    </template>-->
-<!--                    <template v-else>-->
-<!--                      <template v-for="item in shipTempParams[tempActiveLayerComputed].speedMapper.list">-->
-<!--                        <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                      </template>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        船长&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].longMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">船长</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <template v-if="shipTempParams[tempActiveLayerComputed].longMapper.cus.active">-->
-<!--                        <div class="t-r-cancel __hover" @click="shipTempParams[tempActiveLayerComputed].longMapper.cus.active = false">取消自定义</div>-->
-<!--                      </template>-->
-<!--                      <template v-else>-->
-<!--                        <div class="t-r-cus __hover" @click="shipTempParams[tempActiveLayerComputed].longMapper.cus.active = true">自定义</div>-->
-<!--                        <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].longMapper.list.some(v => !v.active)}" @click="handleSubFilterSelectAll('longMapper.list')"><div class="block"/>全选</div>-->
-<!--                      </template>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-if="shipTempParams[tempActiveLayerComputed].longMapper.cus.active">-->
-<!--                      <div class="cus-value">-->
-<!--                        <CusFormColumn-->
-<!--                          required-->
-<!--                          v-model:param="shipTempParams[tempActiveLayerComputed].longMapper.cus.sVal"-->
-<!--                          type="number"-->
-<!--                          :min="0"-->
-<!--                          v-model:max="shipTempParams[tempActiveLayerComputed].longMapper.cus.eVal"-->
-<!--                        />-->
-<!--                        <div class="divider"></div>-->
-<!--                        <CusFormColumn-->
-<!--                          required-->
-<!--                          v-model:param="shipTempParams[tempActiveLayerComputed].longMapper.cus.eVal"-->
-<!--                          type="number"-->
-<!--                          v-model:min="shipTempParams[tempActiveLayerComputed].longMapper.cus.sVal"-->
-<!--                        />-->
-<!--                        <div class="unit">(米)</div>-->
-<!--                      </div>-->
-<!--                    </template>-->
-<!--                    <template v-else>-->
-<!--                      <template v-for="item in shipTempParams[tempActiveLayerComputed].longMapper.list">-->
-<!--                        <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                      </template>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        船籍港&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].portMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">船籍港</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].portMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('portMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].portMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        国籍&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].cityMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">国籍</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].cityMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('cityMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].cityMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        船舶类型&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].shipTypeMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">船舶类型</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].shipTypeMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('shipTypeMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].shipTypeMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        船舶用途&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].shipUseMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">船舶用途</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].shipUseMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('shipUseMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].shipUseMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        信号源&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].sourceMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">信号源</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].sourceMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('sourceMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].sourceMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        主作业类型&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].workTypeMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">主作业类型</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].workTypeMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('workTypeMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].workTypeMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        主作业方式&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].workMethodMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">主作业方式</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].workMethodMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('workMethodMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].workMethodMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        船舶材质&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].shipMaterialMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">船舶材质</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].shipMaterialMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('shipMaterialMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].shipMaterialMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        目标类型&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed].targetTypeMapper" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">目标类型</div>-->
-<!--                    <div class="t-right">-->
-<!--                      <div class="t-r-all __hover" :class="{active: !shipTempParams[tempActiveLayerComputed].targetTypeMapper.some(v => !v.active)}" @click="handleSubFilterSelectAll('targetTypeMapper')"><div class="block"/>全选</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <template v-for="item in shipTempParams[tempActiveLayerComputed].targetTypeMapper">-->
-<!--                      <div class="f-checkbox __hover" :class="{active: item.active}" v-html="item.label" @click="item.active = !item.active"/>-->
-<!--                    </template>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--                &lt;!&ndash;        目标（航迹）可信度&ndash;&gt;-->
-<!--                <template v-if="shipTempParams[tempActiveLayerComputed]?.believe > -1" >-->
-<!--                  <div class="title">-->
-<!--                    <div class="t-label">目标（航迹）可信度</div>-->
-<!--                  </div>-->
-<!--                  <div class="filters">-->
-<!--                    <div class="cus-value">-->
-<!--                      <CusFormColumn-->
-<!--                        required-->
-<!--                        v-model:param="shipTempParams[tempActiveLayerComputed].believe"-->
-<!--                        type="number"-->
-<!--                        :max="100"-->
-<!--                        :min="0"-->
-<!--                      />-->
-<!--                      <div class="unit">（%）以上</div>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--              </template>-->
-<!--              <div class="buttons">-->
-<!--                <div class="submit __hover" @click="onSubmit">确定</div>-->
-<!--              </div>-->
+              <template v-for="p in shipSource.filter(v => v.active)?.[0]?.params">
+                <template v-if="p?.dict?.length > 0">
+                  <div class="title">
+                    <div class="t-label">{{ p.name }}</div>
+                    <div class="t-right">
+                      <div class="t-r-all __hover" :class="{active: p.dict.every(v => v.active)}" @click="handleParamsAll(p)"><div class="block"/>全选</div>
+                    </div>
+                  </div>
+                  <div class="filters">
+                    <template v-for="d in p.dict">
+                      <div class="f-checkbox __hover" :class="{active: d.active}" v-html="d.name" @click="d.active = !d.active"/>
+                    </template>
+                  </div>
+                </template>
+              </template>
+              <div class="buttons" v-if="shipSource.filter(v => v.active)?.[0]">
+                <div class="submit __hover" @click="onSubmit">确定</div>
+              </div>
             </div>
           </div>
         </div>
@@ -284,12 +71,16 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
-import {shipTestShipFilterGetConfig} from "@/api/modules/ship-test/ship-filter";
+import * as source from "ol/source";
+import * as layer from "ol/layer";
 
 export default defineComponent({
   name: '',
   components: {},
-  props: {},
+  props: {
+    map: <any>{},
+    mapFunc: <any>{},
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
@@ -297,19 +88,144 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       isActive: true,
-      shipSource: []
+      shipSource: <any>[],
+      shipParams: <any>null,
+      zoomWMS: true,
+      wsMap: new Map()
+    })
+    const initSource = () => {
+      that.$api.shipTestShipFilterGetConfig().then(res => {
+        state.shipSource = res.data
+      })
+    }
+    watch(() => props.map, (n) => {
+      if (n) {
+        initMap()
+      }
+    })
+    const initMap = () => {
+      props.map?.on('moveend', (e) => {
+        console.log(e)
+        const zoom = e.map.getView().getZoom()
+        if (zoom > 13) {
+          state.zoomWMS = false
+        } else {
+          state.zoomWMS = true
+        }
+      })
+    }
+    watch(() => state.zoomWMS, () => {
+      refreshMap()
     })
     const handleSource = (source) => {
+      state.shipSource.forEach(v => {
+        v.active = source.id === v.id ? true : false
+      })
+    }
+    const handleParamsAll = (params) => {
+      const flag = params.dict.every(v => v.active)
+      params.dict.forEach(v => {
+        v.active = !flag
+      })
+    }
+    const onSubmit = () => {
+      state.shipParams = JSON.parse(JSON.stringify(state.shipSource.filter(v => v.active)[0]))
+      refreshMap()
+    }
+    const shipCqlComputer = computed(() => {
+      let strArr: any = []
+      state.shipParams.params.forEach(p => {
+        if (p.dict.length > 0) {
+          if (p.dict.every(v => !v.active)) {
+            strArr.push(`(${p.defaultCql})`)
+          } else {
+            strArr.push(p.dict.filter(v => v.active).map(v => `(${v.cql})`).join(' or '))
+          }
+        }
+      })
+      return strArr.length > 0 ? strArr.map(v => `(${v})`).join(' and ') : null
+    })
+    const initWMSShip = () => {
+      const hasLayer = props.map.getLayers().getArray().filter(v => v.get('layerName') === 'WMSShip')?.[0]
+      if (hasLayer) {
+        props.map.removeLayer(hasLayer)
+      }
+      const p:any = {
+        'FORMAT': 'image/png8',
+        'VERSION': '1.1.1',
+        "LAYERS": state.shipParams.tileName,
+        "exceptions": 'application/vnd.ogc.se_inimage',
+        refresh: new Date().getTime()
+      }
+      if (shipCqlComputer.value) {
+        p.CQL_FILTER = shipCqlComputer.value
+      }
+      const _tileWMS = new source.TileWMS({
+        url: state.shipParams.tileUrl,
+        params: p
+      })
+      const layerTile = new layer.Tile({
+        source: _tileWMS,
+        zIndex: 3,
+      })
+      layerTile.set('layerName', 'WMSShip')
+      props.map.addLayer(layerTile)
+    }
+    const initWebSocketShip = () => {
+      const str = {
+        cql: <any>null,
+      }
+      if (state.zoomWMS) {
+        str.cql = ''
+      } else {
+        str.cql = `(BBOX(location, ${props.mapFunc.getBBOX().join(',')}) and ${shipCqlComputer.value})`
+      }
+      if (state.wsMap.has(state.shipParams.id)) {
+        state.wsMap.get(state.shipParams.id).websocket.send(JSON.stringify(str))
+      } else {
+        const ws = new WebSocket(state.shipParams.wsUrl)
+        state.wsMap.set(state.shipParams.id, {
+          websocket: ws,
+          layer: null
+        })
+        ws.onopen = (e) => {
+          ws.send(JSON.stringify(str))
+        }
+        ws.onmessage = (e) => {
+          try {
+            const json = JSON.parse(e.data)
+            const s = 'json.' + state.shipParams.wsDataFlag
+            const data = eval(s)
+            console.log(data)
+          } catch (e) {
+          }
+        }
+      }
+    }
+    const refreshMap = () => {
+      if (state.shipParams) {
+        if (state.zoomWMS) {
+          initWMSShip()
+        } else {
+          const hasLayer = props.map.getLayers().getArray().filter(v => v.get('layerName') === 'WMSShip')?.[0]
+          if (hasLayer) {
+            props.map.removeLayer(hasLayer)
+          }
+          initWebSocketShip()
+        }
+      }
+    }
+    const initShip = () => {
 
     }
     onMounted(() => {
-      that.$api.shipTestShipFilterGetConfig().then(res => {
-        state.shipSource = res.data
-      })
+      initSource()
     })
     return {
       ...toRefs(state),
-      handleSource
+      handleSource,
+      handleParamsAll,
+      onSubmit
     }
   },
 })

src/views/ship-test/manage/params/detail.vue

@@ -26,12 +26,17 @@
             v-model:param="cusDetail.sort"/>
         <CusFormColumn
             :span="24"
+            required
+            label="默认cql"
+            type="textarea"
+            v-model:param="cusDetail.defaultCql"
+            :rows="4"/>
+        <CusFormColumn
+            :span="24"
             label="备注"
             type="textarea"
             v-model:param="cusDetail.remark"
-            :rows="4"
-            maxlength="225"
-            show-word-limit/>
+            :rows="4"/>
       </CusForm>
     </div>
   </CusDialog>

src/views/ship-test/manage/params/dict-detail.vue

@@ -45,9 +45,7 @@
             label="备注"
             type="textarea"
             v-model:param="cusDetail.remark"
-            :rows="4"
-            maxlength="225"
-            show-word-limit/>
+            :rows="4"/>
       </CusForm>
     </div>
   </CusDialog>

src/views/ship-test/manage/params/dict-list.vue

@@ -31,8 +31,8 @@
         <template #buttons>
           <btn-add @click="onAdd"/>
           <btn-delete @click="onDel()"/>
-          <btn-enable @click="switchActiveMore(0)"/>
-          <btn-disable @click="switchActiveMore(1)"/>
+          <btn-enable @click="switchActiveMore(0)" title="批量激活"/>
+          <btn-disable @click="switchActiveMore(1)" title="批量不激活"/>
         </template>
         <template #table>
           <CusTable

src/views/ship-test/manage/params/index.vue

@@ -146,6 +146,7 @@ export default defineComponent({
       //  表格表头
       tableHead: [
         {value: 'name', label: '名称', show:true,},
+        {value: 'defaultCql', label: '默认cql', show:true,},
         {value: 'sort', label: '排序', show:true, sort: true},
         {value: 'updateTime', label: '更新时间', show:true, sort: true},
         {value: 'caozuo', label: '操作', show:true}

src/views/ship-test/manage/source/detail.vue

@@ -30,9 +30,7 @@
             label="备注"
             type="textarea"
             v-model:param="cusDetail.remark"
-            :rows="4"
-            maxlength="225"
-            show-word-limit/>
+            :rows="4"/>
         <div class="__cus-title_2">瓦片地图</div>
         <CusFormColumn
           :span="24"