汽车安全测试知识库-前端代码初步提交

package.json

@@ -25,12 +25,13 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "cspell": "^8.1.3",
+    "d3-hierarchy": "^2.0.0",
     "echarts": "5.4.0",
     "echarts-liquidfill": "3.1.0",
     "element-ui": "2.15.13",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
-    "graphql": "^16.8.1",
+    "graphql": "^15.9.0",
     "graphql-tag": "^2.12.6",
     "graphql-tools": "^9.0.1",
     "highlight.js": "9.18.5",

src/charts/json/option-view.json

+{
+  "硬件层": {
+    "$count": 5,
+    "内部有线接口": {
+      "$count": 1,
+      "JTAG": {
+        "$count": 1
+      },
+      "SPI": {
+        "$count": 1
+      },
+      "UART": {
+        "$count": 1
+      },
+      "SWD": {
+        "$count": 1
+      }
+    },
+    "外部有线接口": {
+      "$count": 1,
+      "有线以太网": {
+        "$count": 1
+      },
+      "CAN": {
+        "$count": 1
+      },
+      "LIN": {
+        "$count": 1
+      },
+      "FlexRay": {
+        "$count": 1
+      },
+      "USB": {
+        "$count": 1
+      },
+      "充电接口": {
+        "$count": 1
+      },
+      "SD卡": {
+        "$count": 1
+      },
+      "HDMI": {
+        "$count": 1
+      }
+    },
+    "无线协议": {
+      "$count": 1,
+      "Bluetooth": {
+        "$count": 1
+      },
+      "BLE": {
+        "$count": 1
+      },
+      "Wi-Fi": {
+        "$count": 1
+      },
+      "蜂窝网络": {
+        "$count": 1
+      },
+      "GNSS": {
+        "$count": 1
+      },
+      "UWB": {
+        "$count": 1
+      },
+      "NFC": {
+        "$count": 1
+      },
+      "RF": {
+        "$count": 1
+      },
+      "DSRC": {
+        "$count": 1
+      }
+    },
+    "芯片": {
+      "$count": 1,
+      "存储": {
+        "$count": 1
+      },
+      "计算": {
+        "$count": 1
+      },
+      "通信": {
+        "$count": 1
+      },
+      "能源": {
+        "$count": 1
+      },
+      "接口": {
+        "$count": 1
+      }
+    },
+    "硬件": {
+      "$count": 1,
+      "PCB": {
+        "$count": 1
+      },
+      "雷达": {
+        "$count": 1
+      },
+      "摄像头": {
+        "$count": 1
+      },
+      "显示屏": {
+        "$count": 1
+      },
+      "麦克风": {
+        "$count": 1
+      },
+      "扬声器": {
+        "$count": 1
+      }
+    }
+  },
+  "硬件抽象层": {
+    "$count": 3,
+    "安全": {
+      "$count": 1,
+      "安全启动": {
+        "$count": 1
+      },
+      "安全存储": {
+        "$count": 1
+      },
+      "安全加解密": {
+        "$count": 1
+      }
+    },
+    "驱动": {
+      "$count": 1,
+      "微控制器": {
+        "$count": 1
+      },
+      "存储器": {
+        "$count": 1
+      },
+      "通信": {
+        "$count": 1
+      },
+      "I/O": {
+        "$count": 1
+      },
+      "文件系统": {
+        "$count": 1
+      }
+    },
+    "协议栈": {
+      "$count": 1,
+      "USB": {
+        "$count": 1
+      },
+      "Bluetooth": {
+        "$count": 1
+      },
+      "Wi-Fi": {
+        "$count": 1
+      },
+      "BLE": {
+        "$count": 1
+      },
+      "蜂窝网络": {
+        "$count": 1
+      },
+      "GNSS": {
+        "$count": 1
+      },
+      "NearLink": {
+        "$count": 1
+      },
+      "NFC": {
+        "$count": 1
+      },
+      "UWB": {
+        "$count": 1
+      },
+      "CAN": {
+        "$count": 1
+      },
+      "有线以太网": {
+        "$count": 1
+      }
+    }
+  },
+  "服务层": {
+    "$count": 3,
+    "存储": {
+      "$count": 1,
+      "日志存储": {
+        "$count": 1
+      },
+      "数据存储": {
+        "$count": 1
+      },
+      "文件访问": {
+        "$count": 1
+      },
+      "GPU访问": {
+        "$count": 1
+      }
+    },
+    "通讯": {
+      "$count": 1,
+      "Bluetooth配置": {
+        "$count": 1
+      },
+      "WLAN配置": {
+        "$count": 1
+      },
+      "以太网通讯": {
+        "$count": 1
+      },
+      "CAN通讯": {
+        "$count": 1
+      },
+      "系统内通讯": {
+        "$count": 1
+      },
+      "Bluetooth通讯": {
+        "$count": 1
+      },
+      "其他": {
+        "$count": 1
+      }
+    },
+    "运行时": {
+      "$count": 1,
+      "复杂操作系统": {
+        "$count": 1
+      },
+      "实时操作系统": {
+        "$count": 1
+      }
+    }
+  },
+  "应用层": {
+    "$count": 2,
+    "其他": {
+      "$count": 1,
+      "浏览器": {
+        "$count": 1
+      },
+      "语音服务": {
+        "$count": 1
+      },
+      "远程更新": {
+        "$count": 1
+      },
+      "胎压监测": {
+        "$count": 1
+      },
+      "工程模式": {
+        "$count": 1
+      },
+      "车辆控制": {
+        "$count": 1
+      },
+      "投屏": {
+        "$count": 1
+      },
+      "远程车辆控制": {
+        "$count": 1
+      },
+      "多媒体服务": {
+        "$count": 1
+      },
+      "其他": {
+        "$count": 1
+      }
+    },
+    "系统": {
+      "$count": 1,
+      "调试服务": {
+        "$count": 1
+      },
+      "应用安装服务": {
+        "$count": 1
+      },
+      "SSH服务": {
+        "$count": 1
+      },
+      "FTP服务": {
+        "$count": 1
+      },
+      "诊断服务": {
+        "$count": 1
+      },
+      "OTA服务": {
+        "$count": 1
+      },
+      "ADB服务": {
+        "$count": 1
+      },
+      "其他": {
+        "$count": 1
+      },
+      "Telnet服务": {
+        "$count": 1
+      }
+    }
+  }
+}

