feat:js线性图元展示（iframe嵌入页）

src/services/material.ts

@@ -0,0 +1,144 @@
+import localForage from 'localforage';
+import axios from 'axios';
+// 单实例，避免冲突
+const materialsStore = localForage.createInstance({
+  name: 'meta2d-materials',
+  storeName: 'materials',
+  version: 1.0,
+  description: '存储的是系统组件',
+});
+
+// subclass - subclass
+export async function GetDBMaterials(subclass: string) {
+  return materialsStore.getItem(subclass);
+}
+
+// subclass - subclass
+// materials - the data of subclass
+export function SetDBMaterials(subclass: string, materials: any[]) {
+  return materialsStore.setItem(subclass, materials);
+}
+
+export function MaterialsGroup(data: any[], folders?: any[]) {
+  const obj: any = {};
+  if (!folders) {
+    if (data.length === 0) {
+      // 长度为0
+      obj['Uncategorized(未分类)'] = [];
+    } else {
+      data.forEach((item: { folder: string }) => {
+        if (!item.folder) {
+          item.folder = 'Uncategorized(未分类)';
+        }
+
+        if (!obj[item.folder]) {
+          obj[item.folder] = [item];
+        } else {
+          obj[item.folder].push(item);
+        }
+      });
+    }
+  } else {
+    folders.forEach((name: string) => {
+      obj[name] = [];
+    });
+    obj['Uncategorized(未分类)'] = [];
+    data.forEach((item: { folder: string }) => {
+      if (!obj[item.folder]) {
+        obj['Uncategorized(未分类)'].push(item);
+      } else {
+        obj[item.folder].push(item);
+      }
+    });
+  }
+
+  const list: any[] = [];
+  // tslint:disable-next-line:forin
+  for (const key in obj) {
+    list.push({ name: key, list: obj[key], show: true });
+  }
+
+  return list;
+}
+
+export async function getNetJsDiagram() {
+  let arr: any[] = [
+    { name: '箭头', id: 'f955205' },
+    { name: '拓扑图未分类', id: '6cd3b234' },
+    { name: '云', id: '406687' },
+    { name: '网络设备', id: '3f264892' },
+    { name: '电子产品', id: '768107e4' },
+    { name: '楼宇', id: 'c109d4d' },
+    { name: '物联网未分类', id: '33253fe' },
+    { name: '逻辑门电路', id: '334c1c88' },
+    { name: '电阻', id: '597dab3' },
+    { name: '电容', id: '2181f192' },
+    { name: '电感', id: '1dba554' },
+    { name: '开关、转换器', id: '6b39d7ca' },
+    { name: '二极管', id: '3180efea' },
+    { name: '信号源', id: '6bd86063' },
+    { name: '晶体管', id: '017c4d4' },
+    { name: '仪表', id: '4e0df5d5' },
+    { name: '电子显示设备', id: '68559dd4' },
+    { name: '真空电子管', id: '181c247d' },
+    { name: '电子波形', id: '42daf6' },
+    { name: '转动与机械设备', id: '2a5e218e' },
+    { name: '电子逻辑计算器', id: 'f9beb15' },
+    { name: '电子传输/传播', id: '37f12dd3' },
+    { name: '电子未分类', id: '54aa6d1' },
+    { name: '液压符号', id: 'b03ed4e' },
+    { name: '工具', id: '108095a' },
+  ];
+  globalThis.jsPensMap = {};
+  const lists = await Promise.all(
+    arr.map((item) => openNewMaterial(item.name, item))
+  );
+  arr.forEach((item, index) => {
+    item.list = lists[index];
+    item.show = true;
+  });
+  return arr;
+}
+
+async function openNewMaterial(subclass: string, group) {
+  // const [{ GetDBMaterials, SetDBMaterials }] = await Promise.all([
+  //   import('../services/material'),
+  // ]);
+  let materials: any = await GetDBMaterials(subclass);
+  if (!materials || !materials.length) {
+    materials = await axios.get('/api/tools', {
+      params: {
+        subClass: (group as any).id,
+        pageCount: 1000,
+      },
+    });
+    if (materials) {
+      SetDBMaterials(group.name, materials);
+    }
+  }
+
+  // const newList: any[] = [];
+  materials.forEach((material: any) => {
+    if (!material.fullname) {
+      // fullname 不存在，采用其他方式
+      // newList.push(material);
+    } else {
+      // newList.push({
+      //   subClassName: material.subClassName,
+      //   id: material.id,
+      //   name: material.name,
+      //   fullname: material.fullname,
+      //   data: material.data,
+      //   svg: material.svg,
+      // });
+    }
+    globalThis.jsPensMap[material.fullname] = material.svg;
+  });
+
+  // (window as any).meta2dTools = materials;
+  // (window as any).registerToolsNew();
+
+  // (window as any).meta2dTools = undefined;
+
+  // return newList;
+}

