maotu-webtopo/src/App.vue

<template>
  <!-- <VueBaseTable /> -->
  <!-- <vueImgTest /> -->
  <!-- <VueThreeMachine /> -->
  <!-- <vueThreeEquipment /> -->
  <el-config-provider :locale="zhCn">
    <router-view />
  </el-config-provider>

  <!-- <viewIndex /> -->
</template>

<script setup lang="ts">
import { getCurrentInstance, defineAsyncComponent, ref, onMounted, h, createApp } from 'vue';
import { leftAsideStore } from '@/export';
import viewIndex from '@/layout/view_index.vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
// xq 组件
import VueMyTest from '@/components/my-test.vue';
import VueMyButton from '@/components/my-button.vue';
import vueInstrument from '@/components/vue-xq-test/vue-instrument.vue';
import VueTableOnly from '@/components/vue-xq-test/vue-table-only.vue';
import VueTableComplex from '@/components/vue-xq-test/vue-table-complex.vue';
import VueImg from '@/components/vue-xq-test/vue-img.vue';
import VueRunInfo from '@/components/vue-xq-test/vue-run-info.vue';
import VueMultiTypeInfo from '@/components/vue-xq-test/vue-multi-type-info.vue';
import VueSignalInfo from '@/components/vue-xq-test/vue-signal-info.vue';
import vueSignalGaudy from '@/components/vue-xq-test/vue-signal-gaudy.vue';
import VueSwitchInfo from '@/components/vue-xq-test/vue-switch-info.vue';
import VueNumInfo from '@/components/vue-xq-test/vue-num-info.vue';
import VueRegulator from '@/components/vue-xq-test/vue-regulator.vue';
import VueBaseTable from '@/components/vue-xq-test/vue-base-table.vue';
import VueThreeMachine from '@/components/vue-xq-test/vue-three-machine.vue';
import VueThreePipeline from '@/components/vue-xq-test/vue-three-pipeline.vue';
import VueBaseCardInfo from '@/components/vue-xq-test/vue-base-card-info.vue';
import VuePhotonCard from '@/components/vue-xq-test/vue-photon-card.vue';
import VueEssentialInformation from '@/components/vue-xq-test/vue-essential-information.vue';
import VueAssembleTable from '@/components/vue-xq-test/vue-assemble-table.vue';
import VueSynthesizeTable from '@/components/vue-xq-test/vue-synthesize-table.vue';
import VueThreeSmokeSiren from '@/components/vue-xq-test/vue-three-smokeSiren.vue';
import VueThreeScene from '@/components/vue-xq-test/vue-three-scene.vue';
import VueHostMachine from '@/components/vue-xq-test/vue-host-machine.vue';
import VueThreeTest from '@/components/vue-xq-test/vue-three-test.vue';
import VueThreeGroundFloor from '@/components/vue-xq-test/vue-three-groundFloor.vue';
// import vueThreeEquipment from '@/components/three-components/vue-three-equipment.vue';

const instance = getCurrentInstance();
instance?.appContext.app.component('vue-my-button', VueMyButton);
instance?.appContext.app.component('vue-my-input', VueMyTest);
instance?.appContext.app.component('vue-my-instrument', vueInstrument);
instance?.appContext.app.component('vue-my-tableOnly', VueTableOnly);
instance?.appContext.app.component('vue-my-complex', VueTableComplex);
instance?.appContext.app.component('vue-my-img', VueImg);
instance?.appContext.app.component('vue-my-run-info', VueRunInfo);
instance?.appContext.app.component('vue-my-multi-type-info', VueMultiTypeInfo);
instance?.appContext.app.component('vue-my-signal-info', VueSignalInfo);
instance?.appContext.app.component('vue-my-signal-gaudy', vueSignalGaudy);
instance?.appContext.app.component('vue-my-switch-info', VueSwitchInfo);
instance?.appContext.app.component('vue-my-num-info', VueNumInfo);
instance?.appContext.app.component('vue-my-regulator', VueRegulator);
instance?.appContext.app.component('vue-my-base-table', VueBaseTable);
instance?.appContext.app.component('vue-my-regulator', VueRegulator);
instance?.appContext.app.component('vue-my-three-machine', VueThreeMachine);
instance?.appContext.app.component('vue-my-three-pipeline', VueThreePipeline);
instance?.appContext.app.component('vue-my-base-card-info', VueBaseCardInfo);
instance?.appContext.app.component('vue-my-photon-card', VuePhotonCard);
instance?.appContext.app.component('vue-my-essential-information', VueEssentialInformation);
instance?.appContext.app.component('vue-my-assemble-table', VueAssembleTable);
instance?.appContext.app.component('vue-my-synthesize-table', VueSynthesizeTable);
instance?.appContext.app.component('vue-my-three-smoke-siren', VueThreeSmokeSiren);
instance?.appContext.app.component('vue-my-three-scene', VueThreeScene);
instance?.appContext.app.component('vue-my-host-machine', VueHostMachine);
instance?.appContext.app.component('vue-my-three-test', VueThreeTest);
instance?.appContext.app.component('vue-my-three-ground-floor', VueThreeGroundFloor);