src/views/cst-knowledge-base/api/index.js

+import request from '@/utils/request'
+
+// 汽车安全测试知识库 首页接口
+export function getIndexMapData() {
+  return request({
+    url: '',
+    method: 'get'
+  })
+}

src/views/cst-knowledge-base/api/objects.js

+import request from '@/utils/request'
+
+// 查询汽车安全测试对象列表
+export function listObjects(query) {
+  return request({
+    url: '/cstobjects/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询汽车安全测试对象详细
+export function getObjects(id) {
+  return request({
+    url: '/cstobjects/' + id,
+    method: 'get'
+  })
+}
+
+// 新增汽车安全测试对象
+export function addObjects(data) {
+  return request({
+    url: '/cstobjects',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改汽车安全测试对象
+export function updateObjects(data) {
+  return request({
+    url: '/cstobjects',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除汽车安全测试对象
+export function delObjects(id) {
+  return request({
+    url: '/cstobjects/' + id,
+    method: 'delete'
+  })
+}

src/views/cst-knowledge-base/api/tools.js

+import request from '@/utils/request'
+
+// 查询汽车安全测试属性测试工具列表
+export function listTools(query) {
+  return request({
+    url: '/cst/tools/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询汽车安全测试属性测试工具详细
+export function getTools(id) {
+  return request({
+    url: '/cst/tools/' + id,
+    method: 'get'
+  })
+}
+
+// 新增汽车安全测试属性测试工具
+export function addTools(data) {
+  return request({
+    url: '/cst/tools',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改汽车安全测试属性测试工具
+export function updateTools(data) {
+  return request({
+    url: '/cst/tools',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除汽车安全测试属性测试工具
+export function delTools(id) {
+  return request({
+    url: '/cst/tools/' + id,
+    method: 'delete'
+  })
+}

src/views/cst-knowledge-base/cst-method/index.vue

+<template>
+<!-- 方法库管理 -->
+</template>
+
+<script>
+export default {
+  name: "index",
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/cst-properties/index.vue

+<template>
+  <!-- 对象属性管理 -->
+</template>
+
+<script>
+export default {
+  name: "index",
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/cst-public-sentiment/analyze/index.vue

+<template>
+  <!-- 舆情分析 -->
+</template>
+
+<script>
+export default {
+  name: "index",
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/cst-public-sentiment/dismantle/index.vue

+<template>
+  <!-- 舆情库拆解管理 -->
+</template>
+
+<script>
+export default {
+  name: "index",
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/cst-public-sentiment/index.vue

+<template>
+  <!-- 舆情库管理 -->
+</template>
+
+<script>
+export default {
+  name: "index",
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/cst-scenario/analyze/index.vue

+<template>
+  <!-- 场景分析 -->
+</template>
+
+<script>
+export default {
+  name: "index",
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/display-drawing/CircularStackingDiagram.vue

+<template>
+  <!-- 首页圆形堆积图 -->
+  <div>首页圆形堆积图</div>
+</template>
+<script>
+
+
+export default {
+  name: "CircularStackingDiagram",
+  components: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/display-drawing/ForceMap.vue

+<template>
+  <!-- 力导图 -->
+</template>
+<script>
+
+export default {
+  name: "ForceMap",
+  components: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/display-drawing/RelationalGraph.vue

+<template>
+  <!-- 关系图 -->
+</template>
+<script>
+
+export default {
+  name: "RelationalGraph",
+  components: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/cst-knowledge-base/display-drawing/Test.vue

+<template>
+  <!-- 测试 -->
+  <div class="parent_container">
+    <div
+      ref="chartContainer"
+      class="chart_container"
+    ></div>
+  </div>
+</template>
+<script>
+import * as d3 from 'd3-hierarchy';
+import * as echarts from 'echarts';
+
+export default {
+  name: "Test",
+  components: {},
+  data() {
+    return {
+      // Echarts 元素对象
+      myChart: null,
+      // Echarts 配置
+      option: null,
+      // 系列数据
+      seriesData: [],
+      // 最大层级深度
+      maxDepth: 0,
+      // D3 数据
+      displayRoot: null,
+      // 最外层 D3 数据
+      displayRootData: null,
+      // 测试用的本地 json 文件
+      optionView: require('/src/charts/json/option-view.json')
+    }
+  },
+  watch: {},
+  mounted() {
+    // 初始化 Echarts
+    this.initChart();
+    // 加载数据
+    this.loadData();
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
+  },
+  computed: {},
+  methods: {
+    /**
+     * 初始化 Echarts
+     */
+    initChart() {
+      this.myChart = echarts.init(this.$refs.chartContainer, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+      });
+    },
+    /**
+     * 加载数据
+     */
+    async loadData() {
+      // 接口请求数据
+      // const [rawData] = await Promise.all([
+      //   getIndexMapData().then(response => response.data),
+      //   import('d3-hierarchy').then(module => module.default)
+      // ]);
+
+      // 使用测试数据
+      const [rawData] = await Promise.all([
+        import('/src/charts/json/option-view.json').then(module => module.default),
+        import('d3-hierarchy').then(module => module.default)
+      ]);
+
+      this.prepareData(rawData);
+      this.initChartOptions();
+    },
+    /**
+     * json 数据处理
+     *
+     * @param rawData
+     * @returns {{maxDepth: number, seriesData: *[]}}
+     */
+    prepareData(rawData) {
+      const seriesData = [];
+      let maxDepth = 0;
+
+      const convert = (source, basePath, depth) => {
+        if (!source || maxDepth > 5) return;
+        maxDepth = Math.max(depth, maxDepth);
+        seriesData.push({
+          id: basePath,
+          value: source.$count,
+          depth: depth,
+          index: seriesData.length
+        });
+        for (const key in source) {
+          if (source.hasOwnProperty(key) && !key.match(/^\$/)) {
+            convert(source[key], `${basePath}.${key}`, depth + 1);
+          }
+        }
+      };
+
+      convert(rawData, '汽车安全测试知识库', 0);
+      this.seriesData = seriesData;
+      this.maxDepth = maxDepth;
+    },
+    /**
+     * 初始化Echarts配置
+     *
+     * @param seriesData
+     * @param maxDepth
+     */
+    initChartOptions() {
+      this.displayRoot = this.stratify();
+
+      const option = {
+        dataset: {
+          source: this.seriesData
+        },
+        tooltip: {},
+        visualMap: [
+          {
+            show: false,
+            min: 0,
+            max: this.maxDepth,
+            dimension: 'depth',
+            inRange: {
+              color: ['#006edd', '#e0ffff']
+            }
+          }
+        ],
+        series: {
+          type: 'custom',
+          renderItem: this.renderItem,
+          progressive: 0,
+          coordinateSystem: 'none',
+          encode: {
+            tooltip: 'value',
+            itemName: 'id'
+          }
+        }
+      };
+
+      this.myChart.setOption(option);
+      this.myChart.on('click', {seriesIndex: 0}, this.handleChartClick);
+      this.myChart.getZr().on('click', this.handleBackgroundClick);
+    },
+    /**
+     * 层级数据 转化为 D3的层级结构
+     *
+     * @param seriesData
+     * @returns {*}
+     */
+    stratify() {
+      return d3
+        .stratify()
+        .parentId(d => d.id.substring(0, d.id.lastIndexOf('.')))(this.seriesData)
+        .sum(d => d.value || 0)
+        .sort((a, b) => b.value - a.value);
+    },
+    /**
+     * Echarts 图表 节点位置大小布局计算
+     *
+     * @param params
+     * @param api
+     * @param displayRoot
+     */
+    overallLayout(params, api) {
+      const context = params.context;
+      d3.pack()
+        .size([api.getWidth() - 2, api.getHeight() - 2])
+        .padding(3)(this.displayRoot);
+      context.nodes = {};
+      this.displayRoot.descendants().forEach(node => {
+        context.nodes[node.id] = node;
+      });
+    },
+    /**
+     * Echarts 图表 数据项渲染
+     *
+     * @param displayRoot
+     * @param params
+     * @param api
+     * @returns {{shape: {r, cx, cy}, textConfig: {position: string}, z2: number, emphasis: {style: {shadowOffsetX: number, shadowOffsetY: number, fontFamily: string, shadowBlur: number, fontSize: number, shadowColor: string}}, focus: Uint32Array, textContent: {emphasis: {style: {overflow: null, fontSize: number}}, style: {fontFamily: string, overflow: string, width: number, fontSize: number, text: (*|string)}, type: string}, style: {fill: *}, type: string, transition: string[]}}
+     */
+    renderItem(params, api) {
+      const context = params.context || (params.context = {});
+      if (!context.layout) {
+        this.overallLayout(params, api);
+        context.layout = true;
+      }
+
+      const nodePath = api.value('id');
+      const node = context.nodes[nodePath];
+      if (!node) return;
+
+      const isLeaf = !node.children || !node.children.length;
+      const focus = new Uint32Array(node.descendants().map(node => node.data.index));
+      const nodeName = isLeaf
+        ? nodePath.slice(nodePath.lastIndexOf('.') + 1).split(/(?=[A-Z][^A-Z])/g).join('\n')
+        : '';
+      const z2 = api.value('depth') * 2;
+
+      return {
+        type: 'circle',
+        focus: focus,
+        shape: {
+          cx: node.x,
+          cy: node.y,
+          r: node.r
+        },
+        transition: ['shape'],
+        z2: z2,
+        textContent: {
+          type: 'text',
+          style: {
+            text: nodeName,
+            fontFamily: 'Arial',
+            width: node.r * 1.3,
+            overflow: 'truncate',
+            fontSize: node.r / 3
+          },
+          emphasis: {
+            style: {
+              overflow: null,
+              fontSize: Math.max(node.r / 3, 12)
+            }
+          }
+        },
+        textConfig: {
+          position: 'inside'
+        },
+        style: {
+          fill: api.visual('color')
+        },
+        emphasis: {
+          style: {
+            fontFamily: 'Arial',
+            fontSize: 12,
+            shadowBlur: 20,
+            shadowOffsetX: 3,
+            shadowOffsetY: 5,
+            shadowColor: 'rgba(0,0,0,0.3)'
+          }
+        }
+      };
+    },
+    handleChartClick(params) {
+      this.drillDown(params.data.id);
+    },
+    handleBackgroundClick(event) {
+      if (!event.target) {
+        this.drillDown();
+      }
+    },
+    /**
+     * Echarts 图表 数据钻取
+     *
+     * @param targetNodeId
+     * @param displayRoot
+     */
+    drillDown(targetNodeId) {
+      if (targetNodeId) {
+        this.displayRoot = this.displayRoot.descendants().find(node => node.data.id === targetNodeId);
+      } else {
+        this.displayRoot = this.stratify();
+      }
+
+      this.displayRoot.parent = null;
+      this.myChart.setOption({
+        dataset: {source: this.seriesData}
+      });
+    },
+    /**
+     * 根据浏览器窗口大小调整Echarts图表尺寸
+     */
+    handleResize() {
+      if (this.myChart) {
+        this.myChart.resize();
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.parent_container {
+}
+
+.chart_container {
+  width: 100%;
+  height: 50rem;
+  display: flex;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  justify-content: center;
+}
+
+</style>

src/views/system/user/index.vue

@@ -672,6 +672,8 @@ export default {
     getDeptTree() {
       deptTreeSelect().then(response => {
         this.deptOptions = response.data
+        // TODO: please clear this log
+        console.log(`this.deptOptions`, this.deptOptions)
       })
     },
     // 筛选节点