matrix_components 2.0.365 → 2.0.366

package/dist/ComponentDemo/ExcelDemo.vue

@@ -1,263 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="control-panel">
-      <h3>Excel 预览演示</h3>
-
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h4>方式一：文件上传</h4>
-        <el-form-item label="弹框模式:">
-          <el-switch v-model="isShowDialog" @change="hideExcelHandler" />
-        </el-form-item>
-        <input
-          type="file"
-          @change="importExcel(($event.target as any)?.files?.[0])"
-          accept=".xls,.xlsx"
-        />
-        <button @click="clearFile" :disabled="!file">清除文件</button>
-      </div>
-
-      <!-- URL方式 -->
-      <div class="url-section">
-        <h4>方式二：URL地址</h4>
-        <input
-          v-model="excelUrl"
-          type="text"
-          placeholder="请输入Excel文件的URL地址"
-          class="url-input"
-        />
-        <button @click="loadFromUrl" :disabled="!excelUrl.trim()">加载URL</button>
-        <button @click="clearUrl" :disabled="!excelUrl">清除URL</button>
-      </div>
-      <button @click="exportExcel" class="export-btn">导出数据</button>
-    </div>
-
-    <!-- Excel组件 -->
-    <div class="excel-container">
-      <NsExcel
-        v-if="counts"
-        class="excel"
-        :file="file"
-        :isShowDialog="isShowDialog"
-        dialogWidth="1200px"
-        dialogHeight="700px"
-        ref="excelRef"
-        exportType="2"
-        @dialogExport="dialogExport"
-      ></NsExcel>
-    </div>
-    <!-- 导出数据展示 -->
-    <div class="data-display">
-      <div class="data-section">
-        <h4>导出数据格式1 (原始格式)</h4>
-        <pre>{{ data1 }}</pre>
-      </div>
-      <div class="data-section">
-        <h4>导出数据格式2 (Excel格式)</h4>
-        <pre>{{ data2 }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-
-const counts = ref(true)
-const isShowDialog = ref(false)
-const file = ref()
-const excelRef = ref()
-const data1 = ref()
-const data2 = ref()
-const excelUrl = ref(
-  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
-)
-
-function hideExcelHandler(val: boolean) {
-  counts.value = false
-  nextTick(() => {
-    counts.value = true
-    isShowDialog.value = val
-  })
-}
-
-function importExcel(f: any) {
-  // 清除URL，使用文件上传
-  excelUrl.value = ''
-  file.value = f
-}
-
-function loadFromUrl() {
-  if (excelUrl.value.trim()) {
-    // 清除文件，使用URL
-    file.value = excelUrl.value.trim()
-  }
-}
-
-function clearFile() {
-  file.value = null
-  data1.value = null
-  data2.value = null
-}
-
-function clearUrl() {
-  excelUrl.value = ''
-  data1.value = null
-  data2.value = null
-}
-
-function dialogExport(data: any) {
-  console.warn(`excel导出数据：${data}`)
-}
-
-function exportExcel() {
-  if (excelRef.value) {
-    data1.value = excelRef.value.exportExcel(1)
-    data2.value = excelRef.value.exportExcel(2)
-  }
-}
-</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,
-.example-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-
-  input[type='file'] {
-    margin-right: 10px;
-  }
-
-  .url-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;
-    }
-  }
-}
-
-.export-btn {
-  padding: 10px 20px;
-  background: #67c23a;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: bold;
-
-  &:hover {
-    background: #5daf34;
-  }
-}
-
-.excel {
-  width: 100%;
-  height: 500px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-
-.data-display {
-  display: flex;
-  gap: 20px;
-  margin-top: 20px;
-
-  .data-section {
-    flex: 1;
-    background: #f9f9f9;
-    border-radius: 8px;
-    padding: 15px;
-
-    h4 {
-      margin: 0 0 10px 0;
-      color: #333;
-      font-size: 14px;
-    }
-
-    pre {
-      background: white;
-      padding: 15px;
-      border-radius: 4px;
-      border: 1px solid #e0e0e0;
-      max-height: 300px;
-      overflow: auto;
-      font-size: 12px;
-      line-height: 1.4;
-      margin: 0;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-  }
-}
-
-.excel-container {
-  height: 300px;
-}
-
-@media (max-width: 768px) {
-  .data-display {
-    flex-direction: column;
-  }
-
-  .url-input {
-    width: 100% !important;
-    margin-bottom: 10px;
-  }
-}
-</style>

package/dist/ComponentDemo/FormDemo.vue

@@ -1,423 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="control-panel">
-      <h3>动态表单组件演示</h3>
-      <!-- 配置文件选择 -->
-       <el-form :model="state" ref="formRef" label-position="left">
-          <el-button type="primary" @click="getFormData">获取表单数据</el-button>
-          <br>
-          <span style="color: red">
-            结果：{{ state.formData }}
-          </span>
-          <br>
-          <br>
-          <NsFormTitle title="模型参数">
-              <NsForm
-                  ref="row1Ref"
-                  :readOnly="state.readOnly"
-                  backgroundColor="#fff"
-                  :model="state.model"
-                  :rows="state.rows"
-                  formPropKey="rows"
-                  labelColor="#606266"
-                  labelWidth="150"
-                  gapH="20px"
-                  gapV="10px"
-              ></NsForm>
-          </NsFormTitle>
-          <NsFormTitle title="视频配置">
-              <NsForm
-                  ref="row2Ref"
-                  :readOnly="state.readOnly"
-                  backgroundColor="#fff"
-                  :model="state.model"
-                  :rows="state.rows2"
-                  formPropKey="rows2"
-                  labelColor="#606266"
-                  labelWidth="150"
-                  gapH="20px"
-                  gapV="10px"
-              ></NsForm>
-          </NsFormTitle>
-          <NsFormTitle title="结果保存">
-              <NsForm
-                  ref="row3Ref"
-                  :readOnly="state.readOnly"
-                  backgroundColor="#fff"
-                  :model="state.model"
-                  :rows="state.rows3"
-                  formPropKey="rows3"
-                  labelColor="#606266"
-                  labelWidth="150"
-                  gapH="20px"
-                  gapV="10px"
-              ></NsForm>
-          </NsFormTitle>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ElInput, ElMessage, ElRadioGroup } from "element-plus";
-import { reactive, ref } from 'vue';
-
-const props = defineProps({
-    readOnly: {
-        type: Boolean,
-        default: false,
-    },
-    row: {
-        type: Object,
-        default: () => ({}),
-    },
-});
-
-const formRef = ref();
-const row1Ref = ref();
-const row2Ref = ref();
-const row3Ref = ref();
-const state = reactive({
-    formData: {},
-    readOnly: props.readOnly,
-    model: props.readOnly ? "" : "vertical",
-    // 第一种方式，在初始化前设置数据
-    rows: [
-        [
-            {
-                key: "confidence",
-                label: "置信度",
-                value: "",
-                component: ElInput,
-                params: {
-                    "v-length.range": {
-                        min: 0,
-                        max: 1,
-                        maxLength: 3 },
-                    rules: [
-                        {
-                            required: true,
-                            message: "请输入",
-                        },
-                    ],
-                },
-            },
-            {
-                key: "iou",
-                label: "交并比",
-                value: "",
-                component: ElInput,
-                params: {
-                    "v-length.range": {
-                        min: 0,
-                        max: 1,
-                        maxLength: 3 },
-                    rules: [
-                        {
-                            required: true,
-                            message: "请输入",
-                        },
-                    ],
-                },
-            },
-        ],
-    ],
-    rows2: [
-        [
-            {
-                key: "timeInterval",
-                label: "时间间隔（秒）",
-                value: "",
-                component: ElInput,
-                params: {
-                    "v-length.range": {
-                        min: 0,
-                        max: 6000,
-                        int: true
-                    },
-                    rules: [
-                        {
-                            required: true,
-                            message: "请输入",
-                        },
-                    ],
-                },
-            },
-            {
-                key: "stuck_threshold",
-                label: "视频帧卡顿（秒）",
-                value: "",
-                component: ElInput,
-                params: {
-                    "v-length.range": {
-                        min: 0,
-                        max: 1000,
-                        int: true
-                    },
-                    rules: [
-                        {
-                            required: true,
-                            message: "请输入",
-                        },
-                    ],
-                },
-            },
-        ],
-        [
-            {
-                key: "max_retries",
-                label: "最大重连次数",
-                value: "",
-                component: ElInput,
-                params: {
-                    "v-length.range": {
-                        min: 0,
-                        max: 100,
-                        int: true
-                    },
-                    rules: [
-                        {
-                            required: true,
-                            message: "请输入",
-                        },
-                    ],
-                },
-            },
-            {
-                value: ' '
-            }
-        ],
-    ],
-    rows3: [
-        [
-            {
-                key: "save_video",
-                label: "是否保存视频",
-                value: '1',
-                component: ElRadioGroup,
-                params: {
-                    rules: [
-                        {
-                            required: true,
-                            message: "请选择",
-                            trigger: 'change'
-                        },
-                    ],
-                    options: [
-                        {
-                            value: '1',
-                            label: '是',
-                        },
-                        {
-                            value: '0',
-                            label: '否',
-                        },
-                    ]
-                },
-            },
-            {
-                key: "pre_buffer_second",
-                label: "帧前缓存（秒）",
-                value: "",
-                component: ElInput,
-                params: {
-                    "v-length.range": {
-                        min: 0,
-                        max: 1000,
-                        int: true
-                    },
-                    rules: [
-                        {
-                            required: true,
-                            message: "请输入",
-                        },
-                    ],
-                },
-            },
-        ],
-        [
-            {
-                key: "det_area_mode",
-                label: "检测区域工作模式",
-                value: 'normal',
-                component: ElRadioGroup,
-                events: {
-                    change: detAreaModeChange
-                },
-                params: {
-                    rules: [
-                        {
-                            required: true,
-                            message: "请选择",
-                            trigger: 'change'
-                        },
-                    ],
-                    options: [
-                        {
-                            value: 'normal',
-                            label: '常规检测(normal)',
-                        },
-                        {
-                            value: 'abnormal',
-                            label: '非常规检测(abnormal)',
-                        },
-                    ]
-                },
-            },
-        ],
-    ],
-});
-
-function detAreaModeChange(value: any) {
-    if(value === 'abnormal') {
-        if(state.rows3?.length && state.rows3[state.rows3.length - 1]?.[0]?.key === 'det_area_json'){
-            state.rows3.pop()
-        }
-        state.rows3.push([{
-            key: "det_area_json",
-            label: "感兴趣区域",
-            value: '',
-            component: ElInput,
-            span: 6,
-            events: {
-                change: (value) => getAreasHandler(value),
-            },
-            params: {
-                rules: [
-                    {
-                        required: true,
-                        message: "请输入",
-                        trigger: 'change'
-                    },
-                ],
-            },
-        }, {value: ' '}])
-    }else {
-        state.rows3.pop()
-    }
-}
-
-function getAreasHandler(value: any) {
-    state.rows3[state.rows3.length - 1][0].value = value
-}
-
-/**
- * 保存
- */
-async function getFormData() {
-    try {
-        await formRef.value.validate();
-    } catch (error: any) {
-        console.log(error);
-        ElMessage.error('表单校验失败');
-        state.formData = {}
-        return false;
-    }
-    const data1 = row1Ref.value?.getKeyValuePairs?.(state.rows);
-    const data2 = row2Ref.value?.getKeyValuePairs?.(state.rows2);
-    const data3 = row3Ref.value?.getKeyValuePairs?.(state.rows3);
-    const data = { ...data1, ...data2, ...data3 }
-    state.formData = data;
-    ElMessage.success('表单校验成功');
-    return data;
-}
-
-</script>
-
-<style lang="scss" scoped>
-.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;
-  }
-}
-
-.config-section,
-.upload-section,
-.action-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-
-  .config-select {
-    width: 300px;
-    margin-right: 10px;
-  }
-
-  input[type='file'] {
-    margin-right: 10px;
-  }
-
-  .el-button {
-    margin-right: 10px;
-    margin-bottom: 5px;
-  }
-}
-
-.form-container {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  margin-bottom: 20px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  background: white;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.data-card {
-  margin-top: 20px;
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .form-data-display {
-    background-color: #f5f7fa;
-    padding: 15px;
-    border-radius: 4px;
-    font-size: 12px;
-    line-height: 1.5;
-    max-height: 400px;
-    overflow-y: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .config-select {
-    width: 100% !important;
-    margin-bottom: 10px;
-  }
-
-  .el-button {
-    width: 100%;
-    margin-bottom: 10px;
-  }
-}
-</style>

package/dist/ComponentDemo/ImageDemo.vue

@@ -1,27 +0,0 @@
-<template>
-	<NsImage :src="src" :apiUrl="apiUrl" :hasPreview="hasPreview">
-    <img
-      :src="ThemeVar.VARS.getPropertyValue('--matrix-empty-img')"
-      style="width: 100%; height: 100%"
-      @click.stop
-    />
-  </NsImage>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue';
-import { ThemeVar } from '../../packages/utils/loadCssVars'
-const src = ref('')
-const hasPreview = ref(true)
-const apiUrl = reactive( {
-    type: Object,
-    default: ()=>({
-      method: 'get',
-      url: '/tool/file/getFileDetail',
-      paramkey: 'fileIds',
-      params: {},
-    }),
-  })
-</script>
-<style lang="scss" scoped>
-</style>