matrix_components 2.0.306 → 2.0.309

package/dist/ComponentDemo/ImageDemo.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="image-demo">
+    <h2>NsImage 组件测试</h2>
+
+    <div class="demo-section">
+      <h3>1. 正常图片加载测试</h3>
+      <p>使用有效的图片URL</p>
+      <NsImage
+        :src="validImageUrl"
+        alt="有效图片"
+        width="300"
+        height="200"
+        style="border: 1px solid #ccc; border-radius: 8px;"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>2. 图片加载失败测试</h3>
+      <p>使用不存在的图片URL，应该显示默认图片</p>
+      <NsImage
+        :src="invalidImageUrl"
+        alt="无效图片"
+        width="300"
+        height="200"
+        style="border: 1px solid #ccc; border-radius: 8px;"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>3. 动态切换测试</h3>
+      <p>点击按钮切换图片URL</p>
+      <div style="margin-bottom: 10px;">
+        <button @click="toggleImage" style="padding: 8px 16px; margin-right: 10px;">
+          切换图片 (当前: {{ currentImageType }})
+        </button>
+        <button @click="useRandomInvalidUrl" style="padding: 8px 16px;">
+          使用随机无效URL
+        </button>
+      </div>
+      <NsImage
+        :src="dynamicImageUrl"
+        alt="动态图片"
+        width="300"
+        height="200"
+        style="border: 1px solid #ccc; border-radius: 8px;"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>4. 多个实例测试</h3>
+      <p>测试多个NsImage组件同时使用</p>
+      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <NsImage
+          :src="validImageUrl"
+          alt="图片1"
+          width="150"
+          height="100"
+          style="border: 1px solid #ccc; border-radius: 4px;"
+        />
+        <NsImage
+          src="/nonexistent1.jpg"
+          error="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABZNJREFUeNqUVklzE0cU7u5p7QtGtuV9wUvAhhBcEFw+pYqcUjmkKldyyY/Kv8g9lUMuqWwVCClTQAzYAVsGGyvCiyTbI8105y09o7HDgbR6eplpfW9//eTX33wuFfykwocnHmgrhXtgoJ9rlgZsPOJkYDICJv5ZA4/QCXRcMbQjJqNROgrQpAPHiXBxJGirmA6cMAoWBs4Ywwy7jiSgeTzhAh+PFp4MuuHab7Xjpu9peqOjDkeoU3M4NOKjI355GwkRHZWxQFLuPKnvvNzX2dTictE6BdEgLY9CWiOFAs2QhAbFlVqqSBEJIXDhxRqDCa0wfW1oZnZC5kLgCqCZAKpeoX6MNAq1qAxCAyGh8CNJ4HBZ0xG6imjElshoT+aBM8+ZgCUwJIW0YCPANYgLBoDHoDTKJiAc+0l0ahr063kautp+2eh0AqXZMB5bwvPgsIxsJqUnk+rV7CCBH/707eODxvHM0sjyZ5cduvtb5EtCtA5PYJqaqwrcoceg/6BnAe8GeN9Y3b3//fPyxeydr26gRYh/AcOLh29aR/4HH49/srycMmnSUswUGYLUUurLiUSDt8iJZqERLJfNXluZ9v0wdm+WQGaL6fJwcXy0OjE8tmNrvjpWTMOTMoEIvLfbp+JsQx7RoBgGC1dnmpVTkUGm0S5WeLe/XIR1ZbgElkllVaj9MNfZe31oQpsvZVUCvtsNaltv6nsHx+3TQjEHJog/1XcO7/34bHjsYqg7Nh8MABq5sMBIRmfFPv/RCFhMeiGoPJfPPPz9Rakvv7Qyo1PoNo3GUX1vPwwxPEGIjfVXg9WL/f1l2EIAPl3dvnpzKlfMhEGInAPLhoNfessgQRx7HoeYKpQyE7ODwEWukAHhgfH9t01yexH7aKt1wqKkUnpqvlosZ20veZATGwqEhMWkYOegJ5XWoPFcPv1srfZfvXNrNk8e/LKeMDqDIICM8DRvOZPRK3c0TpzNejtTSKcLqXPo/nGwv9sOuyaBH0+9zKjFezS/3en6Qa6cASNRirTNf05a+/77/FdT9iXN0eRyMS8SLmQC0357AqJIrRqvWknGxdk7gpF4hq5twm5MQkSpUp6JASeKfxq+E13E+dXx62yteMHkohzp7qj/1QxdMc79nRy4VDYBGTe87OjWg0PXb88Vitl3gkLmWPl0wXFvepzFa4xv0eOaPpj4hOn4waP7m2FgP7w9N36peg59dnEE0Dk7EUPYbMxZFA3a9u4keIHZUcI5qSBVPPh5HeIgk08DBBCoDJY3nmz7p20AvXZzOk58f/76NyBdvj4O0UqXPiRWG/Pq3fpiISobhJtoDzuIZwhRSJQch+m0HhqrZHPphRuTmWyKVQwglYHSzlbj9Wajr78ANExcUZCigMAVLkk42P74YUN3UyMjQx3jAxYA92oImgvlPCsVGQWIEHdDo33tlg+ZKl9IO94NwRtQESpFcurY3dzf2zocGqoEBzYswF0LFjISFUg53fT8NvJkJMOcXpqvgg28MJVuZVb/WnuzfXDl1mipklNMx1AfnLwA6e7po1rtqMZGwxZiD7GHYWCi7tb8Fb+RjS/IyqXh2XKhAA5y77t1E0lg6LoAkc2du9e5pAEjSyoW4tzL5pFnJSCXM+x48PdntY3n3Rc79Ybf7jYbx86LQEyFlypaE69Wqwx6A11J0o29TCnPpgMuF51VzUGrublWPz3qNPfakwsDaAN4D6UMlRsRDahwBPjrOQLw2GR2iktHF1U0jc1U/FZn63F9dmkYOpBEFWE5ENPAQsZd6FiroYl7xa91SrKREDZZ/zKNycXqBPGOKoMrE+M5QQMiDDQOUkHN5BTPPuS0cy63RYM5R4bra0EqwgJYMQ0wNtoaS0AslsmqTk1ORfG1YmMKZ4r4WA52GTDPvwIMAEKdOHZW9Ea4AAAAAElFTkSuQmCC"
+          alt="图片2"
+          width="150"
+          height="100"
+          style="border: 1px solid #ccc; border-radius: 4px;"
+        />
+        <NsImage
+          src="/nonexistent2.jpg"
+          error="http://199.10.9.178:8081/static/rapture/resources/icons/x32/nexus.png"
+          alt="图片3"
+          width="150"
+          height="100"
+          style="border: 1px solid #ccc; border-radius: 4px;"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const validImageUrl = ref('http://199.10.10.67:10000/juzhenManage/assets/bg-cTuRoWal.png')
+const invalidImageUrl = ref('/nonexistent/image.jpg')
+
+const dynamicImageUrl = ref(validImageUrl.value)
+const currentImageType = ref('有效图片')
+
+const toggleImage = () => {
+  if (dynamicImageUrl.value === validImageUrl.value) {
+    dynamicImageUrl.value = invalidImageUrl.value
+    currentImageType.value = '无效图片'
+  } else {
+    dynamicImageUrl.value = validImageUrl.value
+    currentImageType.value = '有效图片'
+  }
+}
+
+const useRandomInvalidUrl = () => {
+  dynamicImageUrl.value = `/random-invalid-${Date.now()}.jpg`
+  currentImageType.value = '随机无效图片'
+}
+</script>
+
+<style scoped>
+.image-demo {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  padding: 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.demo-section h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.demo-section p {
+  color: #666;
+  margin-bottom: 15px;
+}
+
+button {
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: #337ecc;
+}
+</style>

package/dist/ComponentDemo/OfficeDemo.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="office-demo">
+    <h2>NsOffice 组件演示</h2>
+
+    <div class="demo-controls">
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h3>方式一：文件上传</h3>
+        <input
+          type="file"
+          @change="importFile(($event.target as any)?.files?.[0])"
+          accept=".docx,.xlsx,.xls,.pdf"
+        />
+        <el-button @click="clearFile" :disabled="!file">清除文件</el-button>
+      </div>
+
+      <!-- URL方式 -->
+      <el-form :model="form" label-width="120px" inline>
+        <el-form-item label="文件URL:">
+          <el-input v-model="form.url" placeholder="请输入文件URL" style="width: 400px" />
+        </el-form-item>
+
+        <el-form-item label="Excel编辑模式:">
+          <el-switch v-model="form.isEdit" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="loadFile">加载文件</el-button>
+          <el-button @click="clearUrl">清空</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="demo-content">
+      <el-card v-if="currentUrl">
+        <template #header>
+          <div class="card-header">
+            <span>当前文件: {{ getFileName(currentUrl) }}</span>
+            <span class="file-type">类型: {{ getFileTypeDisplay() }}</span>
+          </div>
+        </template>
+
+        <div class="office-container">
+          <NsOffice v-bind="form" ref="officeRef" />
+        </div>
+      </el-card>
+
+      <el-empty v-else description="请输入文件URL或选择预设文件" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+const form = reactive({
+  url: '',
+  isEdit: false,
+  isShowDialog: false,
+  dialogWidth: '1200px',
+  dialogHeight: '700px',
+})
+
+const currentUrl = ref('')
+const officeRef = ref()
+const file = ref()
+
+// 文件上传处理
+function importFile(f: any) {
+  // 清除URL，使用文件上传
+  form.url = ''
+  file.value = f
+
+  if (f && (f.name.endsWith('.docx') || f.name.endsWith('.xlsx') || f.name.endsWith('.xls') || f.name.endsWith('.pdf'))) {
+    // 创建文件URL
+    const fileUrl = URL.createObjectURL(f)
+    currentUrl.value = fileUrl
+    form.url = fileUrl
+  } else if (f) {
+    alert('请选择支持的文件格式（.docx, .xlsx, .xls, .pdf）')
+    clearFile()
+  }
+}
+
+const loadFile = () => {
+  if (form.url.trim()) {
+    currentUrl.value = form.url.trim()
+  }
+}
+
+const clearFile = () => {
+  file.value = null
+  if (currentUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(currentUrl.value)
+  }
+  currentUrl.value = ''
+  form.url = ''
+}
+
+const clearUrl = () => {
+  form.url = ''
+  currentUrl.value = ''
+}
+
+const getFileName = (url: string) => {
+  if (!url) return ''
+  const parts = url.split('/')
+  return parts[parts.length - 1]
+}
+
+const getFileTypeDisplay = () => {
+  if (officeRef.value) {
+    const fileType = officeRef.value.getFileType()
+    switch (fileType) {
+      case 'excel':
+        return 'Excel文档'
+      case 'pdf':
+        return 'PDF文档'
+      case 'word':
+        return 'Word文档'
+      case 'unsupported':
+        return '不支持的格式'
+      default:
+        return '未知'
+    }
+  }
+  return '未知'
+}
+</script>
+
+<style scoped>
+.office-demo {
+  padding: 20px;
+}
+
+.demo-controls {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.upload-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
+.upload-section h3 {
+  margin: 0 0 10px 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.upload-section input[type='file'] {
+  margin-right: 10px;
+}
+
+.preset-files {
+  margin-top: 20px;
+}
+
+.preset-files h3 {
+  margin-bottom: 10px;
+  color: #666;
+}
+
+.demo-content {
+  min-height: 700px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-type {
+  color: #409eff;
+  font-size: 14px;
+}
+
+.office-container {
+  height: 600px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+</style>

package/dist/ComponentDemo/PdfDemo.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="demo-container">
+    <div class="control-panel">
+      <h3>PDF 文档预览演示</h3>
+
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h4>方式一：文件上传</h4>
+        <input
+          type="file"
+          @change="importPdf(($event.target as any)?.files?.[0])"
+          accept=".pdf"
+        />
+        <button @click="clearFile" :disabled="!file">清除文件</button>
+      </div>
+
+      <!-- URL方式 -->
+      <div class="url-section">
+        <h4>方式二：URL地址</h4>
+        <input
+          v-model="pdfUrl"
+          type="text"
+          placeholder="请输入PDF文档的URL地址"
+          class="url-input"
+        />
+        <button @click="loadFromUrl" :disabled="!pdfUrl.trim()">加载URL</button>
+        <button @click="clearUrl" :disabled="!pdfUrl">清除URL</button>
+      </div>
+
+      <!-- 搜索功能 -->
+      <div class="search-section">
+        <h4>文档搜索</h4>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="输入要搜索的关键字"
+          class="search-input"
+        />
+        <button @click="clickPdf" :disabled="!searchKeyword.trim()">搜索</button>
+      </div>
+    </div>
+
+    <!-- PDF组件 -->
+    <div class="pdf-container">
+      <NsPdf
+        v-if="counts"
+        ref="pdfRef"
+        :url="currentUrl"
+        :hasTool="true">
+      </NsPdf>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const counts = ref(true)
+const file = ref()
+const pdfRef = ref()
+const pdfUrl = ref(
+  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf',
+)
+const currentUrl = ref(pdfUrl.value)
+const searchKeyword = ref('')
+
+function importPdf(f: any) {
+  // 清除URL，使用文件上传
+  pdfUrl.value = ''
+  file.value = f
+
+  if (f && f.name.endsWith('.pdf')) {
+    // 创建文件URL
+    const fileUrl = URL.createObjectURL(f)
+    currentUrl.value = fileUrl
+  } else if (f) {
+    alert('请选择PDF文件')
+    clearFile()
+  }
+}
+
+function loadFromUrl() {
+  if (pdfUrl.value.trim()) {
+    // 清除文件，使用URL
+    clearFile()
+    currentUrl.value = pdfUrl.value.trim()
+  }
+}
+
+function clearFile() {
+  file.value = null
+  if (currentUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(currentUrl.value)
+  }
+  currentUrl.value = ''
+}
+
+function clearUrl() {
+  pdfUrl.value = ''
+  currentUrl.value = ''
+}
+
+function clickPdf() {
+  if (searchKeyword.value.trim() && pdfRef.value) {
+    pdfRef.value.search(searchKeyword.value.trim())
+  }
+}
+
+// 重新加载组件
+function reloadComponent() {
+  counts.value = false
+  nextTick(() => {
+    counts.value = true
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 20px 0;
+    color: #333;
+  }
+
+  h4 {
+    margin: 15px 0 10px 0;
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+.upload-section,
+.url-section,
+.search-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+
+  input[type='file'] {
+    margin-right: 10px;
+  }
+
+  .url-input,
+  .search-input {
+    width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #409eff;
+    }
+  }
+
+  button {
+    padding: 8px 16px;
+    background: #409eff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:hover:not(:disabled) {
+      background: #337ecc;
+    }
+
+    &:disabled {
+      background: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.pdf-container {
+  height: 600px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .url-input,
+  .search-input {
+    width: 100% !important;
+    margin-bottom: 10px;
+  }
+}
+</style>

package/dist/ComponentDemo/SaturationLineDemo.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="saturation-line-view">
+      <span>浸润线</span>
+      <NsSaturationline ref="canvasRef" class="saturationline-canvas" :data="state.damData" :waterLevel="state.waterLevel"></NsSaturationline>
+    </div>
+</template>
+<script setup lang="ts" name="">
+import { reactive } from 'vue';
+
+const state = reactive({
+    damData: {
+      // 坝体
+      sectionTableList: [
+          {
+              xPoint: "-44",
+              yPoint: "17",
+              isTop: false,
+          },
+          {
+              xPoint: "-26",
+              yPoint: "24",
+              isTop: false,
+          },
+          {
+              xPoint: "-16",
+              yPoint: "24",
+              isTop: false,
+          },
+          {
+              xPoint: "-8",
+              yPoint: "29",
+              isTop: true,
+          },
+          {
+              xPoint: "8",
+              yPoint: "29",
+              isTop: true,
+          },
+          {
+              xPoint: "22",
+              yPoint: "25",
+              isTop: false,
+          },
+          {
+              xPoint: "40",
+              yPoint: "22",
+              isTop: false,
+          },
+          {
+              xPoint: "47",
+              yPoint: "22",
+              isTop: false,
+          },
+          {
+              xPoint: "62",
+              yPoint: "17",
+              isTop: false,
+          },
+          {
+              xPoint: "70",
+              yPoint: "17",
+              isTop: false,
+          },
+      ],
+      // 测压管
+      pipelineTableList: [
+          {
+              xPoint: "-8",
+              yPoint: "29",
+              height: "15",
+              pointCode: "UP1-1",
+          },
+          {
+              xPoint: "8",
+              yPoint: "29",
+              height: "17",
+              pointCode: "UP1-2",
+          },
+          {
+              xPoint: "17",
+              yPoint: "26.3",
+              height: "15",
+              pointCode: "UP1-3",
+          },
+      ],
+      // y/x偏移
+      isWall: "1",
+      yStart: "10",
+      wallXpoint: "-2",
+    },
+    waterLevel: {
+      map: [
+          {
+              id: null,
+              projectCode: null,
+              transectName: "0+155",
+              pointCode: "UP1-3",
+              waterLevel: 14.8,
+              date: "2025-05-20T05:00:00",
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              isDelete: null,
+              code: null,
+          },
+          {
+              id: null,
+              projectCode: null,
+              transectName: "0+155",
+              pointCode: "UP1-2",
+              waterLevel: 16.0,
+              date: "2025-05-20T05:00:00",
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              isDelete: null,
+              code: null,
+          },
+          {
+              id: null,
+              projectCode: null,
+              transectName: "0+155",
+              pointCode: "UP1-1",
+              waterLevel: 18.3,
+              date: "2025-05-20T00:00:00",
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              isDelete: null,
+              code: null,
+          },
+      ],
+      kssw: 22,
+      xxsw: 15,
+      sjsw: 24,
+      jhsw: 26,
+    },
+});
+</script>
+<style lang="scss" scoped>
+.saturation-line-view {
+  width: calc(100% - 40px);
+  height: calc(100% - 20px);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  .saturationline-canvas {
+    flex: 1;
+    height: 100%;
+  }
+}
+</style>