const electrical_modules_files = import.meta.glob('./assets/svgs/electrical/**.svg', {
  eager: true,
  as: 'raw'
});
const electrical_stroke_modules_files = import.meta.glob('./assets/svgs/electrical/stroke/**.svg', {
  eager: true,
  as: 'raw'
});
const electrical_register_config: any = [];
for (const key in electrical_modules_files) {
  //根据路径获取svg文件名
  const name = key.split('/').pop()!.split('.')[0];
  electrical_register_config.push({
    id: name,
    title: name,
    type: 'svg',
    thumbnail: 'data:image/svg+xml;utf8,' + encodeURIComponent(electrical_modules_files[key]),
    svg: electrical_modules_files[key],
    props: {
      fill: {
        type: 'color',
        val: '#FF0000',
        title: '填充色'
      }
    }
  });
}
for (const key in electrical_stroke_modules_files) {
  //根据路径获取svg文件名
  const name = key.split('/').pop()!.split('.')[0];
  electrical_register_config.push({
    id: name,
    title: name,
    type: 'svg',
    thumbnail:
      'data:image/svg+xml;utf8,' + encodeURIComponent(electrical_stroke_modules_files[key]),
    svg: electrical_stroke_modules_files[key],
    props: {
      stroke: {
        type: 'color',
        val: '#00ff00',
        title: '边框色'
      }
    }
  });
}
leftAsideStore.registerConfig('电气符号', electrical_register_config);

leftAsideStore.registerConfig('vue四遥组件', [
  {
    id: 'vue-my-signal-info',
    title: 'vue遥信01',
    type: 'vue',
    thumbnail: '/public/svgs/info.svg',
    props: {}
  },
  {
    id: 'vue-my-signal-gaudy',
    title: 'vue遥信02',
    type: 'vue',
    thumbnail: '/public/svgs/signal-gaudy.svg',
    props: {
      moduleType: {
        type: 'inputTypeTag',
        val: '遥信',
        title: '四遥类型'
      },
      moduleId: {
        type: 'inputSelectId',
        val: '',
        title: '绑定ID'
      },
      location: {
        type: 'select',
        val: 'bottom',
        title: '名称位置',
        options: [
          {
            value: 'top',
            label: '上'
          },
          {
            value: 'bottom',
            label: '下'
          },
          {
            value: 'left',
            label: '左'
          },
          {
            value: 'right',
            label: '右'
          }
        ]
      }
    }
  },
  {
    id: 'vue-my-switch-info',
    title: 'vue遥控',
    type: 'vue',
    thumbnail: '/public/svgs/switch-info.svg',
    props: {
      moduleType: {
        type: 'inputTypeTag',
        val: '遥控',
        title: '四遥类型'
      },
      moduleId: {
        type: 'inputSelectId',
        val: '',
        title: '绑定ID'
      }
    }
  },
  {
    id: 'vue-my-num-info',
    title: 'vue遥测',
    type: 'vue',
    thumbnail: '/public/svgs/num-info.svg',
    props: {
      moduleType: {
        type: 'inputTypeTag',
        val: '遥测',
        title: '四遥类型'
      },
      moduleId: {
        type: 'inputSelectId',
        val: '--',
        title: '绑定ID'
      },
      location: {
        type: 'select',
        val: 'bottom',
        title: '名称位置',
        options: [
          {
            value: 'top',
            label: '上'
          },
          {
            value: 'bottom',
            label: '下'
          },
          {
            value: 'left',
            label: '左'
          },
          {
            value: 'right',
            label: '右'
          }
        ]
      }
    }
  },
  {
    id: 'vue-my-regulator',
    title: 'vue遥调',
    type: 'vue',
    thumbnail: '/public/svgs/regulator.svg',
    props: {
      moduleType: {
        type: 'inputTypeTag',
        val: '遥测',
        title: '四遥类型'
      },
      moduleId: {
        type: 'inputSelectId',
        val: '--',
        title: '绑定ID'
      }
    }
  }
]);

