vue2-client 1.19.61 → 1.19.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.19.61",
+  "version": "1.19.63",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -62,6 +62,7 @@
     "vue": "^2.7.14",
     "vue-codemirror": "4.0.6",
     "vue-color": "2.7.0",
+    "ol": "10.3.1",
     "vue-draggable-resizable": "^2.3.0",
     "vue-i18n": "^8.28.2",
     "vue-json-viewer": "^2.2.22",

package/src/assets/svg/unknown-icon.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
+  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0C229.376 0 0 229.376 0 512c0 282.624 229.376 512 512 512 282.624 0 512-229.376 512-512 0-282.624-229.376-512-512-512z" fill="#6E6E6E" opacity=".15"></path><path d="M646.2464 284.4672q-43.349333-39.936-115.165867-39.936-80.9984 0-128.341333 47.240533-47.377067 46.250667-47.377067 130.116267v0.6144l0.068267 0.6144q6.382933 43.997867 47.4112 43.997867 40.994133 0 48.981333-43.690667l0.136534-0.750933v-0.785067q0-43.997867 15.2576-65.1264l0.1024-0.136533 0.068266-0.136534q16.896-25.3952 58.4704-25.3952 31.880533 0 49.3568 17.783467 17.408 18.909867 17.408 49.322667 0 23.722667-16.827733 44.8512l-8.328533 9.557333q-67.9936 62.088533-82.363734 92.4672c-7.304533 14.404267-11.946667 26.4192-13.994666 36.078933l-0.068267 0.273067-0.034133 0.273067c-2.628267 18.602667-0.7168 33.211733 5.802666 43.895466 6.826667 11.298133 18.295467 17.749333 34.269867 19.3536 31.812267 3.1744 49.493333-8.704 53.077333-35.566933 2.321067-10.581333 5.358933-19.456 9.045334-26.7264 1.297067-2.594133 2.389333-4.7104 3.1744-6.382933 0.512-1.024 1.297067-2.525867 2.389333-4.437334 0.170667-0.341333 0.682667-1.024 1.4336-2.116266q1.3312-1.774933 1.911467-2.730667a30.890667 30.890667 0 0 0 1.672533-3.140267 13.277867 13.277867 0 0 1 0.682667-1.365333 13.994667 13.994667 0 0 1 1.058133-1.058133 29.013333 29.013333 0 0 0 4.4032-5.358934q0.8192-1.262933 1.160533-1.6384a48.469333 48.469333 0 0 1 5.802667-5.9392 48.469333 48.469333 0 0 0 3.754667-3.652266 20.616533 20.616533 0 0 1 1.501866-1.501867l0.1024-0.068267 0.068267-0.1024q53.248-47.616 61.098667-56.558933l0.273066-0.273067 0.2048-0.3072q27.306667-37.205333 27.306667-92.706133 0-68.608-44.9536-108.8512z m-82.978133 420.522667q-18.466133-17.646933-44.8512-17.646934-25.770667 0-44.202667 17.6128-18.2272 17.373867-18.2272 44.475734c0 18.090667 6.075733 32.904533 18.2272 44.475733q18.432 17.646933 44.202667 17.646933 26.385067 0 44.202666-16.9984 18.5344-17.749333 18.5344-45.124266 0-26.180267-17.681066-44.270934l-0.1024-0.1024-0.1024-0.1024z" fill="#6E6E6E"></path></svg>

