标题组件优化、出入口页面

src/assets/icons/svg/camera.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744767612418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8966" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M106.666667 516.352l130.645333 12.245333v155.093334l207.616-50.858667v-56.277333h-25.258667v-71.04l-119.168-18.944-67.84-63.701334 21.589334-133.973333 403.797333 64.128c2.816-10.069333 6.357333-19.370667 10.410667-27.52L216.746667 253.738667l73.429333-128.341334L339.626667 106.666667l422.314666 67.114666 39.936 6.314667 45.397334 7.253333 70.058666 11.093334-2.56 63.872-78.08 85.162666-35.242666-4.906666 17.066666-105.728 66.005334 10.453333 0.938666-22.912-95.829333-15.232-5.504 2.133333-67.370667 79.829334c21.12 8.490667 31.957333 49.749333 24.405334 96.554666-8.106667 50.218667-34.304 87.808-58.496 83.968-11.52-1.834667-20.48-12.714667-25.898667-29.013333l-6.4 39.765333 66.773333 70.4-174.933333-27.818666v51.584h-23.808v101.290666L237.312 746.666667v149.205333L106.666667 917.333333v-400.981333zM703.658667 341.333333c-10.453333-1.664-21.76 14.634667-25.301334 36.352-3.541333 21.76 2.133333 40.746667 12.629334 42.410667 10.453333 1.664 21.802667-14.634667 25.301333-36.352 3.541333-21.76-2.133333-40.746667-12.629333-42.410667z m-3.242667 193.792l23.210667 21.077334 78.506666-48.341334 23.296-144.170666-30.464-4.821334-21.077333 130.474667-73.472 45.781333z" p-id="8967"></path></svg>

src/components/HeadlineTag/index.vue

@@ -1,16 +1,25 @@
 <template>
-    <div class="box_tag">
-        <span class="text_disable" style="color: #fff;">{{ value }}</span>
-        <div class="tag_line"></div>
-        <div class="cube-box48">
-            <div class="cube48">
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
+    <div :class="type == 'left' ? 'head_left_bj' : 'head_right_bj'">
+        <div class="desk_box_head"
+            :style="{ marginRight: type == 'right' ? '50px' : '0px', marginLeft: type == 'left' ? '50px' : '0px' }">
+            <span class="text_desk_head" v-if="type == 'right'" style="padding-right: 15px;">{{ value }}</span>
+            <div class="cube-box48">
+                <div class="cube48">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                </div>
             </div>
+            <span class="text_desk_head" v-if="type == 'left'" style="padding-left: 15px;">{{ value }}</span>
+        </div>
+        <div class="main_quadrangle_left" v-if="type == 'left'">
+            <div class="itemshape_left" v-for="item in 3"></div>
+        </div>
+        <div class="main_quadrangle" v-if="type == 'right'">
+            <div class="itemshape" v-for="item in 3"></div>
         </div>
     </div>
 </template>
@@ -21,39 +30,104 @@ const props = defineProps({
     value: {
         type: String,
     },
+    type: {
+        type: String,
+        default: 'left' //左left 右right
+    },
 });
 </script>
 
 <style lang='scss' scoped>