leftAsideStore.registerConfig('vue公共组件', [
  {
    id: 'vue-my-input',
    title: 'vue输入框',
    type: 'vue',
    thumbnail: '/svgs/my-input.svg',
    props: {
      modelValue: {
        type: 'input',
        val: '输入框',
        title: '文本'
      },
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '黑体',
        options: [
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      testColor: {
        type: 'color',
        val: '#44B6E7',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-tableOnly',
    title: '单一功能表单',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '黑体',
        options: [
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 12,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#767676',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-complex',
    title: '分组功能表单',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '黑体',
        options: [
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 12,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#767676',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-img',
    title: 'vue图形组件',
    type: 'vue',
    thumbnail: '/public/svgs/image.svg',
    props: {
      moduleId: {
        type: 'upload',
        val: '--',
        title: '绑定'
      }
    }
  },
  {
    id: 'vue-my-run-info',
    title: 'vue运行信息',
    type: 'vue',
    thumbnail: '/public/svgs/log.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Segoe UI',
        options: [
          {
            value: 'Segoe UI',
            label: 'Segoe UI'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 14,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#000000',
        title: '文字颜色'
      },
      dataSource: {
        title: '信息类型',
        type: 'select',
        val: '--',
        options: [
          {
            value: 'globalOverview',
            label: '全站总揽'
          },
          {
            value: 'fireExtinguishing',
            label: '消防系统'
          },
          {
            value: 'firePolice',
            label: '火灾报警主机'
          }
        ]
      }
    }
  },
  {
    id: 'vue-my-multi-type-info',
    title: 'vue运行状态信息',
    type: 'vue',
    thumbnail: '/public/svgs/log-sel.svg',
    props: {
      headline: {
        type: 'input',
        val: '自定义标题',
        title: '标题'
      },
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Segoe UI',
        options: [
          {
            value: 'Segoe UI',
            label: 'Segoe UI'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 14,
        title: '字体大小'
      },
      dataSource: {
        type: 'select',
        val: 'ultraVires',
        title: '数据来源',
        options: [
          {
            value: 'ultraVires',
            label: '越权信息'
          },
          {
            value: 'linkage',
            label: '联动信息'
          },
          {
            value: 'unitException',
            label: '异常设备'
          }
        ]
      },
      testColor: {
        type: 'color',
        val: '#000000',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-base-table',
    title: 'vue公共表格',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'select',
        val: '--',
        options: [
          {
            value: 'wholeSiteMessage',
            label: '全站报文'
          },
          {
            value: 'unitException',
            label: '异常设备'
          },
          {
            value: 'unauthorized',
            label: '越权消息'
          }
        ]
      }
    }
  }
]);

leftAsideStore.registerConfig('vue3D组件', [
  {
    id: 'vue-my-three-machine',
    title: '3d机房',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'input',
        val: '--'
      }
    }
  },
  {
    id: 'vue-my-three-pipeline',
    title: '3d管道',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'input',
        val: '--'
      }
    }
  },
  {
    id: 'vue-my-three-smoke-siren',
    title: '3d烟感报警器+信息',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'input',
        val: '--'
      }
    }
  },
  {
    id: 'vue-my-three-scene',
    title: '3d烟感报警器+楼层',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'input',
        val: '--'
      }
    }
  },
  {
    id: 'vue-my-three-test',
    title: '3d-test',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'input',
        val: '--'
      }
    }
  },
  {
    id: 'vue-my-three-ground-floor',
    title: '3d-生产综合楼一楼',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      dataSource: {
        title: '数据源',
        type: 'input',
        val: '--'
      }
    }
  }
]);

