From ef332550ba79ba0f540cf3dd466ef04b98a2761e Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Wed, 28 Feb 2024 19:05:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E5=AD=97=E8=B7=AF=E7=BD=91=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Decorations/bg-btn.vue         |  67 +++++
 .../pages/datav/roadNet/img/sensorItem.svg    |  20 ++
 .../pages/datav/roadNet/index.vue             |  89 +++++--
 .../pages/datav/roadNet/sensors.vue           | 234 ++++++++++++++++++
 4 files changed, 389 insertions(+), 21 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-btn.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/img/sensorItem.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/sensors.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-btn.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-btn.vue
new file mode 100644
index 00000000..3983ae47
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-btn.vue
@@ -0,0 +1,67 @@
+<template>
+  <BackgroundClip class='BG-01' :clipPath="getClipPath"
+  :borderPath="getBorderPath" 
+    bgColor="linear-gradient(180deg, #152E3CBB 0%, #163A45DD 100%)"
+    borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))">
+    <slot />
+  </BackgroundClip>
+</template>
+
+<script>
+import BackgroundClip from "./BackgroundClip.vue"
+
+export default {
+  name: 'BG-01',
+  components: {
+    BackgroundClip
+  },
+  props: {
+    width: {
+      type: String,
+      default: "18px"
+    },
+    borderW: {
+      type: String,
+      default: "1px"
+    }
+  },
+  computed: {
+    getClipPath() {
+      return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})`
+    },
+    getBorderPath() {
+      let deltaX = `calc(${this.borderW} * ${Math.sqrt(2) - 1})`;
+      let deltaY = deltaX;
+      return `polygon(
+        50% 0%,
+        calc(100% - ${this.width}) 0%,
+        100% ${this.width},
+        100% calc(100% - ${this.width}),
+        calc(100% - ${this.width}) 100%,
+        ${this.width} 100%,
+        0% calc(100% - ${this.width}),
+        0 ${this.width},
+        ${this.width} 0, 
+        51% 0,
+
+        51% ${this.borderW},
+        calc(${this.width} + ${deltaX}) ${this.borderW},
+        ${this.borderW} calc(${this.width} + ${deltaY}),
+        ${this.borderW} calc(100% - ${this.width} - ${deltaX}),
+        calc(${this.width} + ${deltaX}) calc(100% - ${this.borderW}),
+        calc(100% - ${this.width} - ${deltaX}) calc(100% - ${this.borderW}),
+        calc(100% - ${this.borderW}) calc(100% - ${this.width} - ${deltaY}),
+        calc(100% - ${this.borderW}) calc(${this.width} + ${deltaY}),
+        calc(100% - ${this.width} - ${deltaX}) calc(${this.borderW}),
+        50% ${this.borderW},
+        50% 0
+        
+        )`
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.BG-01 {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/img/sensorItem.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/img/sensorItem.svg
new file mode 100644
index 00000000..fa089bc2
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/img/sensorItem.svg
@@ -0,0 +1,20 @@
+<svg width="181" height="42" viewBox="0 0 181 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142813878">
+<g id="Group 1142813877">
+<rect id="Rectangle 602" opacity="0.8" width="181" height="41.8147" fill="url(#paint0_linear_506_154)" fill-opacity="0.5"/>
+<g id="Group 1142813876">
+<path id="Polygon 49" d="M23.6804 20.3971C23.7371 20.4878 23.7371 20.6028 23.6804 20.6936L15.3785 33.9968C15.2192 34.2521 14.8243 34.1106 14.8634 33.8122L16.5962 20.5817C16.5994 20.5575 16.5994 20.5331 16.5962 20.509L14.8634 7.27844C14.8243 6.98003 15.2192 6.83852 15.3785 7.09384L23.6804 20.3971Z" fill="#00D1FF"/>
+<path id="Polygon 51" d="M157.32 20.3971C157.263 20.4878 157.263 20.6028 157.32 20.6936L165.621 33.9968C165.781 34.2521 166.176 34.1106 166.137 33.8122L164.404 20.5817C164.401 20.5575 164.401 20.5331 164.404 20.509L166.137 7.27844C166.176 6.98003 165.781 6.83851 165.621 7.09384L157.32 20.3971Z" fill="#00D1FF"/>
+<path id="Polygon 50" opacity="0.5" d="M14.5949 21.1039C14.6558 21.1969 14.6558 21.3172 14.5949 21.4103L9.32464 29.4717C9.16121 29.7216 8.77228 29.5763 8.81288 29.2804L9.90854 21.2951C9.912 21.2699 9.912 21.2443 9.90854 21.219L8.81288 13.2338C8.77228 12.9379 9.16121 12.7925 9.32464 13.0425L14.5949 21.1039Z" fill="#00D1FF"/>
+<path id="Polygon 52" opacity="0.5" d="M166.405 21.1039C166.344 21.1969 166.344 21.3172 166.405 21.4103L171.675 29.4717C171.839 29.7216 172.228 29.5763 172.187 29.2804L171.091 21.2951C171.088 21.2699 171.088 21.2443 171.091 21.219L172.187 13.2338C172.228 12.9379 171.839 12.7925 171.675 13.0425L166.405 21.1039Z" fill="#00D1FF"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_506_154" x1="0" y1="41.8147" x2="175.738" y2="41.8147" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D1FF"/>
+<stop offset="0.488416" stop-color="#00D1FF" stop-opacity="0"/>
+<stop offset="1" stop-color="#00D1FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/index.vue
index 89cc9700..c9260fed 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/index.vue
@@ -12,7 +12,9 @@
         </div>
     </div>
     <div class="flow">
-        <div class="part sensor"></div>
+        <div class="part sensor">
+            <sensors class="graph"></sensors>
+        </div>
         <div class="part manage">
             <img class="arrow arrow_01" src="./img/arrowRight.svg" alt="">
             <img class="arrow arrow_02" src="./img/arrowRight.svg" alt="">
@@ -82,9 +84,16 @@
                 <img class="arrow" src="./img/arrowRight.svg" alt="">
                 <div class="shareCon">
                     <img src="./img/shareCenter.svg" alt="" class="center">
-                    <div class="item item_01">
-                        <em>26805</em>
-                        <span></span>
+                    <div class="item" v-for="item,index in dataShare" :style="positionArr[index]">
+                        <img src="./img/shareItem.svg" alt="">
+                        <em>{{ item.value }}</em>
+                        <p class="title">
+                            <el-tooltip class="title" effect="dark" :content="item.title" placement="top-start">
+                                <span>
+                                    {{ item.title }}
+                                </span>
+                            </el-tooltip>
+                        </p>
                     </div>
                 </div>
             </div>
@@ -93,7 +102,7 @@
                 <div class="applyUnit" v-for="item in apply" :key="item.title">
                     <div class="con">
                         <img src="./img/applyitem.svg" alt="">
-                        <h4>{{ item.title }}</h4>
+                            <h4>{{ item.title }}</h4>
                         <p>调用<em>{{ item.value }}</em>次</p>
                     </div>
                 </div>
@@ -104,19 +113,34 @@
 </template>
     
 <script>
-
-
+import bgBtn from "@screen/components/Decorations/bg-btn.vue"
+import sensors from "./sensors.vue"
 export default {
     name: 'dataVRoadNet',
     data(){
         return {
             summary:[],
+            manage:[],
+            apply:[],
             positionArr:[
-                
-            ]
+                {top:"-60px", right:"50%", transform: "translate(-20px, -50%)", opacity:0 },
+                {top:"-60px", left:"50%", transform: "translate(20px, -50%)", opacity: 0 },
+                {top:"0%", right:"50%", transform: "translate(-20px, 0)" },
+                {top:"0%", left:"50%", transform: "translate(20px, 0)" },
+                {top:"33.33%", right:"50%", transform: "translate(-70px, -50%)" },
+                {top:"33.33%", left:"50%", transform: "translate(70px, -50%)" },
+                {top:"62%", right:"50%", transform: "translate(-70px, -50%)" },
+                {top:"62%", left:"50%", transform: "translate(70px, -50%)" },
+                {bottom:"0%", right:"50%", transform: "translate(-20px, 0)" },
+                {bottom:"0%", left:"50%", transform: "translate(20px, 0)" },
+                {top:"calc(100% + 60px)", right:"50%", transform: "translate(-20px, -50%)", opacity: 0 },
+                {top:"calc(100% + 60px)", left:"50%", transform: "translate(20px, -50%)", opacity: 0 }
+            ],
+            dataShare:[]
         }
     },
     components: {
+        bgBtn, sensors
     },
     mounted(){
         this.initData();
@@ -169,6 +193,20 @@ export default {
                 { title : "摄像机", value : 25800 },
                 { title : "智能设备箱", value : 25800 }
             ];
+            this.dataShare = [
+                { title: '', value: '' },
+                { title: '', value: '' },
+                { title: "根据收费站国标查询出口流水车型信息", value: 26805 },
+                { title: "济菏当天的交易牌识数据量", value: 26805 },
+                { title: "查询出入口信息", value: 26805 },
+                { title: "数据共享中心内存使用情况", value: 26805 },
+                { title: "设备接入总数", value: 26805 },
+                { title: "非机预警数据使用情况", value: 26805 },
+                { title: "根据Passid和时间查询出口流水是否有记录", value: 26805 },
+                { title: "数据共享中心CPU使用情况", value: 26805 },
+                { title: '', value: '' },
+                { title: '', value: '' },
+            ];
             this.apply = [
                 { title : "设备资产",value : 45},
                 { title : "智能行车诱导系统",value : 1},
@@ -218,14 +256,17 @@ h4, p, ul,li{ margin: 0; padding:0;}
         }
     }
     .sensor{
-        flex-basis: 260px;
+        flex-basis: 260px; position: relative;
         &.part{ border: none; background-image: none;}
+        .graph{
+            position: absolute; height: 100%; width: calc(100% + 100px); z-index: 1000;
+        }
     }
     .manage{
         flex-basis: 430px; display: flex; flex-direction: column; align-items: center;
          .arrow_01{right: -40px; top:22%; }
         .arrow_02{right: -40px; top:47% }
-        .arrow_03{right: -40px; top:72% }
+        .arrow_03{right: -40px; top:72%;}
         .manageTotal{
             width:366px; height:112px; background: url(./img/manageTotal.svg) no-repeat center center; text-align: center; margin-top: 30px;
             h4{ color: #FFD15C; line-height: 50px; margin-bottom: 2px;}
@@ -278,17 +319,23 @@ h4, p, ul,li{ margin: 0; padding:0;}
         height: 420px; display: flex; justify-content: center; align-items: center;
         .arrow{ transform: rotateZ(90deg); left: 48%; top:calc(100% + 8px);}
         .shareCon{
-            background-image: url(./img/ShareAll.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 756px; height: 245px; display: flex; align-items: center; justify-content: center;
+            background-image: url(./img/ShareAll.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 756px; height: 245px; display: flex; align-items: center; justify-content: center; position: relative;
             .center{ width: 130px; height: 130px;}
-            .item{ position: absolute;}
-            .item_01{}
-            .item_02{}
-            .item_03{}
-            .item_04{}
-            .item_05{}
-            .item_06{}
-            .item_07{}
-            .item_08{}
+            .item{ position: absolute; height: 38px; line-height: 38px; display: flex; min-width: 240px; cursor: default;
+                // 右侧
+                &:nth-child(odd){ padding-left: 10px; flex-direction: row-reverse; justify-content: flex-end;
+                    img{ transform: scaleX(100%); left: 0; top:0; }
+                }
+                // 左侧
+                &:nth-child(even){ padding-right: 10px; justify-content: flex-end;
+                    img{ transform: scaleX(-100%); right: 0; top:0; }
+                }
+                img{ position: absolute; height: 100%; z-index: -10;}
+                em{ color: #00D1FF; font-family: PangMenZhengDao; font-size: 16px; font-style: normal; margin: 0 4px;}
+                .title{ font-size: 14px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;
+                    span:hover{ color: #00D1FF;}
+                }
+            }
         }
     }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/sensors.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/sensors.vue
new file mode 100644
index 00000000..4bd2a83e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/sensors.vue
@@ -0,0 +1,234 @@
+<template>
+<div class="compBox">
+    <div id="container" class="compCon">
+    </div>
+</div>
+</template>
+    
+<script>
+import { Graph, Node, Point } from '@antv/x6'
+
+export default {
+    name: 'sensors',
+    data(){
+        return {
+            
+        }
+    },
+    components: {
+    },
+    mounted(){
+        this.initGraph();
+    },
+    methods: {
+        initGraph(){
+
+
+
+            Graph.registerNode(
+                'sensor',
+                {
+                    width: 180,
+                    height: 42,
+                    markup: [
+                        {
+                            tagName: 'rect',
+                            selector: 'box',
+                        },
+                        {
+                            tagName: 'image',
+                            selector: 'bg',
+                        },
+                        {
+                            tagName: 'text',
+                            selector: 'title',
+                        },
+                    ],
+                    attrs: {
+                        box: {
+                            refWidth: '100%',
+                            refHeight: '100%',
+                            fill: 'transparent',
+                            // stroke: '#5F95FF',
+                            strokeWidth: 1,
+                            rx: 0,
+                            ry: 0,
+                            pointerEvents: 'visiblePainted',
+                        },
+                        avatar: {
+                            width: 48,
+                            height: 48,
+                            refX: 8,
+                            refY: 6,
+                        },
+                        title: {
+                            refWidth: '100%',
+                            refHeight: '100%',
+                            refX: "50%",
+                            refY: "50%",
+                            fill: '#fff',
+                            "textAnchor": "middle",
+                            "textVerticalAnchor": "middle",
+                            fontFamily: 'Courier New',
+                            fontSize: 15,
+                            fontWeight: '800'
+                        },
+                        bg: {
+                            "xlink:href": require('./img/sensorItem.svg')
+                        }
+                    },
+                },
+                true,
+            )
+
+            Graph.registerEdge(
+                'dashed',
+                {
+                    zIndex: -1,
+                    attrs: {
+                        line: {
+                            strokeDasharray: 5,
+                            fill: 'none',
+                            strokeLinejoin: 'round',
+                            strokeWidth: 1,
+                            stroke: '#05D5F6',
+                            sourceMarker: null,
+                            targetMarker: null,
+                        },
+                    },
+                },
+                true,
+            )
+
+            const graph = new Graph({
+                container: document.getElementById('container'),
+                autoResize: true,
+                grid: false,
+                panning: false,
+                mousewheel: false,
+                connecting: {
+                    anchor: 'orth',
+                },
+            })
+
+
+            function createSub(x, y, title) {
+                return graph.addNode({
+                    x,
+                    y,
+                    shape: 'sensor',
+                    attrs: {
+                        title: {
+                            text: title,
+                            wordSpacing: '-5px',
+                            letterSpacing: 0,
+                            fontSize: 13,
+                            fontFamily: 'Arial',
+                            letterSpacing: 0,
+                        }
+                    },
+                })
+            }
+
+            function link(source, target, vertices) {
+                return graph.addEdge({
+                    source: {
+                        cell: source,
+                        anchor: {
+                            name: 'center',
+                            args: {
+                                dx: 0,
+                            },
+                        },
+                    },
+                    target: {
+                        cell: target,
+                        anchor: {
+                            name: 'right'
+                        },
+                    },
+                    shape: 'dashed',
+                })
+            }
+
+            const main = graph.addNode({
+                shape: 'circle',
+                x: 310,
+                y: 80,
+                width: 16,
+                height: 16,
+                attrs: {
+                    body:{
+                        fill: "#05D5F6",
+                        stroke: "#FFFFFF66"
+                    }
+                }
+            })
+
+            let subItems = [
+                "可变新消息标志",
+                "气象检测器",
+                "一类交通量调查站",
+                "枪机",
+                "球机",
+                "雷达",
+                "路段语音广播系统",
+                "疲劳唤醒系统",
+                "护栏碰撞预警系统",
+                "合流区预警系统",
+                "智能行车诱导系统",
+                "光纤在线监测系统",
+                "智慧锥桶"
+            ]
+
+            subItems.forEach((item, index) => {
+                let temp = createSub(0, index * 68, item);
+                link(main, temp);
+            })
+
+            // const sub01 = createSub(0, 0, '气象检测器')
+            // const sub02 = createSub(0, 100, '一类交通量调查站')
+            // const sub03 = createSub(0, 200, '可变新消息标志')
+
+            // link(main, sub02, [
+            //     {
+            //         x: 385,
+            //         y: 180,
+            //     },
+            // ])
+            // link(main, sub01, [
+            //     {
+            //         x: 385,
+            //         y: 180,
+            //     },
+            //     {
+            //         x: 175,
+            //         y: 180,
+            //     },
+            // ])
+            // link(main, sub03, [
+            //     {
+            //         x: 385,
+            //         y: 180,
+            //     },
+            //     {
+            //         x: 585,
+            //         y: 180,
+            //     },
+            // ])
+
+            // graph.zoomToFit({ padding: 0, maxScale: 1, mainScale: 1 })
+
+
+            
+        }
+    }
+}
+</script>
+    
+<style lang='scss' scoped>
+.compBox{
+    .compCon{ width:100%; height: 100%;}
+}
+</style>
+    
\ No newline at end of file