src/views/components/Header.vue

@@ -308,231 +308,6 @@
       </a>
     </div>
   </div>
-  <!-- <t-dialog
-    v-if="payListDialog.show"
-    v-model:visible="payListDialog.show"
-    class="pay-dialog"
-    header="图纸用到的企业图形库"
-    :close-on-overlay-click="false"
-    :top="95"
-    :width="700"
-    cancel-btn="跳过"
-    confirm-btn="结算(不支持退款)"
-    @cancel="skipPay"
-    @close="payListDialog.show = false"
-    @confirm="prePay"
-  >
-    <div class="pay-line">
-      <div></div>
-      <div>已购买</div>
-      <div>价格</div>
-    </div>
-    <div class="pay-body">
-      <t-collapse defaultExpandAll>
-        <t-collapse-panel
-          v-if="[...prePayList.pngs].length"
-          value="0"
-          :header="data.goods[0].type"
-        >
-          <template #headerRightContent>
-            <t-space size="small">
-              <t-checkbox v-model="data.goods[0].checked"></t-checkbox>
-            </t-space>
-          </template>
-          <div v-for="pngPen in prePayList.pngs" class="pay-line">
-            <div>
-              <t-image :src="pngPen" :lazy="true" fit="contain" />
-              <p class="pay-p" :title="pngPen.slice(
-                  pngPen.lastIndexOf('/') + 1,
-                  pngPen.lastIndexOf('.')
-                )">
-              {{
-                pngPen.slice(
-                  pngPen.lastIndexOf('/') + 1,
-                  pngPen.lastIndexOf('.')
-                )
-              }}
-              </p>
-            </div>
-            <div>
-              <check-icon
-                v-show="data.purchasedList.some((item) => item.name === pngPen)"
-                style="color: #4480f9ff"
-              />
-            </div>
-            <div>
-              {{
-                data.purchasedList.some((item) => item.name === pngPen)
-                  ? 0
-                  : data.goods[0].unitPrice
-              }}
-            </div>
-          </div>
-          <div class="pay-tip">
-            <p v-if="data.goods[0].checked">
-              已选择{{ data.goods[0].unPurchased }}个图元 小计:￥{{
-                data.goods[0].unPurchased * data.goods[0].unitPrice
-              }}
-            </p>
-            <p v-else>已选择0个图元 小计:￥0</p>
-          </div>
-        </t-collapse-panel>
-        <t-collapse-panel
-          v-if="[...prePayList.iotPens].length"
-          value="1"
-          :header="data.goods[1].type"
-        >
-          <template #headerRightContent>
-            <t-space size="small">
-              <t-checkbox v-model="data.goods[1].checked"></t-checkbox>
-            </t-space>
-          </template>
-          <div v-for="iotPen in prePayList.iotPens" class="pay-line">
-            <div>
-              <svg class="l-icon" aria-hidden="true">
-                <use :xlink:href="'#' + iotPensMap[iotPen]?.icon"></use>
-              </svg>
-              {{ iotPensMap[iotPen]?.name || iotPen }}
-            </div>
-            <div>
-              <check-icon
-                v-show="data.purchasedList.some((item) => item.name === iotPen)"
-                style="color: #4480f9ff"
-              />
-            </div>
-            <div>
-              {{
-                data.purchasedList.some((item) => item.name === iotPen)
-                  ? 0
-                  : data.goods[1].unitPrice
-              }}
-            </div>
-          </div>
-          <div class="pay-tip">
-            <p v-if="data.goods[1].checked">
-              已选择{{ data.goods[1].unPurchased }}个图元 小计:￥{{
-                data.goods[1].unPurchased * data.goods[1].unitPrice
-              }}
-            </p>
-            <p v-else>已选择0个图元 小计:￥0</p>
-          </div>
-        </t-collapse-panel>
-        <t-collapse-panel
-          v-if="[...prePayList.svgPens].length"
-          value="2"
-          :header="data.goods[2].type"
-        >
-          <template #headerRightContent>
-            <t-space size="small">
-              <t-checkbox v-model="data.goods[2].checked"></t-checkbox>
-            </t-space>
-          </template>
-          <template v-if="data.goods[2].count === data.goods[2].total">
-            <div>
-              1套（{{
-                data.goods[2].count
-              }}个）。【说明】检查到当前项目为老版本格式，需要购买整套SVG线性图元。
-            </div>
-            <div>
-              <check-icon
-                v-show="data.goods[2].unPurchased === 0"
-                style="color: #4480f9ff"
-              />
-            </div>
-          </template>
-          <template v-else>
-            <div v-for="svgPen in prePayList.svgPens" class="pay-line">
-              <div>
-                <t-image
-                  class="pay-svg"
-                  :src="svgPen"
-                  :lazy="true"
-                  fit="contain"
-                />
-                <p class="pay-p" :title="svgPen.slice(
-                    svgPen.lastIndexOf('/') + 1,
-                    svgPen.lastIndexOf('.')
-                  )">
-                {{
-                  svgPen.slice(
-                    svgPen.lastIndexOf('/') + 1,
-                    svgPen.lastIndexOf('.')
-                  )
-                }}
-                </p>
-              </div>
-              <div>
-                <check-icon
-                  v-show="
-                    data.purchasedList.some((item) => item.name === svgPen)
-                  "
-                  style="color: #4480f9ff"
-                />
-              </div>
-              <div>
-                {{
-                  data.purchasedList.some((item) => item.name === svgPen)
-                    ? 0
-                    : data.goods[2].unitPrice
-                }}
-              </div>
-            </div>
-          </template>
-          <div class="pay-tip">
-            <p v-if="data.goods[2].checked">
-              已选择{{ data.goods[2].unPurchased }}个图元 小计:￥{{
-                data.goods[2].unPurchased * data.goods[2].unitPrice
-              }}
-            </p>
-            <p v-else>已选择0个图元 小计:￥0</p>
-          </div>
-        </t-collapse-panel>
-        <t-collapse-panel
-          v-if="[...prePayList.jsPens].length"
-          value="3"
-          :header="data.goods[3].type"
-        >
-          <template #headerRightContent>
-            <t-space size="small">
-              <t-checkbox v-model="data.goods[3].checked"></t-checkbox>
-            </t-space>
-          </template>
-          <div v-for="jsPen in prePayList.jsPens" class="pay-line">
-            <div style="margin-left: 16px">{{ jsPen }}</div>
-            <div>
-              <check-icon
-                v-show="data.purchasedList.some((item) => item.name === jsPen)"
-                style="color: #4480f9ff"
-              />
-            </div>
-            <div>
-              {{
-                data.purchasedList.some((item) => item.name === jsPen)
-                  ? 0
-                  : data.goods[3].unitPrice
-              }}
-            </div>
-          </div>
-          <div class="pay-tip">
-            <p v-if="data.goods[3].checked">
-              已选择{{ data.goods[3].unPurchased }}个图元 小计:￥{{
-                data.goods[3].unPurchased * data.goods[3].unitPrice
-              }}
-            </p>
-            <p v-else>已选择0个图元 小计:￥0</p>
-          </div>
-        </t-collapse-panel>
-      </t-collapse>
-    </div>
-    <div class="flex pay-footer">
-      <p>企业图形库购买一次，永久使用</p>
-      <div class="flex pay-price">
-        共{{ finalPrice.total }}个图元，合计
-        <p>￥</p>
-        <p>{{ finalPrice.price }}</p>
-      </div>
-    </div>
-  </t-dialog> -->
   <t-dialog
     v-if="payListDialog.show"
     v-model:visible="payListDialog.show"