leftAsideStore.registerConfig('vue组件', [
  {
    id: 'vue-my-base-card-info',
    title: '火灾报警-火警卡片',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Segoe UI',
        options: [
          {
            value: 'Segoe UI',
            label: 'Segoe UI'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 14,
        title: '字体大小'
      },
      headline: {
        type: 'input',
        val: '自定义标题',
        title: '标题'
      }
    }
  },
  {
    id: 'vue-my-photon-card',
    title: '火灾报警主机-光字牌',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Segoe UI',
        options: [
          {
            value: 'Segoe UI',
            label: 'Segoe UI'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 14,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#000000',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-essential-information',
    title: '火灾报警主机-基本信息',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Segoe UI',
        options: [
          {
            value: 'Segoe UI',
            label: 'Segoe UI'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 14,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#000000',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-assemble-table',
    title: '火灾报警主机-装配说明',
    type: 'vue',
    thumbnail: '/public/svgs/table-base.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '黑体',
        options: [
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 12,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#767676',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-synthesize-table',
    title: '生产综合楼1楼-运行信息(表格)',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '黑体',
        options: [
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 12,
        title: '字体大小'
      },
      testColor: {
        type: 'color',
        val: '#767676',
        title: '文字颜色'
      }
    }
  },
  {
    id: 'vue-my-host-machine',
    title: '生产综合楼1楼-主机',
    type: 'vue',
    thumbnail: '/public/svgs/table-only.svg',
    props: {
      fontFamily: {
        title: '字体',
        type: 'select',
        val: 'Segoe UI',
        options: [
          {
            value: 'Segoe UI',
            label: 'Segoe UI'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      },
      fontSize: {
        type: 'number',
        val: 14,
        title: '字体大小'
      },
      headline: {
        type: 'input',
        val: '自定义标题',
        title: '标题'
      }
    }
  }
]);

leftAsideStore.registerConfig('开发测试用', [
  {
    id: 'my-button',
    title: '我的按钮',
    type: 'vue',
    thumbnail: '/svgs/my-button.svg',
    props: {
      text: {
        type: 'input',
        val: '按钮',
        title: '文本'
      },
      bgColor: {
        type: 'color',
        val: '#44B6E7',
        title: '背景色'
      },
      fontFamily: {
        title: '字体',
        type: 'select',
        val: '黑体',
        options: [
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '宋体',
            label: '宋体'
          }
        ]
      }
    }
  },
  {
    id: 'my-input',
    title: '我的输入框',
    type: 'vue',
    thumbnail: '/svgs/my-input.svg',
    props: {
      modelValue: {
        type: 'input',
        val: '输入框',
        title: '文本'
      }
    }
  },
  {
    id: 'custom-demo',
    title: '自定义svg',
    type: 'custom-svg',
    thumbnail: '/svgs/demo.svg',
    props: {
      circleFill: {
        type: 'color',
        val: '#FF0000',
        title: '圆颜色'
      },
      pathFill1: {
        type: 'color',
        val: '#00FF00',
        title: '线1颜色'
      },
      pathFill2: {
        type: 'color',
        val: '#0000FF',
        title: '线2颜色'
      },
      pathFill3: {
        type: 'color',
        val: '#FFFF00',
        title: '线3颜色'
      },
      showLine2: {
        type: 'switch',
        val: true,
        title: '显示线2'
      }
    }
  },
  {
    id: 'pie-charts',
    title: 'echarts饼图',
    type: 'vue',
    thumbnail: '/svgs/pie-charts.svg',
    props: {
      title: {
        title: '标题',
        type: 'input',
        val: '默认标题'
      },
      seriesName: {
        title: '详情',
        type: 'input',
        val: '详情标题'
      },
      seriesData: {
        title: '数据',
        type: 'jsonEdit',
        val: [
          {
            value: 1048,
            name: '办公楼A'
          },
          {
            value: 735,
            name: '办公楼B'
          },
          {
            value: 580,
            name: '保安室'
          },
          {
            value: 484,
            name: '地下车库'
          },
          {
            value: 300,
            name: '食堂'
          }
        ]
      }
    }
  }
]);
</script>

<style scoped></style>