matrix_components 2.0.366 → 2.0.367

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,158 @@
+<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",
+              pointName: "测试名字很长很长很长很长测试名字很长很长很长很长",
+          },
+          {
+              xPoint: "8",
+              yPoint: "29",
+              height: "17",
+              pointCode: "UP1-2",
+              pointName: "-1-1-1--1-1----1",
+          },
+          {
+              xPoint: "17",
+              yPoint: "26.3",
+              height: "15",
+              pointCode: "UP1-3",
+              pointName: "测试",
+          },
+      ],
+      // 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>

package/dist/ComponentDemo/SimpleFormConfig.json

@@ -0,0 +1,97 @@
+{
+  "formData": {
+    "name": "xx",
+    "email": "yy@zz.com",
+    "age": null,
+    "city": "",
+    "description": ""
+  },
+  "formItems": [
+    {
+      "label": "姓名",
+      "prop": "name",
+      "component": "input",
+      "span": 24,
+      "required": true,
+      "placeholder": "请输入姓名",
+      "props": {
+        "clearable": true
+      }
+    },
+    {
+      "label": "邮箱",
+      "prop": "email",
+      "component": "input",
+      "span": 24,
+      "required": true,
+      "placeholder": "请输入邮箱",
+      "props": {
+        "clearable": true
+      },
+      "rules": [
+        {
+          "type": "email",
+          "message": "请输入正确的邮箱地址",
+          "trigger": "blur"
+        }
+      ]
+    },
+    {
+      "label": "年龄",
+      "prop": "age",
+      "component": "number",
+      "span": 24,
+      "placeholder": "请输入年龄",
+      "props": {
+        "min": 1,
+        "max": 120,
+        "controlsPosition": "right"
+      }
+    },
+    {
+      "label": "城市",
+      "prop": "city",
+      "component": "select",
+      "span": 24,
+      "placeholder": "请选择城市",
+      "options": [
+        { "label": "北京", "value": "beijing" },
+        { "label": "上海", "value": "shanghai" },
+        { "label": "广州", "value": "guangzhou" },
+        { "label": "深圳", "value": "shenzhen" }
+      ],
+      "props": {
+        "clearable": true
+      }
+    },
+    {
+      "label": "描述",
+      "prop": "description",
+      "component": "textarea",
+      "span": 24,
+      "placeholder": "请输入描述",
+      "props": {
+        "rows": 3,
+        "maxlength": 200,
+        "showWordLimit": true
+      }
+    }
+  ],
+  "formRules": {
+    "name": [
+      {
+        "required": true,
+        "message": "请输入姓名",
+        "trigger": "blur"
+      }
+    ],
+    "email": [
+      {
+        "required": true,
+        "message": "请输入邮箱地址",
+        "trigger": "blur"
+      }
+    ]
+  },
+  "optionsData": {}
+}