@@ -586,6 +361,7 @@
     <div v-if="data.payDiagram.expend" class="pay-down">
         <div v-for="item in data.payDiagram.list">
           <img v-if="item.img" :src="item.img" />
+          <div v-else-if="item.svg" v-html="item.svg" ></div>
           <svg v-else class="l-icon" aria-hidden="true">
             <use :xlink:href="'#' + iotPensMap[item.name]?.icon"></use>
           </svg>
@@ -622,9 +398,9 @@
    </template>
    <div style="margin:12px 0px;">
     Zip包仅包含数据文件和图片文件，不包含js等依赖库。
-【注意】Zip包用于平台（已包含js等依赖库）的快捷导入导出项目，无法作为独立部署包使用。
-   <p v-if="downloadZipDialog.hasJs" style="font-weight:bold;">
-      当前图纸包含js企业图形依赖库。
+    <div class="title desc">- 注意</div>Zip包用于平台（已包含js等依赖库）的快捷导入导出项目，无法作为独立部署包使用。
+    <p v-if="downloadZipDialog.hasJs">
+      <p class="title desc">- 当前图纸包含js企业图形依赖库。</p>
       项目中打开如果没有js企业图形依赖库，对应的图元将无法显示。
       推荐下载为离线部署包（包含js企业图形依赖库）。
   </p>