-.box_tag {
+.main_quadrangle {
+    position: absolute;
+    bottom: 5px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.itemshape {
+    width: 6px;
+    height: 6px;
+    margin-left: 4px;
+    background-color: rgb(54, 106, 160);
+    transform: skewX(-45deg);
+}
+
+.main_quadrangle_left {
+    position: absolute;
+    bottom: 5px;
+    right: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.itemshape_left {
+    width: 6px;
+    height: 6px;
+    margin-left: 4px;
+    background-color: rgb(54, 106, 160);
+    transform: skewX(45deg);
+}
+
+.head_left_bj {
     position: relative;
     display: flex;
     align-items: center;
-    width: calc(100% - 30px);
+    width: 100%;
     height: 40px;
-    border: 1px solid;
-    border-image: linear-gradient(to right, #3d4076, #1a1c20) 1;
-    background: linear-gradient(to right, #10285c, #000107);
-    margin-left: 30px;
-
-    span {
-        padding-left: 10px;
-        z-index: 1;
-        font-size: 18px;
+    color: #fff;
+    clip-path: polygon(0 0, 40px 100%, calc(100% - 0px) 100%, 100% 0);
+    background-image: linear-gradient(183deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(16, 74, 141, 1) 80%, rgba(152, 190, 210, 1) 100%);
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 2px;
+        width: 100%;
+        bottom: 0;
+        z-index: -1;
+        background: linear-gradient(181deg, rgba(255, 255, 255, 0) 0%, rgba(54, 128, 182, 0.5) 20%, rgb(54, 128, 182) 60%, rgb(248, 251, 252) 100%)
     }
 }
 
-.tag_line {
-    position: absolute;
-    left: 0;
+.head_right_bj {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     width: 100%;
-    height: 10px;
-    background: linear-gradient(to right, #3644a6, #0b1627, rgba(0, 0, 0, 0));
+    height: 40px;
+    color: #fff;
+    clip-path: polygon(0 0, 0px 100%, calc(100% - 40px) 100%, 100% 0);
+    background-image: linear-gradient(177deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(16, 74, 141, 1) 80%, rgba(152, 190, 210, 1) 100%);
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 2px;
+        width: 100%;
+        bottom: 0;
+        z-index: -1;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(54, 128, 182, 0.5) 20%, rgb(54, 128, 182) 60%, rgb(248, 251, 252) 100%)
+    }
+}
+
+.text_desk_head {
+    font-size: 18px;
+    font-weight: bold;
+    background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.desk_box_head {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 
 .cube-box48 {
-    position: absolute;
-    left: -26px;
     transform-style: preserve-3d;
     animation: cube48-eff 3s linear infinite;
 }

src/views/index/leftDesk.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="box_home_left">
         <div class="flex_home">
-            <HeadlineTag value="建筑概况"></HeadlineTag>
+            <HeadlineTag type="left" value="建筑概况"></HeadlineTag>
             <div class="box_arch">
                 <div class="image_architecture">
                     <div class="tect_arch">

src/views/index/reightDesk.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="box_home_reight">
         <div class="flex_home">
-            <HeadlineTag value="工单统计(本周)"></HeadlineTag>
+            <HeadlineTag type="right" value="工单统计(本周)"></HeadlineTag>
             <div class="box_arch">
                 <div class="image_tubbiness">
                     <div class="work_num">3714<span>个</span></div>

src/views/system/passageway/Personnel.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="person_box">
+        <div class="flex_person">
+            <div ref="chartAccessLeft" style="width: 100%;height: 100%;"></div>
+        </div>
+        <div class="flex_person">
+            <div ref="chartAccessRight" style="width: 100%;height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartAccessLeft = ref(null);
+const chartAccessRight = ref(null);
+let chartLeft = null;
+let chartRight = null;
+const initAccess = () => {
+    const datas = {
+        value: 63.5,
+        text: "在线率"
+    }
+    chartLeft = echarts.init(chartAccessLeft.value);
+    chartRight = echarts.init(chartAccessRight.value);
+    let option = {
+        series: [
+            /*仪表盘图，做中间刻度线*/
+            {
+                type: 'gauge',
+                name: '',
+                radius: '80%',
+                startAngle: '0',
+                endAngle: '-359.99',
+                center: ['60%', '38%'],
+                splitNumber: '80',
+                pointer: {
+                    show: false
+                },
+                title: {
+                    show: false
+                },
+                detail: {
+                    show: false
+                },
+                axisLine: {
+                    lineStyle: {
+                        width: 20,
+                        opacity: 0
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    show: true,
+                    length: 7,
+                    lineStyle: {
+                        color: {
+                            type: 'linear',
+                            colorStops: [{
+                                offset: 0, color: 'rgba(0, 141, 255, 0.32)' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: 'rgba(0, 141, 255, 0.32)' // 100% 处的颜色
+                            }],
+                        },
+                        width: 2,
+                        type: 'solid',
+                    },
+                },
+                axisLabel: {
+                    show: false
+                }
+            },
+            /*内心原型图，展示整体数据概览*/
+            {
+                name: 'pie',
+                type: 'pie',
+                roundCap: true,
+                clockWise: true,
+                startAngle: 260,
+                labelLine: {
+                    show: false
+                },
+                radius: ['60%', '63%'],
+                hoverAnimation: false,
+                center: ['60%', '38%'],
+                data: [
+                    {
+                        value: datas.value,
+                        label: {
+                            normal: {
+                                formatter: '{d}{cell|%}\n{text|     ' + datas.text + '}',
+                                position: 'center',
+                                show: true,
+                                textStyle: {
+                                    fontSize: '20',
+                                    fontWeight: 'normal',
+                                    color: '#6FDCFF',
+                                    lineHeight: 20,
+                                    rich: {
+                                        cell: {
+                                            fontSize: '14',
+                                            fontWeight: 'normal',
+                                            color: '#6FDCFF',
+                                            padding: [0, 0, 0, 5]
+                                        },
+                                        text: {
+                                            fontSize: 12,
+                                            fontFamily: 'FZLanTingHeiS-L-GB',
+                                            color: '#BDDCEE',
+                                            padding: [5, 35, 0, 10]
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                                    offset: 0,
+                                    color: 'rgb(5, 44, 78)'
+                                }, {
+                                    offset: 1,
+                                    color: 'rgb(6, 202, 227)'
+                                }]),
+                                shadowColor: 'rgba(1,1,1,0.5)',
+                                shadowBlur: 1
+                            }
+                        }
+                    },
+                    {
+                        value: 100 - datas.value,
+                        name: '',
+                        itemStyle: {
+                            normal: {
+                                color: 'RGBA(5, 44, 78, 1)', // 未完成的圆环的颜色
+                                label: {
+                                    show: false
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            },
+                            emphasis: {
+                                color: 'RGBA(5, 44, 78, 1)' // 未完成的圆环的颜色
+                            }
+                        }
+                    }]
+            }
+        ]
+    };
+    chartLeft.setOption(option)
+    chartRight.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartLeft?.resize();
+    chartRight?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.flex_person {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/system/passageway/index.vue

@@ -16,33 +16,52 @@
       </div>
     </div>
     <div class="right_spection">
-      <div class="operation_spection">
-        <HeadlineTag value="运行统计"></HeadlineTag>
+      <div class="flex_spection">
+        <HeadlineTag value="设备排名"></HeadlineTag>
         <div class="box_arch">
-          <div class="image_tubbiness">
-            <div class="work_num">3714<span>个</span></div>
-            <div class="work_title">今日总数</div>
-          </div>
-          <div class="right_content">
-            <div class="work_week">
-              <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
-              <span>巡检点数:</span>20
-            </div>
-            <div class="work_week">
-              <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
-              <span>巡检计划:</span>10
-            </div>
-            <div class="work_week">
-              <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
-              <span>巡检线路:</span>15
-            </div>
-          </div>
+          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
         </div>
       </div>
-      <div class="flex_spection">
+      <div class="operation_spection">
         <HeadlineTag value="监控设备"></HeadlineTag>
         <div class="box_arch">
-          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+          <dv-border-box-1>
+            <div class="box_monitoring">
+              <div class="flex_spection box_tion_zx">
+                <div class="line_blue">
+                  <div class="blue_dot"></div>
+                </div>
+                <div class="monit_title">在线</div>
+                <span class="monit_num">83</span>
+              </div>
+              <div class="camera">
+                <div class="entry-box">
+                  <div class="entry-box-item">
+                    <div class="item-center-line"></div>
+                    <div class="item-center-pie"></div>
+                  </div>
+                </div>
+                <div class="img_camera">
+                  <svg class="camera_box_icon" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="myGradientil" x1="0%" y1="100%" x2="0%" y2="0%">
+                        <stop offset="0%" stop-color="rgb(46, 139, 221)" />
+                        <stop offset="100%" stop-color="rgb(4, 223, 247)" />
+                      </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-camera" fill="url('#myGradientil')" />
+                  </svg>
+                </div>
+              </div>
+              <div class="flex_spection box_tion_lx">
+                <div class="line_green">
+                  <div class="green_dot"></div>
+                </div>
+                <div class="monit_title">离线</div>
+                <span class="monit_num">23</span>
+              </div>
+            </div>
+          </dv-border-box-1>
         </div>
       </div>
       <div class="flex_spection">
@@ -52,9 +71,9 @@
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="出入统计"></HeadlineTag>
+        <HeadlineTag value="出入人员统计"></HeadlineTag>
         <div class="box_arch">
-          <div ref="chartAccess" style="width: 100%;height: 100%;"></div>
+          <Personnel></Personnel>
         </div>
       </div>
     </div>
@@ -63,6 +82,7 @@
 
 <script setup>
 import HeadlineTag from '@/components/HeadlineTag'
+import Personnel from './Personnel.vue'
 import Empty from '@/components/Empty'
 import * as echarts from 'echarts'
 const total = ref(0);
@@ -196,13 +216,13 @@ const initChart = () => {
     series: [{
       name: '标准化',
       type: 'bar',
-      barWidth: 10, // 柱子宽度
+      barWidth: 14, // 柱子宽度
       label: {
         show: true,
         position: 'right', // 位置
         color: '#fff',
         fontSize: 14,
-        distance: 5 // 距离
+        distance: 20 // 距离
       }, // 柱子上方的数值
       itemStyle: {
         barBorderRadius: [20, 20, 20, 20],
@@ -219,131 +239,13 @@ const initChart = () => {
   );
 };
 
-const chartAccess = ref(null);
-let chartAcces = null;
-const initAccess = () => {
-  var data = [
-    {
-      name: '正常占比',
-      value: 12,
-      percent: '58',
-    },
-    {
-      name: '故障占比',
-      value: 5,
-      percent: '58',
-    },
-  ];
-
-  var titleArr = [];
-  var seriesArr = [];
-  var colors = [
-    'rgba(6, 254, 188, 1)',
-    'rgba(255, 164, 3, 1)',
-    'rgba(6, 254, 188, 0.1)',
-    'rgba(255, 164, 3, 0.1)',
-    'rgba(255, 255, 255, 0.38)',
-    'rgba(255, 255, 255, 1)',
-  ];
-  data.forEach(function (item, index) {
-    let i = index;
-    if (i % 2 === 1) {
-      i = i + 1;
-    }
-    titleArr.push({
-      text: '{b|正常个数}' + '   ' + '{a|' + item.value + '}' + '   ' + '{a|' + item.percent + '%}',
-      left: '50%',
-      top: (i + 1) * 20 + '%',
-      textAlign: 'center',
-      textStyle: {
-        fontWeight: 'normal',
-        fontSize: '16',
-        color: colors[4],
-        textAlign: 'center',
-        rich: {
-          a: {
-            color: colors[5],
-            fontSize: '14',
-            fontWeight: 'bold',
-          },
-          b: {
-            colors: colors[4],
-            fontSize: '14',
-            fontWeight: 'bold',
-          },
-        },
-      },
-    });
-    seriesArr.push({
-      name: item.name,
-      type: 'pie',
-      clockWise: false,
-      radius: ['25%', '30%'],
-      itemStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: colors[index + 2] },
-            { offset: 1, color: colors[index] },
-          ]),
-          shadowColor: colors[index],
-          shadowBlur: 0,
-          label: {
-            show: false,
-          },
-          labelLine: {
-            show: false,
-          },
-        },
-      },
-      hoverAnimation: false,
-      center: ['25%', (i + 1) * 20 + '%'],
-      data: [
-        {
-          value: item.percent,
-          label: {
-            normal: {
-              formatter: function (params) {
-                return params.seriesName;
-              },
-              position: 'center',
-              show: true,
-              textStyle: {
-                fontSize: '14',
-                color: colors[4],
-              },
-            },
-          },
-        },
-        {
-          value: 100 - item.percent,
-          name: 'invisible',
-          itemStyle: {
-            normal: {
-              color: 'rgba(104, 104, 104, 0.3)',
-            },
-            emphasis: {
-              color: 'rgba(104, 104, 104, 0.3)',
-            },
-          },
-        },
-      ],
-    });
-  });
-  chartAcces = echarts.init(chartAccess.value);
-  chartAcces.setOption({
-    title: titleArr,
-    series: seriesArr,
-  });
-};
 // 生命周期
 onMounted(() => {
   initChart()
-  initAccess()
 });
 // 窗口自适应
 window.addEventListener('resize', () => {
   chartInstance?.resize();
-  chartAcces?.resize();
 });
 </script>
 
@@ -458,6 +360,179 @@ window.addEventListener('resize', () => {
   height: 6px;
   margin-right: 10px;
 }
+
+.box_tion_zx {
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.box_tion_lx {
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.box_monitoring {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.line_blue {
+  position: relative;
+  height: 5px;
+  width: 70%;
+  background-color: rgba(5, 125, 230, .5);
+  margin-bottom: 10px;
+}
+
+.blue_dot {
+  position: absolute;
+  left: 5px;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  border-left: 5px solid #000;
+  border-right: 5px solid #000;
+  background-color: rgba(5, 125, 230, 1);
+}
+
+.line_green {
+  position: relative;
+  height: 5px;
+  width: 70%;
+  background-color: rgba(5, 227, 227, .5);
+  margin-bottom: 10px;
+}
+
+.green_dot {
+  position: absolute;
+  left: 5px;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  border-left: 5px solid #000;
+  border-right: 5px solid #000;
+  background-color: rgba(5, 227, 227, 1);
+}
+
+.img_camera {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  top: calc(50% - 60px);
+  left: calc(50% - 60px);
+  border-radius: 50%;
+  border: 1px solid rgb(15, 39, 66);
+  box-shadow: inset 0px 0px 20px 2px rgb(78, 207, 220);
+}
+
+.camera_box_icon {
+  width: 70px;
+  height: 70px;
+  position: absolute;
+  top: calc(50% - 35px);
+  left: calc(50% - 35px);
+  vertical-align: -2px;
+}
+
+.camera {
+  width: 190px;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  .entry-box {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .entry-box-item {
+    width: 100%;
+    height: 180px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background: radial-gradient(circle,
+        rgba(51, 149, 233, 0) 100px,
+        rgba(51, 149, 233, 0) 100px);
+
+    .item-center-line {
+      width: 180px;
+      height: 180px;
+      background-color: transparent;
+      border-top: 3px solid rgb(22, 110, 191);
+      border-bottom: 3px solid rgb(22, 110, 191);
+      border-radius: 50%;
+      box-sizing: border-box;
+      position: absolute;
+      top: calc(50% - 90px);
+      left: calc(50% - 90px);
+      animation: rotate 8s infinite linear;
+    }
+
+    .item-center-pie {
+      width: 150px;
+      height: 150px;
+      background-color: transparent;
+      border-top: 2px solid rgb(22, 110, 191);
+      border-bottom: 2px solid rgb(22, 110, 191);
+      border-radius: 50%;
+      box-sizing: border-box;
+      position: absolute;
+      top: calc(50% - 75px);
+      left: calc(50% - 75px);
+      animation: rotate1 8s infinite linear;
+    }
+  }
+}
+
+/* 定义中间球体顺时针转动 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 定义中间圆逆时针转动 */
+@keyframes rotate1 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.monit_title {
+  font-size: 16px;
+  background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  padding: 6px 0px;
+}
+
+.monit_num {
+  font-size: 30px;
+  font-weight: bold;
+}
 </style>
 <style lang="scss" scoped>
 .point_box :deep(.el-input__wrapper) {

src/views/system/receptiondesk/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px;">
+    <div style="width: 400px;padding-top: 50px;">
       <HeadlineTag value="会议系统"></HeadlineTag>
     </div>
   </div>
@@ -8,7 +8,9 @@
 
 <script setup>
 import HeadlineTag from '@/components/HeadlineTag'
-
+const type = 'right'
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+
+</style>