package/src/base-client/components/common/AfMap/InfoWindowComponent.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="info-window-content">
+    <!-- 关闭按钮 -->
+    <div class="info-window-header">
+      <h3>{{ title }}</h3>
+      <button class="close-btn" @click="handleClose">×</button>
+    </div>
+
+    <!-- 数据展示 -->
+    <div class="info-window-body">
+      <div v-if="data">
+        {{ data }}
+      </div>
+      <div v-else class="no-data">
+        暂无数据
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoWindowComponent',
+  props: {
+    data: {
+      type: [Object, Array],
+      default: null
+    },
+    title: {
+      type: String,
+      default: '巡检计划详情'
+    }
+  },
+  computed: {
+    // 格式化数据，只显示简单类型（避免显示复杂对象）
+    formattedData() {
+      if (!this.data) return {}
+
+      const result = {}
+      const dataObj = Array.isArray(this.data) ? this.data[0] || {} : this.data
+
+      Object.entries(dataObj).forEach(([key, value]) => {
+        // 只显示简单类型（字符串、数字、布尔值）
+        if (typeof value !== 'object' || value === null) {
+          result[key] = value
+        } else if (Array.isArray(value)) {
+          result[key] = `数组(${value.length}项)`
+        } else {
+          result[key] = '对象'
+        }
+      })
+
+      return result
+    }
+  },
+  methods: {
+    handleClose() {
+      // 触发父组件传递的 close 事件
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.info-window-content {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  max-width: 300px;
+  overflow: hidden;
+}
+
+.info-window-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #1890ff, #096dd9);
+  color: white;
+}
+
+.info-window-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 50%;
+  transition: background-color 0.3s;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.info-window-body {
+  padding: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.data-item {
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.data-item:last-child {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.data-key {
+  font-weight: 600;
+  color: #666;
+  margin-right: 8px;
+}
+
+.data-value {
+  color: #333;
+  word-break: break-all;
+}
+
+.no-data {
+  text-align: center;
+  color: #999;
+  padding: 20px 0;
+}
+</style>

package/src/base-client/components/common/AfMap/components/DeviceLayerPanel/DeviceLayerPanel.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="device-layer-panel">
+    <LayerPanelVertical
+      v-if="mode === 'vertical'"
+      :layerData="layerData"
+      :getDynamicIcon="getDynamicIcon"
+      :handleSvgError="handleSvgError"
+      @select="onSelect"
+    />
+    <LayerPanelHorizontal
+      v-if="mode === 'horizontal'"
+      :layerData="layerData"
+      :getDynamicIcon="getDynamicIcon"
+      :handleSvgError="handleSvgError"
+      @select="onSelect"
+    />
+  </div>
+</template>
+
+<script>
+import LayerPanelVertical from '@vue2-client/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerPanelVertical.vue'
+import LayerPanelHorizontal from '@vue2-client/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerPanelHorizontal.vue'
+
+export default {
+  name: 'DeviceLayerPanel',
+  components: {
+    LayerPanelVertical,
+    LayerPanelHorizontal
+  },
+  props: {
+    /** vertical | horizontal */
+    mode: {
+      type: String,
+      default: 'vertical'
+    },
+    layerData: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    getDynamicIcon: {
+      type: Function,
+      required: true
+    },
+    handleSvgError: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    onSelect (layer) {
+      this.$emit('select', layer)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.device-layer-panel {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="['layer-toggle-button', `layer-toggle-button-${deviceLayer.visible}`]" @click="handleClick">
+    <div class="layer-info">
+      <!-- 动态内容区域 -->
+      <span class="layer-icon" :style="{ color: deviceLayer.color }">
+        <!-- 如果 type 是 'point'，显示动态加载的 SVG -->
+        <span v-if="deviceLayer.iconType === 'point'">
+          <img
+            :src="getDynamicIcon(deviceLayer.icon)"
+            :title="`${deviceLayer.name}`"
+            class="layer-icon"
+            @error="handleSvgError"
+          />
+        </span>
+        <!-- 如果 type 是 'line'，显示一个自定义的线条图标 -->
+        <span v-else-if="deviceLayer.iconType === 'line'">
+          <span :style="{ color: deviceLayer.color, fontWeight: 700 }">一</span>
+        </span>
+        <!-- 未来可以在这里添加其他类型的判断，例如 v-else-if="layer.type === 'polygon'" -->
+        <span v-else>
+          <img
+            :src="getDynamicIcon(deviceLayer.icon)"
+            :title="`${deviceLayer.name}`"
+            class="layer-icon"
+            @error="handleSvgError"
+          />
+        </span>
+      </span>
+      <div>
+        <strong>{{ deviceLayer.name }}</strong>
+        <span class="layer-desc">{{ deviceLayer.desc }}</span>
+      </div>
+    </div>
+    <div class="layer-indicator" :style="{ background: deviceLayer.color }"></div>
+  </div>
+</template>
+
+<script>
+import { getDynamicIcon, handleSvgError } from '@/utils/icons'
+
+export default {
+  name: 'LayerItem',
+  props: {
+    deviceLayer: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      svgContent: '' // 用于存储加载到的 SVG 字符串
+    }
+  },
+  methods: {
+    getDynamicIcon,
+    handleSvgError,
+    handleClick () {
+      // 向上传递点击事件
+      this.$emit('click', this.deviceLayer)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 将原来在 LayerPanel 中的按钮样式移到这里 */
+.layer-toggle-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  height: auto !important;
+  padding: 8px 12px !important;
+  border: 1px solid #e8e8e8 !important;
+  border-radius: 16px !important;
+  color: inherit !important;
+  text-align: left;
+  width: 100%;
+  transition: all 0.2s ease-in-out;
+}
+.layer-toggle-button-true {
+  background: #e0effb !important;
+  border-color: #1990fe !important;
+  box-shadow: 0 2px 4px rgba(25, 144, 255, 0.2) !important;
+}
+
+.layer-toggle-button:hover,
+.layer-toggle-button:focus {
+  border-color: #1990fe !important;
+  box-shadow: 0 2px 4px rgba(25, 144, 255, 0.2) !important;
+  color: inherit !important;
+}
+
+.layer-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.layer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.layer-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.layer-info > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.layer-info strong {
+  font-size: 14px;
+  color: #333;
+}
+
+.layer-desc {
+  font-size: 12px;
+  color: #999;
+}
+
+.layer-indicator {
+  width: 30px;
+  height: 5px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+</style>

package/src/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerItemHorizontal.vue

@@ -0,0 +1,201 @@
+<template>
+  <div :class="['layer-toggle-button', `layer-toggle-button-${deviceLayer.visible}`]" @click="handleClick">
+    <div class="layer-content">
+      <!-- 图标区域（顶部） -->
+      <div class="icon-section">
+        <span class="layer-icon" :style="{ color: deviceLayer.color }">
+          <!-- 如果 type 是 'point'，显示动态加载的 SVG -->
+          <span v-if="deviceLayer.iconType === 'point'">
+            <img
+              :src="getDynamicIcon(deviceLayer.icon)"
+              :title="`${deviceLayer.name}`"
+              class="layer-icon-img"
+              @error="handleSvgError"
+            />
+          </span>
+          <!-- 如果 type 是 'line'，显示一个自定义的线条图标 -->
+          <span v-else-if="deviceLayer.iconType === 'line'">
+            <span :style="{ color: deviceLayer.color, fontWeight: 700 }">一</span>
+          </span>
+          <!-- 未来可以在这里添加其他类型的判断，例如 v-else-if="layer.type === 'polygon'" -->
+          <span v-else>
+            <img
+              :src="getDynamicIcon(deviceLayer.icon)"
+              :title="`${deviceLayer.name}`"
+              class="layer-icon-img"
+              @error="handleSvgError"
+            />
+          </span>
+        </span>
+      </div>
+
+      <!-- 文本信息区域（中间） -->
+      <div class="text-section">
+        <strong class="layer-name">{{ deviceLayer.name }}</strong>
+      </div>
+
+      <!-- 指示器区域（底部） -->
+      <div class="indicator-section">
+        <div class="layer-indicator" :style="{ background: deviceLayer.color }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'LayerItemHorizontal',
+  props: {
+    deviceLayer: {
+      type: Object,
+      required: true
+    },
+    getDynamicIcon: {
+      type: Function,
+      required: true
+    },
+    handleSvgError: {
+      type: Function,
+      required: true
+    }
+  },
+  data () {
+    return {
+      svgContent: '' // 用于存储加载到的 SVG 字符串
+    }
+  },
+  methods: {
+    handleClick () {
+      // 向上传递点击事件
+      this.$emit('click', this.deviceLayer)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 横向卡片样式 */
+.layer-toggle-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  height: auto !important;
+  padding: 12px 8px !important;
+  border: 1px solid #e8e8e8 !important;
+  border-radius: 12px !important;
+  color: inherit !important;
+  text-align: center;
+  width: 100%;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  min-height: 80px;
+}
+
+.layer-toggle-button-true {
+  background: #e0effb !important;
+  border-color: #1990fe !important;
+  box-shadow: 0 2px 8px rgba(25, 144, 255, 0.2) !important;
+}
+
+.layer-toggle-button:hover,
+.layer-toggle-button:focus {
+  border-color: #1990fe !important;
+  box-shadow: 0 2px 8px rgba(25, 144, 255, 0.2) !important;
+  color: inherit !important;
+  transform: translateY(-2px);
+}
+
+/* 内容区域 - 垂直排列 */
+.layer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  gap: 0;
+}
+
+/* 图标区域 */
+.icon-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.layer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.layer-icon-img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* 文本区域 */
+.text-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+}
+
+.layer-name {
+  font-size: 13px;
+  color: #333;
+  font-weight: 600;
+  margin-bottom: 4px;
+  text-align: center;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  width: 100%;
+}
+
+.layer-desc {
+  font-size: 11px;
+  color: #999;
+  text-align: center;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  width: 100%;
+}
+
+/* 指示器区域 */
+.indicator-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.layer-indicator {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+.layer-toggle-button:hover .layer-indicator {
+  width: 50px;
+  opacity: 0.9;
+}
+</style>

package/src/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerItemVertical.vue

@@ -0,0 +1,140 @@
+<template>
+  <div :class="['layer-toggle-button', `layer-toggle-button-${deviceLayer.visible}`]" @click="handleClick">
+    <div class="layer-info">
+      <!-- 动态内容区域 -->
+      <span class="layer-icon" :style="{ color: deviceLayer.color }">
+        <!-- 如果 type 是 'point'，显示动态加载的 SVG -->
+        <span v-if="deviceLayer.iconType === 'point'">
+          <img
+            :src="getDynamicIcon(deviceLayer.icon)"
+            :title="`${deviceLayer.name}`"
+            class="layer-icon"
+            @error="handleSvgError"
+          />
+        </span>
+        <!-- 如果 type 是 'line'，显示一个自定义的线条图标 -->
+        <span v-else-if="deviceLayer.iconType === 'line'">
+          <span :style="{ color: deviceLayer.color, fontWeight: 700 }">一</span>
+        </span>
+        <!-- 未来可以在这里添加其他类型的判断，例如 v-else-if="layer.type === 'polygon'" -->
+        <span v-else>
+          <img
+            :src="getDynamicIcon(deviceLayer.icon)"
+            :title="`${deviceLayer.name}`"
+            class="layer-icon"
+            @error="handleSvgError"
+          />
+        </span>
+      </span>
+      <div>
+        <strong>{{ deviceLayer.name }}</strong>
+        <span class="layer-desc">{{ deviceLayer.desc }}</span>
+      </div>
+    </div>
+    <div class="layer-indicator" :style="{ background: deviceLayer.color }"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LayerItemVertical',
+  props: {
+    deviceLayer: {
+      type: Object,
+      required: true
+    },
+    getDynamicIcon: {
+      type: Function,
+      required: true
+    },
+    handleSvgError: {
+      type: Function,
+      required: true
+    }
+  },
+  data () {
+    return {
+      svgContent: '' // 用于存储加载到的 SVG 字符串
+    }
+  },
+  methods: {
+    handleClick () {
+      // 向上传递点击事件
+      this.$emit('click', this.deviceLayer)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 将原来在 LayerPanel 中的按钮样式移到这里 */
+.layer-toggle-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  height: auto !important;
+  padding: 8px 12px !important;
+  border: 1px solid #e8e8e8 !important;
+  border-radius: 16px !important;
+  color: inherit !important;
+  text-align: left;
+  width: 100%;
+  transition: all 0.2s ease-in-out;
+}
+.layer-toggle-button-true {
+  background: #e0effb !important;
+  border-color: #1990fe !important;
+  box-shadow: 0 2px 4px rgba(25, 144, 255, 0.2) !important;
+}
+
+.layer-toggle-button:hover,
+.layer-toggle-button:focus {
+  border-color: #1990fe !important;
+  box-shadow: 0 2px 4px rgba(25, 144, 255, 0.2) !important;
+  color: inherit !important;
+  transform: translateX(-2px);
+}
+
+.layer-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.layer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.layer-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.layer-info > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.layer-info strong {
+  font-size: 14px;
+  color: #333;
+}
+
+.layer-desc {
+  font-size: 12px;
+  color: #999;
+}
+
+.layer-indicator {
+  width: 30px;
+  height: 5px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+</style>