修改样式

.env

@@ -1,4 +1,4 @@
-VITE_APP_TITLE=园区能源云平台
+VITE_APP_TITLE=全链路监控平台
 VITE_APP_IMGURL=https://gateway.zngh-e.com
 VITE_APP_BASEURL=https://gateway.zngh-e.com/api
 VITE_IMG_BASEURL=https://gateway.zngh-e.com

src/components/v2/distribution.vue

@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="units">
-      <div class="label" v-for="item in list" :key="item.label">{{ item.value }}万元</div>
+      <div class="label" v-for="item in list" :key="item.label">{{ item.value }}%</div>
     </div>
   </div>
 </template>
@@ -25,7 +25,7 @@ const props = defineProps({
   list: Array
 })
 
-const max = computed(() => Math.max(...props.list.map((item) => item.value)))
+const max = 100
 </script>
 
 <style scoped lang="scss">
@@ -36,7 +36,6 @@ const max = computed(() => Math.max(...props.list.map((item) => item.value)))
   display: flex;
   justify-content: space-between;
   align-items: stretch;
-  padding-right: 1vw;
   .units {
     display: flex;
     flex-direction: column;

src/views/v2/AllLink.vue

@@ -1,511 +1,192 @@
 <template>
-  <div class="chart"></div>
+  <div class="chart" ref="chartRef"></div>
 </template>
 <script setup>
-console.log('asdf')
-// import G6 from '@antv/g6';
+import G6 from '@antv/g6';
+import { onMounted, ref } from 'vue';
 
-// const data = {
-//   nodes: [
-//     {
-//       id: '0',
-//       label: '0',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '1',
-//       label: '1',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '2',
-//       label: '2',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '3',
-//       label: '3',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '4',
-//       label: '4',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '5',
-//       label: '5',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '6',
-//       label: '6',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '7',
-//       label: '7',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '8',
-//       label: '8',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '9',
-//       label: '9',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '10',
-//       label: '10',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '11',
-//       label: '11',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '12',
-//       label: '12',
-//       cluster: 'a',
-//     },
-//     {
-//       id: '13',
-//       label: '13',
-//       cluster: 'b',
-//     },
-//     {
-//       id: '14',
-//       label: '14',
-//       cluster: 'b',
-//     },
-//     {
-//       id: '15',
-//       label: '15',
-//       cluster: 'b',
-//     },
-//     {
-//       id: '16',
-//       label: '16',
-//       cluster: 'b',
-//     },
-//     {
-//       id: '17',
-//       label: '17',
-//       cluster: 'b',
-//     },
-//     {
-//       id: '18',
-//       label: '18',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '19',
-//       label: '19',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '20',
-//       label: '20',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '21',
-//       label: '21',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '22',
-//       label: '22',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '23',
-//       label: '23',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '24',
-//       label: '24',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '25',
-//       label: '25',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '26',
-//       label: '26',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '27',
-//       label: '27',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '28',
-//       label: '28',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '29',
-//       label: '29',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '30',
-//       label: '30',
-//       cluster: 'c',
-//     },
-//     {
-//       id: '31',
-//       label: '31',
-//       cluster: 'd',
-//     },
-//     {
-//       id: '32',
-//       label: '32',
-//       cluster: 'd',
-//     },
-//     {
-//       id: '33',
-//       label: '33',
-//       cluster: 'd',
-//     },
-//   ],
-//   edges: [
-//     {
-//       source: '0',
-//       target: '1',
-//     },
-//     {
-//       source: '0',
-//       target: '2',
-//     },
-//     {
-//       source: '0',
-//       target: '3',
-//     },
-//     {
-//       source: '0',
-//       target: '4',
-//     },
-//     {
-//       source: '0',
-//       target: '5',
-//     },
-//     {
-//       source: '0',
-//       target: '7',
-//     },
-//     {
-//       source: '0',
-//       target: '8',
-//     },
-//     {
-//       source: '0',
-//       target: '9',
-//     },
-//     {
-//       source: '0',
-//       target: '10',
-//     },
-//     {
-//       source: '0',
-//       target: '11',
-//     },
-//     {
-//       source: '0',
-//       target: '13',
-//     },
-//     {
-//       source: '0',
-//       target: '14',
-//     },
-//     {
-//       source: '0',
-//       target: '15',
-//     },
-//     {
-//       source: '0',
-//       target: '16',
-//     },
-//     {
-//       source: '2',
-//       target: '3',
-//     },
-//     {
-//       source: '4',
-//       target: '5',
-//     },
-//     {
-//       source: '4',
-//       target: '6',
-//     },
-//     {
-//       source: '5',
-//       target: '6',
-//     },
-//     {
-//       source: '7',
-//       target: '13',
-//     },
-//     {
-//       source: '8',
-//       target: '14',
-//     },
-//     {
-//       source: '9',
-//       target: '10',
-//     },
-//     {
-//       source: '10',
-//       target: '22',
-//     },
-//     {
-//       source: '10',
-//       target: '14',
-//     },
-//     {
-//       source: '10',
-//       target: '12',
-//     },
-//     {
-//       source: '10',
-//       target: '24',
-//     },
-//     {
-//       source: '10',
-//       target: '21',
-//     },
-//     {
-//       source: '10',
-//       target: '20',
-//     },
-//     {
-//       source: '11',
-//       target: '24',
-//     },
-//     {
-//       source: '11',
-//       target: '22',
-//     },
-//     {
-//       source: '11',
-//       target: '14',
-//     },
-//     {
-//       source: '12',
-//       target: '13',
-//     },
-//     {
-//       source: '16',
-//       target: '17',
-//     },
-//     {
-//       source: '16',
-//       target: '18',
-//     },
-//     {
-//       source: '16',
-//       target: '21',
-//     },
-//     {
-//       source: '16',
-//       target: '22',
-//     },
-//     {
-//       source: '17',
-//       target: '18',
-//     },
-//     {
-//       source: '17',
-//       target: '20',
-//     },
-//     {
-//       source: '18',
-//       target: '19',
-//     },
-//     {
-//       source: '19',
-//       target: '20',
-//     },
-//     {
-//       source: '19',
-//       target: '33',
-//     },
-//     {
-//       source: '19',
-//       target: '22',
-//     },
-//     {
-//       source: '19',
-//       target: '23',
-//     },
-//     {
-//       source: '20',
-//       target: '21',
-//     },
-//     {
-//       source: '21',
-//       target: '22',
-//     },
-//     {
-//       source: '22',
-//       target: '24',
-//     },
-//     {
-//       source: '22',
-//       target: '25',
-//     },
-//     {
-//       source: '22',
-//       target: '26',
-//     },
-//     {
-//       source: '22',
-//       target: '23',
-//     },
-//     {
-//       source: '22',
-//       target: '28',
-//     },
-//     {
-//       source: '22',
-//       target: '30',
-//     },
-//     {
-//       source: '22',
-//       target: '31',
-//     },
-//     {
-//       source: '22',
-//       target: '32',
-//     },
-//     {
-//       source: '22',
-//       target: '33',
-//     },
-//     {
-//       source: '23',
-//       target: '28',
-//     },
-//     {
-//       source: '23',
-//       target: '27',
-//     },
-//     {
-//       source: '23',
-//       target: '29',
-//     },
-//     {
-//       source: '23',
-//       target: '30',
-//     },
-//     {
-//       source: '23',
-//       target: '31',
-//     },
-//     {
-//       source: '23',
-//       target: '33',
-//     },
-//     {
-//       source: '32',
-//       target: '33',
-//     },
-//   ],
-// };
+const chartRef = ref()
 
-// const colors = [
-//   '#BDD2FD',
-//   '#BDEFDB',
-//   '#C2C8D5',
-//   '#FBE5A2',
-//   '#F6C3B7',
-//   '#B6E3F5',
-//   '#D3C6EA',
-//   '#FFD8B8',
-//   '#AAD8D8',
-//   '#FFD6E7',
-// ];
-// const strokes = [
-//   '#5B8FF9',
-//   '#5AD8A6',
-//   '#5D7092',
-//   '#F6BD16',
-//   '#E8684A',
-//   '#6DC8EC',
-//   '#9270CA',
-//   '#FF9D4D',
-//   '#269A99',
-//   '#FF99C3',
-// ];
+const data = {
+  nodes: [
+    {
+      id: '0',
+      label: 'Zabbix server linux',
+      cluster: 'a',
+    },
+    {
+      id: '1',
+      label: 'xybclinux',
+      cluster: 'b',
+    },
+    {
+      id: '2',
+      label: 'Zabbix server tomcat',
+      cluster: 'b',
+    },
+    {
+      id: '3',
+      label: 'Zabbix server mysql',
+      cluster: 'b',
+    },
+    {
+      id: '4',
+      label: 'tomcat pilot',
+      cluster: 'c',
+    },
+    {
+      id: '5',
+      label: 'xybcmysql',
+      cluster: 'c',
+    },
+    {
+      id: '6',
+      label: 'Xybc',
+      cluster: 'a',
+    },
+    {
+      id: '7',
+      label: 'linux pilot',
+      cluster: 'd',
+    },
+    {
+      id: '8',
+      label: 'Zabbix server',
+      cluster: 'd',
+    },
+    {
+      id: '9',
+      label: 'pilot alive',
+      cluster: 'e',
+    },
+  ],
+  edges: [
+    {
+      source: '0',
+      target: '2',
+    },
+    {
+      source: '0',
+      target: '3',
+    },
+    {
+      source: '2',
+      target: '5',
+    },
+    {
+      source: '2',
+      target: '4',
+    },
+    {
+      source: '4',
+      target: '7',
+    },
+    {
+      source: '5',
+      target: '8',
+    },
+    {
+      source: '8',
+      target: '9',
+    },
+    {
+      source: '1',
+      target: '6',
+    }
+  ],
+};
 
-// const nodes = data.nodes;
-// const clusterMap = new Map();
-// let clusterId = 0;
-// nodes.forEach(function (node) {
-//   // cluster
-//   if (node.cluster && clusterMap.get(node.cluster) === undefined) {
-//     clusterMap.set(node.cluster, clusterId);
-//     clusterId++;
-//   }
-//   const cid = clusterMap.get(node.cluster);
-//   if (!node.style) {
-//     node.style = {};
-//   }
-//   node.style.fill = colors[cid % colors.length];
-//   node.style.stroke = strokes[cid % strokes.length];
-// });
+const colors = [
+  '#BDD2FD',
+  '#BDEFDB',
+  '#C2C8D5',
+  '#FBE5A2',
+  '#F6C3B7',
+  '#B6E3F5',
+  '#D3C6EA',
+  '#FFD8B8',
+  '#AAD8D8',
+  '#FFD6E7',
+];
+const strokes = [
+  '#5B8FF9',
+  '#5AD8A6',
+  '#5D7092',
+  '#F6BD16',
+  '#E8684A',
+  '#6DC8EC',
+  '#9270CA',
+  '#FF9D4D',
+  '#269A99',
+  '#FF99C3',
+];
 
-// const container = document.getElementById('chart');
-// const width = container.scrollWidth;
-// const height = container.scrollHeight || 500;
-// const graph = new G6.Graph({
-//   container: 'container',
-//   width,
-//   height,
-//   modes: {
-//     default: ['drag-canvas', 'drag-node'],
-//   },
-//   layout: {
-//     type: 'fruchterman',
-//     gravity: 10,
-//     speed: 5,
-//     clustering: true,
-//   },
-//   animate: true,
-//   defaultNode: {
-//     size: 20,
-//   },
-//   defaultEdge: {
-//     style: {
-//       endArrow: {
-//         path: 'M 0,0 L 8,4 L 8,-4 Z',
-//         fill: '#e2e2e2',
-//       },
-//     },
-//   },
-// });
-// graph.data(data);
-// graph.render();
+onMounted(() => {
+  draw()
+})
 
-// if (typeof window !== 'undefined')
-//   window.onresize = () => {
-//     if (!graph || graph.get('destroyed')) return;
-//     if (!container || !container.scrollWidth || !container.scrollHeight) return;
-//     graph.changeSize(container.scrollWidth, container.scrollHeight);
-//   };
+function draw() {
+  const nodes = data.nodes;
+  const clusterMap = new Map();
+  let clusterId = 0;
+  nodes.forEach(function (node) {
+    // cluster
+    if (node.cluster && clusterMap.get(node.cluster) === undefined) {
+      clusterMap.set(node.cluster, clusterId);
+      clusterId++;
+    }
+    const cid = clusterMap.get(node.cluster);
+    if (!node.style) {
+      node.style = {};
+    }
+    node.style.fill = colors[cid % colors.length];
+    node.style.stroke = strokes[cid % strokes.length];
+  });
+
+  const container = chartRef.value
+  const width = container.scrollWidth;
+  const height = container.scrollHeight || 500;
+  const graph = new G6.Graph({
+    container,
+    width,
+    height,
+    modes: {
+      default: ['drag-canvas', 'drag-node'],
+    },
+    layout: {
+      type: 'fruchterman',
+      gravity: 10,
+      speed: 5,
+      clustering: true,
+    },
+    animate: true,
+    defaultNode: {
+      size: 20,
+    },
+    defaultEdge: {
+      style: {
+        endArrow: {
+          path: 'M 0,0 L 8,4 L 8,-4 Z',
+          fill: '#e2e2e2',
+        },
+      },
+    },
+  });
+  graph.data(data);
+  graph.render();
+
+  if (typeof window !== 'undefined')
+    window.onresize = () => {
+      if (!graph || graph.get('destroyed')) return;
+      if (!container || !container.scrollWidth || !container.scrollHeight) return;
+      graph.changeSize(container.scrollWidth, container.scrollHeight);
+    };
+
+}
 
 </script>
 <style lang="scss" scoped>
-.chart{
+.chart {
   width: 100%;
   height: 100%;
 }

src/views/v2/Home.vue

@@ -2,44 +2,162 @@
   <div class="dashboard-wrapper">
     <div class="v2-page flex-row-start gap dashboard">
       <div class="part left flex-column-stretch pb-2">
-        <div class="part-title mb-2">xxxx</div>
-        <div class="flex-row mt-2">
-          <subtitle class="flex1">xxxx</subtitle>
-          <subtitle class="flex1">xxxx</subtitle>
+        <!-- <div class=" flex1 my-2 flex-row gap-2">
+          <num-bar-card title="数据中心" unit="个">1</num-bar-card>
+          <num-bar-card title="机柜" unit="个">2223</num-bar-card>
+        </div> -->
+        <div class="my-2 flex-row gap-2" style="height: 10vh;">
+          <numCardText title="数据中心数量" unit="个" :value="12"></numCardText>
+          <numCardText title="机柜数量" unit="个" :value="12423"></numCardText>
+        </div>
+        <subtitle class="">数量统计</subtitle>
+        <div class=" flex-row">
+          <num-bar-line title="机柜" unit="个">12</num-bar-line>
+          <num-bar-line title="服务器" unit="个">423</num-bar-line>
+        </div>
+        <div class="  flex-row">
+          <num-bar-line title="操作系统" unit="个">23</num-bar-line>
+          <num-bar-line title="中间件" unit="个">546</num-bar-line>
         </div>
-        <div class="flex1 flex-row">
-          <echart-v2 class="flex1" ref="overViewBar1"></echart-v2>
-          <echart-v2 class="flex1" ref="overViewBar2"></echart-v2>
+        <div class="  flex-row">
+          <num-bar-line title="数据" unit="个">442</num-bar-line>
+          <num-bar-line title="项目" unit="个">68345</num-bar-line>
         </div>
-        <div class="flex-row mt-1">
-          <subtitle class="flex1">xxxx</subtitle>
-          <subtitle class="flex1">xxxx</subtitle>
+        <subtitle class="mt-1">首页点名称</subtitle>
+        <div class="flex-row mb-2">
+          <el-input placeholder="请输入首页点名称"></el-input>
+          <el-button type="primary" class="ml-1">搜索</el-button>
         </div>
-        <div class="flex1 flex-row">
-          <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
-          <echart-v2 class="flex1" ref="overViewBar4"></echart-v2>
+        <subtitle class="mt-1">末节点名称</subtitle>
+        <div class="flex-row mb-2">
+          <el-input placeholder="请输入末节点名称"></el-input>
+          <el-button type="primary" class="ml-1">搜索</el-button>
         </div>
-        <subtitle class="mt-1">xxxx</subtitle>
-        <echart-v2 class="flex1" ref="overViewBar1"></echart-v2>
       </div>
       <div class="center">
         <AllLink></AllLink>
       </div>
       <div class="part right flex-column-stretch pb-2">
-        <div class="part-title mb-2">xxxx</div>
-        <subtitle class="mt-2">xxxx</subtitle>
-        <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
-        <subtitle class="mt-2">xxxx</subtitle>
-        <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
-        <subtitle>xxxx</subtitle>
-        <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
+        <subtitle class="mt-2">Zabbix server linux</subtitle>
+        <div class="flex-row mt-2">
+          <numCardLed title="运行时间" unit="天" :value="12"></numCardLed>
+          <numCardLed title="CPU核数" unit="" :value="2"></numCardLed>
+          <numCardLed title="总内存" unit="GB" :value="12.34"></numCardLed>
+        </div>
+        <div class="card-bg my-2" style="padding: 0 1vw;">
+          <distribution class="my-1" :list="distributionList"></distribution>
+        </div>
+        <subtitle class="mt-2">CPU</subtitle>
+        <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef1"></echart-v2>
+        <subtitle class="mt-2">每次I/O读写耗时</subtitle>
+        <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef2"></echart-v2>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import numBarCard from '@/components/num-bar/card.vue'
+import numBarLine from '@/components/num-bar/line.vue'
+import infoCard from '@/components/v2/info-card.vue'
+import linkCard from '@/components/v2/link-card.vue'
+import numCardLed from '@/components/v2/num-card-led.vue'
+import numCardText from '@/components/v2/num-card-text.vue'
 import AllLink from './AllLink.vue';
+import distribution from '@/components/v2/distribution.vue'
+import { onMounted, ref } from 'vue'
+import { getStereoscopicLineOption } from '@/components/echart-v2/optionsWithCustomLine.js'
+
+const efficiencyMetricsRef1 = ref()
+const efficiencyMetricsRef2 = ref()
+
+const data = {
+  "xAxis": [
+    "2023-01",
+    "2023-02",
+    "2023-03",
+    "2023-04",
+    "2023-05",
+    "2023-06",
+    "2023-07",
+    "2023-08",
+    "2023-09",
+    "2023-10"
+  ],
+  "碳排值": [
+    "1706.25",
+    "2105.51",
+    "3121.90",
+    "2930.23",
+    "2967.78",
+    "2831.36",
+    "3072.57",
+    "2974.36",
+    "2865.35",
+    "1748.01"
+  ],
+  "碳排占比": [
+    "54.65",
+    "67.44",
+    "100.00",
+    "93.86",
+    "95.06",
+    "90.69",
+    "98.42",
+    "95.27",
+    "91.78",
+    "55.99"
+  ],
+  "碳排标准": [
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90"
+  ]
+}
+
+onMounted(() => {
+  efficiencyMetricsRef1.value.draw(
+    getStereoscopicLineOption({
+      legendData: ['cpu利用率', '系统使用率', '用户使用率'],
+      barData1: data['碳排标准'],
+      barData2: data['碳排值'],
+      lineData: data['碳排占比'],
+      xAxisData: data.xAxis
+    })
+  )
+  efficiencyMetricsRef2.value.draw(
+    getStereoscopicLineOption({
+      legendData: ['读取耗时', '写入耗时'],
+      barData1: data['碳排标准'],
+      barData2: data['碳排值'],
+      lineData: [],
+      xAxisData: data.xAxis
+    })
+  )
+})
+
+const distributionList = [{
+  label: 'CPU使用率',
+  value: 30
+}, {
+  label: '内存使用率',
+  value: 12
+}, {
+  label: '分区使用率',
+  value: 12
+}, {
+  label: '磁盘使用率',
+  value: 12
+}]
+
+
 
 </script>
 <style lang="scss" scoped>
@@ -91,7 +209,7 @@ sub {
 .v2-page {
   position: relative;
   // background-color: #000;
-  background-image: url('@/assets/imgs/v2/box-home.png');
+  // background-image: url('@/assets/imgs/v2/box-home.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   height: 93vh;