门禁页面

src/assets/icons/svg/rke.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="1744880787281" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1893" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M720.16213333 26.54776889v970.90446222h-416.32426666V26.54776889zM581.51708445 653.3632H442.48177778v205.44398222H581.51822222z m337.87448888-488.17038222a450.11057778 450.11057778 0 0 1 77.67153778 271.85379555c0 218.25877333-69.51594667 271.85265778-86.60423111 281.17333334l-34.56455111-61.74947556s51.65283555-41.94304 51.65283556-219.42385778a377.87534222 377.87534222 0 0 0-60.97351112-227.19146666z m-712.25571555 109.51793777l55.53607111 43.10812445a233.01688889 233.01688889 0 0 0-27.96202667 121.55790222c0 91.65255111 21.74862222 116.50844445 22.13660445 116.50844445l-41.55505778 56.31203555c-11.65084445-8.54471111-49.70951111-45.05031111-49.70951111-173.2096a289.32892445 289.32892445 0 0 1 41.55392-164.27690667z m609.72828444 0a289.32892445 289.32892445 0 0 1 41.55392 164.27690667c0 128.15928889-38.83576889 164.66602667-49.70951111 173.2096l-38.83690666-60.19640889a221.75402667 221.75402667 0 0 0 19.41845333-113.01319111 233.01688889 233.01688889 0 0 0-27.96202667-121.16878222zM581.51708445 165.19395555H442.48177778V581.90506667H581.51822222zM96.45283555 437.04661333c0 178.64590222 52.4288 220.20096 53.20590223 220.20096l-36.11761778 60.97237334c-17.08828445-8.54471111-86.60423111-62.91456-86.60423111-281.17333334a450.11057778 450.11057778 0 0 1 77.67153778-271.85379555l26.40896 23.69080889 26.40782222 22.91256888-2.71815111 4.27235556a380.20551111 380.20551111 0 0 0-58.25422223 222.91911111z m0 0" p-id="1894"></path></svg>

src/views/index/LineChart.vue