@@ -750,6 +526,7 @@ import {
 } from '@/services/download';
 import { formComponents } from '@/services/defaults';
 import WechatPay from './WechatPay.vue';
+import {getNetJsDiagram} from '@/services/material';
 
 const { enterprise } = useEnterprise();
 const router = useRouter();
@@ -783,6 +560,7 @@ const data = reactive<any>({
 
 onBeforeMount(async () => {
   // getAssets();
+  getNetJsDiagram();
 });
 
 const logout = () => {
@@ -1326,7 +1104,6 @@ const preGetPayList = async () => {
         pen.iframe.indexOf('/preview') !== -1)
   );
   if (pen_pay && pen_pay.length) {
-    //存在3d场景
     pen_pay.forEach((pen) => {
       //发送消息
       (
@@ -1364,6 +1141,8 @@ const showPayListDialog = async () => {
         pen.iframe.indexOf('/view/v') !== -1||pen.iframe.indexOf('data=v') !== -1)
   );
   let price = 0;
+  data.payDiagram.checked = true;
+  data.payDiagram.expend = false;
   data.payGoods ={}
   deploys.forEach((item) => {
    if(item.name==="3D离线部署下载"){
@@ -1406,6 +1185,10 @@ const showPayListDialog = async () => {
           data.payDiagram.list.push({
             name:item
           });
+        }else if(goods.type==='JS线性图元'){
+          data.payDiagram.list.push({
+            svg:globalThis.jsPensMap[item]
+          });
         }else{
           data.payDiagram.list.push({
             img:item
@@ -2702,9 +2485,14 @@ const onSuccess = (success: boolean) => {
         height:80px;
       }
       .l-icon{
-        width: 80px;
-        height: 80px;
-        margin:8px;
+        /* width: 80px; */
+        /* height: 80px; */
+        /* margin:8px; */
+        font-size:60px;
+        margin:18px;
+      }
+      &>div{
+        margin: 32px 36px;
       }
     }
     

vite.config.ts

@@ -48,13 +48,13 @@ export default defineConfig({
       // '/svg': 'http://192.168.110.6:777',
 
       // java 后端 http://192.168.110.6:8083
-      '/image': 'http://192.168.110.6:8083',
-      '/file': 'http://192.168.110.6:8083',
-      '/api': 'http://192.168.110.6:8083',
-      '/v/material': 'http://192.168.110.6:8083',
-      '/png': 'http://192.168.110.6:8083',
-      '/svg': 'http://192.168.110.6:8083',
-      
+      '/image': 'http://192.168.110.6:777/',
+      '/file': 'http://192.168.110.6:777/',
+      '/api': 'http://192.168.110.6:777/',
+      '/v/material': 'http://192.168.110.6:777/',
+      '/png': 'http://192.168.110.6:777/',
+      '/svg': 'http://192.168.110.6:777/',
+      '/api/tools':'https://2d.le5le.com'
       // '/image': 'https://v.le5le.com/',
       // '/file': 'https://v.le5le.com/',
       // '/api': 'https://v.le5le.com/',