@@ -12,6 +12,12 @@ const initChart = () => {
     chartInstance.setOption({
         tooltip: {
             trigger: 'axis',
+            textStyle: {
+                color: '#fafafa',
+            },
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
         },
         grid: {
             left: '4%',

src/views/system/entranceguard/alleyway.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="person_box">
+        <div ref="chartAccess" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartAccess = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    const hexToRgb = hex => {
+        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b)
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+        return result
+            ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+            }
+            : null
+    }
+    let xData = ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00']
+    const yData = [
+        {
+            name: '每日总量',
+            data: [100, 120, 200, 210, 130, 160, 280, 240, 260, 200, 270, 280, 120],
+        },
+        {
+            name: '累计总量',
+            data: [60, 80, 100, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275, 100],
+        },
+    ]
+    const xAxisFn = xData => {
+        return [
+            {
+                type: 'category',
+                boundaryGap: false,
+                data: xData,
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: {
+                    color: '#ffffff', //x轴label文字颜色
+                },
+            },
+        ]
+    }
+    const colorList = ['#107FFF', '#55D1FD',]
+    chartDom = echarts.init(chartAccess.value);
+    let option = {
+        series: yData.map((item, index) => {
+            const rgb = hexToRgb(colorList[index])
+            const end = `rgba(${rgb.r},${rgb.g},${rgb.b},0)`
+            return {
+                name: item.name,
+                data: item.data,
+                type: 'line',
+                smooth: true,
+                showSymbol: false,
+                symbolSize: 10,
+                emphasis: { focus: 'series' },
+                animationDuration: 2500,
+                animationEasing: 'cubicInOut',
+                lineStyle: {
+                    width: 3,
+                },
+                areaStyle: {
+                    width: 4,
+                    opacity: 0.25,
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0.389, color: colorList[index] },
+                            { offset: 1, color: end },
+                        ],
+                        global: false,
+                    },
+                },
+            }
+        }),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'line',
+            },
+            textStyle: {
+                color: '#fafafa',
+            },
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
+        },
+        grid: {
+            top: '15%',
+            left: '2%',
+            right: '6%',
+            bottom: '0%',
+            containLabel: true,
+        },
+        legend: {
+            show: true,
+            top: 13,
+            right: 20,
+            icon: 'roundRect',
+            itemHeight: 5,
+            itemWidth: 10,
+            itemGap: 40,
+            textStyle: {
+                fontSize: 12,
+                color: '#ffffff',
+            },
+            itemStyle: {
+                borderColor: 'transparent',
+                borderWidth: 6,
+            },
+        },
+        xAxis: xAxisFn(xData),
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    color: '#ffffff',
+                },
+                splitLine: {
+                    show: false, //不显示grid竖向分割线
+                },
+            },
+        ],
+    };
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/entranceguard/equipment.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="equip_box">
+        <div class="ment_equip">
+            <div class="card_ment_equip">
+                <div class="box_bj_equip center_in blue_bj_equip">
+                    <svg-icon icon-class="rke" color="#fff" className="arch_icon_rke" />
+                </div>
+                <div class="equip_ment">
+                    <div class="equip_ment_title">设备总数</div>
+                    <span class="num_ment blue_title">999</span>
+                </div>
+            </div>
+            <div class="card_ment_equip">
+                <div class="box_bj_equip center_in yellow_bj_equip">
+                    <svg-icon icon-class="rke" color="#fff" className="arch_icon_rke" />
+                </div>
+                <div class="equip_ment">
+                    <div class="equip_ment_title">在线</div>
+                    <span class="num_ment yellow_title">999</span>
+                </div>
+            </div>
+            <div class="card_ment_equip">
+                <div class="box_bj_equip center_in green_bj_equip">
+                    <svg-icon icon-class="rke" color="#fff" className="arch_icon_rke" />
+                </div>
+                <div class="equip_ment">
+                    <div class="equip_ment_title">异常</div>
+                    <span class="num_ment green_title">999</span>
+                </div>
+            </div>
+        </div>
+        <div class="box_arch_ment">
+            <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+const config = ref({
+    headerBGC: '#10285c',
+    oddRowBGC: '#10285c7f',
+    evenRowBGC: '#10285c00',
+    header: ['设备名称', '位置', '列3'],
+    data: [
+        ['行1列1', '行1列2', '行1列3'],
+        ['行2列1', '行2列2', '行2列3'],
+        ['行3列1', '行3列2', '行3列3'],
+        ['行4列1', '行4列2', '行4列3'],
+        ['行5列1', '行5列2', '行5列3'],
+        ['行6列1', '行6列2', '行6列3'],
+        ['行7列1', '行7列2', '行7列3'],
+        ['行8列1', '行8列2', '行8列3'],
+        ['行9列1', '行9列2', '行9列3'],
+        ['行10列1', '行10列2', '行10列3']
+    ]
+})
+</script>
+
+<style scoped lang="scss">
+.equip_box {
+    width: 100%;
+    height: 100%;
+}
+
+.ment_equip {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.box_bj_equip {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+
+.arch_icon_rke {
+    width: 25px;
+    height: 25px;
+}
+
+.card_ment_equip {
+    display: flex;
+    align-items: center;
+}
+
+.equip_ment {
+    display: flex;
+    flex-direction: column;
+    padding-left: 6px;
+}
+
+.equip_ment_title {
+    color: #fff;
+    font-size: 15px;
+    user-select: none;
+}
+
+.num_ment {
+    margin-top: 2px;
+    font-size: 18px;
+    color: #fff;
+    user-select: none;
+}
+
+.box_arch_ment {
+    padding-left: 10px;
+    height: calc(100% - 63px);
+}
+
+.blue_title {
+    background-image: -webkit-linear-gradient(bottom, rgb(47, 119, 173), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.yellow_title {
+    background-image: -webkit-linear-gradient(bottom, rgb(187, 132, 83), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.green_title {
+    background-image: -webkit-linear-gradient(bottom, rgb(87, 172, 115), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.blue_bj_equip {
+    background-image: linear-gradient(25deg, rgb(40, 143, 221) 0%, rgba(0, 0, 0, 0)66%, rgb(40, 143, 221) 100%);
+}
+
+.yellow_bj_equip {
+    background-image: linear-gradient(25deg, rgb(187, 132, 83) 0%, rgba(0, 0, 0, 0)66%, rgb(187, 132, 83) 100%);
+}
+
+.green_bj_equip {
+    background-image: linear-gradient(25deg, rgb(87, 172, 115) 0%, rgba(0, 0, 0, 0)66%, rgb(87, 172, 115) 100%);
+}
+</style>

src/views/system/entranceguard/inbreak.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="person_box">
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    function xWrapText(params, num = 2) {
+        let newParamsName = ''
+        const paramsNameNumber = params.length
+        const provideNumber = num //一行显示几个字
+        const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
+        if (paramsNameNumber > provideNumber) {
+            for (let p = 0; p < rowNumber; p++) {
+                let tempStr = ''
+                const start = p * provideNumber
+                const end = start + provideNumber
+                if (p == rowNumber - 1) {
+                    tempStr = params.substring(start, paramsNameNumber)
+                } else {
+                    tempStr = params.substring(start, end) + ''
+                }
+                newParamsName += tempStr
+            }
+        } else {
+            newParamsName = params
+        }
+        return newParamsName
+    }
+    let xData = ['“专精特新” 母基金', '职能制造 产业基金', '半导体材料 产业基金', '精密制造装备 产业基金', '现代消费与 医疗产业基金']
+    let y1Data = [110, 90, 120, 70, 60]
+    let y2Data = [15, 22, 13, 22, 13]
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        grid: {
+            left: '10%',
+            right: '10%',
+            top: '20%',
+            bottom: '10%',
+        },
+        title: {
+            show: false,
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: '#3A4667',
+            borderColor: '#3A4667',
+            textStyle: {
+                color: '#fff'
+            },
+            axisPointer: {
+                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+            },
+        },
+        legend: {
+            data: ['项目数量', '总投资额'],
+            right: 'center',
+            top: '6%',
+            itemWidth: 11,
+            itemHeight: 11,
+            textStyle: {
+                color: '#B3CFFF',
+                fontSize: 12,
+            },
+        },
+        xAxis: [{
+            type: 'category',
+            boundaryGap: true,
+            show: true,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                fontSize: 9.5,
+                color: '#B3CFFF',
+                formatter(params) {
+                    const res = xWrapText(params, 6) // 文字换行处理
+                    return params.length > 15 ? `${res.slice(0, 15)}...` : res
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    type: 'solid',
+                    color: '#4e608b', // 左边线的颜色
+                    width: '1', // 坐标线的宽度
+                },
+            },
+            data: xData,
+        },],
+        yAxis: [{
+            type: 'value',
+            scale: true,
+            name: '',
+            axisLine: {
+                show: false,
+            },
+            splitNumber: 2,
+            axisTick: {
+                show: false,
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#4e608b', // 使用深浅的间隔色
+                },
+            },
+            axisLabel: {
+                fontSize: 12,
+                color: '#B3CFFF',
+                margin: 12,
+            },
+            min: 0,
+            boundaryGap: [0.2, 0.2],
+        },
+        {
+            type: 'value',
+            scale: true,
+            axisLine: {
+                show: false,
+            },
+            splitNumber: 2,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                fontSize: 12,
+                color: '#B3CFFF',
+                margin: 12,
+                formatter: '{value}亿',
+            },
+            splitLine: {
+                lineStyle: {
+                    // 使用深浅的间隔色
+                    color: '#4e608b',
+                },
+            },
+            name: '',
+            min: 0,
+            boundaryGap: [0.2, 0.2],
+        },
+        ],
+        series: [{
+            name: '项目数量',
+            yAxisIndex: 0,
+            color: 'rgba(208, 222, 238, .5)',
+            lineStyle: {
+                color: 'rgba(208, 222, 238, .5)',
+            },
+            type: 'line',
+            data: y1Data,
+        },
+        {
+            name: '总投资额',
+            type: 'bar',
+            label: {
+                normal: {
+                    show: false
+                },
+            },
+            itemStyle: {
+                normal: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        1,
+                        0,
+                        0,
+                        [{
+                            offset: 0,
+                            color: 'rgba(123, 133, 255, 1)', // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(96, 132, 255, 0)', // 100% 处的颜色
+                        },
+                        ],
+                        false
+                    ),
+                },
+            },
+            barWidth: '20%',
+            yAxisIndex: 1,
+            data: y2Data,
+
+        },
+
+        ],
+    };
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/entranceguard/index.vue

@@ -1,14 +1,17 @@
 <template>
     <div class="guard_flow">
         <div class="left_guard_flow">
-            <div class="flex_spection">
-                <HeadlineTag value="门禁系统"></HeadlineTag>
-            </div>
-            <div class="flex_spection">
-                <HeadlineTag value="门禁系统"></HeadlineTag>
+            <div style="height: 500px;">
+                <HeadlineTag value="门禁设备"></HeadlineTag>
+                <div class="box_arch">
+                    <equipment></equipment>
+                </div>
             </div>
             <div class="flex_spection">
-                <HeadlineTag value="门禁系统"></HeadlineTag>
+                <HeadlineTag value="非法侵入统计"></HeadlineTag>
+                <div class="box_arch">
+                    <inbreak></inbreak>
+                </div>
             </div>
         </div>
         <div class="right_guard_flow">
@@ -16,7 +19,10 @@
                 <HeadlineTag type="right" value="门禁系统"></HeadlineTag>
             </div>
             <div class="flex_spection">
-                <HeadlineTag type="right" value="门禁系统"></HeadlineTag>
+                <HeadlineTag type="right" value="出入口管理"></HeadlineTag>
+                <div class="box_arch">
+                    <alleyway></alleyway>
+                </div>
             </div>
             <div class="flex_spection">
                 <HeadlineTag type="right" value="门禁系统"></HeadlineTag>
@@ -27,6 +33,9 @@
 
 <script setup>
 import HeadlineTag from '@/components/HeadlineTag'
+import alleyway from './alleyway'
+import equipment from './equipment'
+import inbreak from './inbreak'
 </script>
 
 <style scoped lang="scss">
@@ -45,7 +54,6 @@ import HeadlineTag from '@/components/HeadlineTag'
     height: calc(100% - 45px);
     display: flex;
     flex-direction: column;
-    padding-left: 10px;
 }
 
 .right_guard_flow {
@@ -63,8 +71,7 @@ import HeadlineTag from '@/components/HeadlineTag'
 }
 
 .box_arch {
-    display: flex;
-    align-items: center;
+    width: 100%;
     height: calc(100% - 40px);
 }
 </style>

src/views/system/inspection/index.vue

@@ -95,6 +95,12 @@ const initChart = () => {
   chartInstance.setOption({
     tooltip: {
       trigger: 'axis',
+      textStyle: {
+        color: '#fafafa',
+      },
+      borderColor: 'transparent',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      extraCssText: 'backdrop-filter: blur(6px);',
     },
     legend: {
       data: ['产值', '增加值'],

src/views/system/passengerFlow/district.vue

@@ -65,10 +65,11 @@ const initAccess = () => {
                 },
             },
             textStyle: {
-                color: "#fff",
+                color: '#fafafa',
             },
-            backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
-            borderColor: "rgba(255, 255, 255, 0)",
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
             confine: true,
             formatter: "{b}<br />客流指数: {c}",
         },

src/views/system/passengerFlow/monitoring.vue

@@ -37,6 +37,12 @@ const initAccess = () => {
         axisPointer: {
             type: 'shadow',
         },
+        textStyle: {
+            color: '#fafafa',
+        },
+        borderColor: 'transparent',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        extraCssText: 'backdrop-filter: blur(6px);',
     };
     let seriesData = [
         { name: '电子邮箱', data: [120, 132, 101, 134, 90, 230, 210] },
@@ -116,7 +122,6 @@ const initAccess = () => {
             splitLine: {
                 show: false, //不显示grid竖向分割线
             },
-
             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
         },
         yAxis: {
@@ -134,7 +139,6 @@ const initAccess = () => {
                 show: false, //不显示grid水平分割线
             },
         },
-
         series: seriesData,
     };
     chartDom.setOption(option)