客流页面

src/views/index/leftDesk.vue

@@ -79,27 +79,39 @@
             <HeadlineTag value="电能耗(Kw/h)"></HeadlineTag>
             <div class="card_energy">
                 <div class="energy_box">
-                    <div><el-icon color="rgb(108, 224, 233)">
+                    <div class="title_row">
+                        <el-icon color="rgb(108, 224, 233)">
                             <CaretRight />
-                        </el-icon>今日</div>
+                        </el-icon>
+                        <div class="day_time">今日</div>
+                    </div>
                     <span>1940</span>
                 </div>
                 <div class="energy_box">
-                    <div><el-icon color="rgb(108, 224, 233)">
+                    <div class="title_row">
+                        <el-icon color="rgb(108, 224, 233)">
                             <CaretRight />
-                        </el-icon>本周</div>
+                        </el-icon>
+                        <div class="day_time">本周</div>
+                    </div>
                     <span>1940</span>
                 </div>
                 <div class="energy_box">
-                    <div><el-icon color="rgb(108, 224, 233)">
+                    <div class="title_row">
+                        <el-icon color="rgb(108, 224, 233)">
                             <CaretRight />
-                        </el-icon>本月</div>
+                        </el-icon>
+                        <div class="day_time">本月</div>
+                    </div>
                     <span>1940</span>
                 </div>
                 <div class="energy_box">
-                    <div><el-icon color="rgb(108, 224, 233)">
+                    <div class="title_row">
+                        <el-icon color="rgb(108, 224, 233)">
                             <CaretRight />
-                        </el-icon>本年</div>
+                        </el-icon>
+                        <div class="day_time">本年</div>
+                    </div>
                     <span>1940</span>
                 </div>
             </div>
@@ -284,9 +296,9 @@ import HeadlineTag from '@/components/HeadlineTag'
 }
 
 .facil_line {
-    width: 40%;
-    height: 6px;
-    background: linear-gradient(45deg, rgba(0, 0, 0, 0), #fe7b7b, rgba(0, 0, 0, 0), #fe7b7b);
+    width: 50%;
+    height: 3px;
+    background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgb(157, 211, 245), rgba(0, 0, 0, 0), rgb(157, 211, 245));
     background-size: 20px 10px;
 }
 
@@ -370,7 +382,10 @@ import HeadlineTag from '@/components/HeadlineTag'
     display: flex;
     align-items: center;
     font-size: 16px;
-    padding-left: 20px;
+    padding-left: 25px;
+    padding-bottom: 8px;
+    clip-path: polygon(0 0, 25px 100%, calc(100% - 0px) 100%, 100% 0);
+    background-image: linear-gradient(189deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgb(78 106 191 / 50%) 80%, rgb(152, 190, 210) 100%);
 
     span {
         font-weight: bold;
@@ -382,6 +397,12 @@ import HeadlineTag from '@/components/HeadlineTag'
     }
 }
 
+.day_time {
+    margin-left: 4px;
+    font-size: 15px;
+    color: #ffffff;
+}
+
 .card_subentry {
     height: calc(100% - 40px);
 }
@@ -424,5 +445,4 @@ import HeadlineTag from '@/components/HeadlineTag'
     height: 6px;
     margin-right: 6px;
 }
-
 </style>

src/views/index/reightDesk.vue

@@ -64,7 +64,7 @@
         </div>
         <div class="flex_home">
             <HeadlineTag type="right" value="停车系统"></HeadlineTag>
-            <div class="box_arch">
+            <div class="box_arch park_box">
                 <div class="box_vehicle">
                     <div class="color-green-line"></div>
                     <span>占用</span>
@@ -223,8 +223,13 @@ import LineChart from './LineChart.vue'
     margin-bottom: 10px;
 }
 
+.park_box {
+    // flex-direction: column;
+}
+
 .box_vehicle {
     flex: 1;
+    width: 100%;
     display: flex;
     align-items: center;
 }

src/views/system/entranceguard/index.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="guard_flow">
+        <div class="left_guard_flow">
+            <div class="flex_spection">
+                <HeadlineTag value="门禁系统entranceguard"></HeadlineTag>
+            </div>
+            <div class="flex_spection">
+                <HeadlineTag value="门禁系统entranceguard"></HeadlineTag>
+            </div>
+            <div class="flex_spection">
+                <HeadlineTag value="门禁系统entranceguard"></HeadlineTag>
+            </div>
+        </div>
+        <div class="right_guard_flow">
+            <div class="flex_spection">
+                <HeadlineTag type="right" value="门禁系统entranceguard"></HeadlineTag>
+            </div>
+            <div class="flex_spection">
+                <HeadlineTag type="right" value="门禁系统entranceguard"></HeadlineTag>
+            </div>
+            <div class="flex_spection">
+                <HeadlineTag type="right" value="门禁系统entranceguard"></HeadlineTag>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+</script>
+
+<style scoped lang="scss">
+.guard_flow {
+    position: relative;
+    width: 100%;
+    padding-top: 45px;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.left_guard_flow {
+    position: absolute;
+    left: 0;
+    width: 25%;
+    height: calc(100% - 45px);
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
+}
+
+.right_guard_flow {
+    position: absolute;
+    right: 0;
+    width: 25%;
+    height: calc(100% - 45px);
+    display: flex;
+    flex-direction: column;
+}
+
+.flex_spection {
+    flex: 1;
+    color: #fff;
+}
+
+.box_arch {
+    display: flex;
+    align-items: center;
+    height: calc(100% - 40px);
+}
+</style>

src/views/system/inspection/index.vue

@@ -10,8 +10,8 @@
           <Empty></Empty>
         </div>
         <div class="center_in">
-          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
-          @pagination="getList" />
+          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+            layout="total, prev, pager, next" @pagination="getList" />
         </div>
       </div>
     </div>
@@ -205,8 +205,7 @@ window.addEventListener('resize', () => {
   position: absolute;
   left: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
   padding-left: 10px;
@@ -216,8 +215,7 @@ window.addEventListener('resize', () => {
   position: absolute;
   right: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
 }

src/views/system/intruderalarm/index.vue

@@ -588,8 +588,8 @@ window.addEventListener('resize', () => {
     position: absolute;
     left: 0;
     width: 25%;
-    // height: calc(100% - 45px);
-    height: 100%;
+    height: calc(100% - 45px);
+    // height: 100%;
     display: flex;
     flex-direction: column;
     padding-left: 10px;
@@ -599,8 +599,8 @@ window.addEventListener('resize', () => {
     position: absolute;
     right: 0;
     width: 25%;
-    // height: calc(100% - 45px);
-    height: 100%;
+    height: calc(100% - 45px);
+    // height: 100%;
     display: flex;
     flex-direction: column;
 }

src/views/system/passageway/Personnel.vue

@@ -34,10 +34,10 @@ const initAccess = () => {
             {
                 type: 'gauge',
                 name: '',
-                radius: '80%',
+                radius: '86%',
                 startAngle: '0',
                 endAngle: '-359.99',
-                center: ['60%', '38%'],
+                center: ['50%', '50%'],
                 splitNumber: '80',
                 pointer: {
                     show: false
@@ -89,7 +89,7 @@ const initAccess = () => {
                 },
                 radius: ['60%', '63%'],
                 hoverAnimation: false,
-                center: ['60%', '38%'],
+                center: ['50%', '50%'],
                 data: [
                     {
                         value: datas.value,
@@ -102,7 +102,7 @@ const initAccess = () => {
                                     fontSize: '20',
                                     fontWeight: 'normal',
                                     color: '#6FDCFF',
-                                    lineHeight: 20,
+                                    lineHeight: 14,
                                     rich: {
                                         cell: {
                                             fontSize: '14',

src/views/system/passageway/index.vue

@@ -262,8 +262,7 @@ window.addEventListener('resize', () => {
   position: absolute;
   left: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
   padding-left: 10px;
@@ -273,8 +272,7 @@ window.addEventListener('resize', () => {
   position: absolute;
   right: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
 }

src/views/system/passengerFlow/district.vue

@@ -0,0 +1,313 @@
+<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 = () => {
+    let colorList = [
+        "rgba(255, 38, 38, 1)",
+        "rgba(255, 96, 0, 1)",
+        "rgba(255, 165, 7, 1)",
+        "rgba(0, 234, 255, 1)",
+        "rgba(0, 132, 255, 1)",
+        "#2379FF",
+    ];
+    let colorListA = [
+        "rgba(255, 38, 38, 0.1)",
+        "rgba(255, 96, 0, 0.1)",
+        "rgba(255, 165, 7, 0.1)",
+        "rgba(0, 234, 255, 0.1)",
+        "rgba(0, 132, 255, 0.1)",
+        "#49B1FF",
+    ];
+    let colorListB = [
+        "rgba(249, 136, 136, 1)",
+        "rgba(255, 162, 106, 1)",
+        "rgba(255, 210, 130, 1)",
+        "rgba(142, 255, 206, 1)",
+        "rgba(165, 232, 255, 1)",
+    ];
+    let colorListC = [
+        "rgba(249, 136, 136, 0.1)",
+        "rgba(255, 162, 106, 0.1)",
+        "rgba(255, 210, 130, 0.1)",
+        "rgba(142, 255, 206, 0.1)",
+        "rgba(165, 232, 255, 0.1)",
+    ];
+    let result = [
+        { name: "天水祥丰农资农贸有限公司", value: 86 },
+        { name: "天水花牛苹果", value: 83 },
+        { name: "天水红富士", value: 73 },
+        { name: "天水金帅苹果", value: 61 },
+        { name: "天水黄面皮", value: 61 },
+    ];
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        color: colorList,
+        tooltip: {
+            show: true,
+            trigger: "item",
+            axisPointer: {
+                type: "shadow",
+                textStyle: {
+                    color: "#fff",
+                },
+            },
+            textStyle: {
+                color: "#fff",
+            },
+            backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
+            borderColor: "rgba(255, 255, 255, 0)",
+            confine: true,
+            formatter: "{b}<br />客流指数: {c}",
+        },
+        legend: {
+            show: false,
+        },
+        grid: {
+            left: "2%",
+            right: "2%",
+            top: "6%",
+            bottom: "0%",
+        },
+        xAxis: [
+            {
+                splitLine: {
+                    show: false,
+                },
+                type: "value",
+                show: false,
+            },
+        ],
+        yAxis: [
+            {
+                splitLine: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                type: "category",
+                axisTick: {
+                    show: false,
+                },
+                inverse: true,
+                data: result.map((item) => item.name),
+                axisLabel: {
+                    fontSize: 14,
+                    inside: true,
+                    formatter: (name, index) => {
+                        const id = index + 1;
+                        return `{count${id}|${id}}`;
+                    },
+                    rich: {
+                        count1: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[0],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                        count2: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[1],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                        count3: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[2],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                        count4: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[3],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                        count5: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[4],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                    },
+                },
+            },
+            {
+                type: "category",
+                inverse: true,
+                axisTick: "none",
+                axisLine: "none",
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    verticalAlign: "bottom",
+                    padding: [0, 5, 10, 0],
+                    inside: true,
+                    formatter: function (value) {
+                        return `{name|客流指数：}{value|${value}}`;
+                    },
+                    rich: {
+                        name: {
+                            align: "center",
+                            color: "#D3E5FF",
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                        value: {
+                            align: "center",
+                            color: "#fff",
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
+                        },
+                    },
+                },
+                data: result.map((item) => item.value),
+            },
+        ],
+        series: [
+            {
+                name: "",
+                type: "bar",
+                barWidth: 5, // 柱子宽度
+                MaxSize: 0,
+                showBackground: true,
+                barBorderRadius: [30, 0, 0, 30],
+                backgroundStyle: {
+                    color: "rgba(50, 60, 86, 1)",
+                },
+                label: {
+                    show: true,
+                    offset: [40, -17],
+                    color: "#D3E5FF",
+                    fontWeight: 500,
+                    position: "left",
+                    align: "left",
+                    fontSize: 14,
+                    fontFamily: "Source Han Sans CN",
+                    formatter: function (params) {
+                        console.log(params);
+                        return params.data.name;
+                    },
+                },
+                data: result.map((item, index) => {
+                    return {
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            barBorderRadius: [3, 0, 0, 3],
+                            color: {
+                                type: "linear",
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: colorListA[index],
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: colorList[index],
+                                    },
+                                ],
+                            },
+                        },
+                    };
+                }),
+            },
+            {
+                name: "外圆",
+                type: "scatter",
+                emphasis: {
+                    scale: false,
+                },
+                showSymbol: true,
+                symbol: "circle",
+                symbolSize: 8, // 进度条白点
+                z: 2,
+                data: result.map((item, index) => {
+                    return {
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            color: colorListB[index],
+                            borderColor: colorListC[index],
+                            borderWidth: 12,
+                            shadowColor: colorListC[index],
+                            shadowBlur: 10,
+                            opacity: 1,
+                        },
+                    };
+                }),
+                animationDelay: 500,
+            },
+            {
+                name: "外圆",
+                type: "scatter",
+                emphasis: {
+                    scale: false,
+                },
+                showSymbol: true,
+                symbol: "circle",
+                symbolSize: 3, // 进度条白点
+                z: 3,
+                data: result.map((item, index) => {
+                    return {
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            color: colorListB[index],
+                            borderColor: colorListC[index],
+                            borderWidth: 30,
+                            shadowColor: colorListC[index],
+                            shadowBlur: 10,
+                            opacity: 1,
+                        },
+                    };
+                }),
+                animationDelay: 500,
+            },
+        ],
+    };
+    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/passengerFlow/earlyWarning.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="person_box">
+        <div class="left_warning center_in">
+            <div class="warning_card center_in">
+                <svg class="warning_icon_star" aria-hidden="true">
+                    <defs>
+                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                            <stop offset="100%" stop-color="#ffffff" />
+                        </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
+                </svg>
+            </div>
+        </div>
+        <div class="right_warning">
+            <div class="box_equipment">
+                <span class="equi_title">网络设备</span>
+                <span class="equi_num">389</span>
+            </div>
+            <div class="box_early_warn">
+                <div class="space_between_in card_eary">
+                    <div class="type_title_early">正常</div>
+                    <div class="type_num_early">343个</div>
+                </div>
+                <el-progress :percentage="50" :text-inside="true" color="rgb(100, 178, 161)" />
+            </div>
+            <div class="box_early_warn">
+                <div class="space_between_in card_eary">
+                    <div class="type_title_early">故障</div>
+                    <div class="type_num_early">33个</div>
+                </div>
+                <el-progress :percentage="50" :text-inside="true" color="rgb(230, 162, 60)" />
+            </div>
+            <div class="box_early_warn">
+                <div class="space_between_in card_eary">
+                    <div class="type_title_early">离线</div>
+                    <div class="type_num_early">0个</div>
+                </div>
+                <el-progress :percentage="50" :text-inside="true" color="rgb(245, 108, 108)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+// 生命周期
+onMounted(() => {
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.left_warning {
+    width: 100px;
+}
+
+.right_warning {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    height: 100%;
+    padding-left: 20px;
+}
+
+.box_equipment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20px;
+    width: 100%;
+    height: 40px;
+    border: 1px solid rgb(48 69 129);
+}
+
+.box_early_warn {
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.equi_title {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 30px;
+    font-weight: bold;
+    background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(245 245 245));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.equi_num {
+    font-size: 18px;
+    color: #fff;
+    margin-left: 20px;
+    line-height: 30px;
+}
+
+.card_eary {
+    margin-bottom: 8px;
+}
+
+.type_title_early {
+    font-size: 16px;
+    font-weight: bold;
+    background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(245 245 245));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.type_num_early {
+    font-size: 16px;
+}
+
+.warning_card {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    background-color: rgb(9, 29, 56);
+    box-shadow: inset 0px 0px 20px 3px rgb(14 67 117);
+    border: 1px solid rgb(135, 152, 189);
+}
+
+.warning_icon_star {
+    width: 40px;
+    height: 40px;
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-progress__text) {
+    color: #ffffff !important;
+}
+
+:deep(.el-progress-bar__outer) {
+    overflow: unset !important;
+}
+
+:deep(.el-progress-bar__innerText) {
+    position: absolute;
+    left: 0;
+    bottom: -16px;
+}
+</style>

src/views/system/passengerFlow/index.vue

@@ -2,24 +2,42 @@
   <div class="passenger_flow">
     <div class="left_passenger_flow">
       <div class="flex_spection">
-        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+        <HeadlineTag value="客流监控"></HeadlineTag>
+        <div class="box_arch">
+          <monitoring></monitoring>
+        </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+        <HeadlineTag value="安全监控"></HeadlineTag>
+        <div class="box_arch">
+          <security></security>
+        </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+        <HeadlineTag value="实时预警信息"></HeadlineTag>
+        <div class="box_arch">
+          <earlyWarning></earlyWarning>
+        </div>
       </div>
     </div>
     <div class="right_passenger_flow">
       <div class="flex_spection">
-        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+        <HeadlineTag type="right" value="指标区客流排行榜"></HeadlineTag>
+        <div class="box_arch">
+          <district></district>
+        </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+        <HeadlineTag type="right" value="客群分析统计"></HeadlineTag>
+        <div class="box_arch">
+          <div ref="chartFlow" style="width: 100%;height: 100%;" />
+        </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+        <HeadlineTag type="right" value="安全事件列表"></HeadlineTag>
+        <div class="box_arch">
+          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+        </div>
       </div>
     </div>
   </div>
@@ -27,7 +45,177 @@
 
 <script setup>
 import HeadlineTag from '@/components/HeadlineTag'
-const type = 'right'
+import monitoring from './monitoring'
+import earlyWarning from './earlyWarning'
+import security from './security'
+import district from './district'
+import * as echarts from 'echarts'
+const chartFlow = ref(null);
+let chartInstanceWater = null;
+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']
+  ]
+})
+const initChart = () => {
+  let list = [
+    { name: "男性", value: 88 },
+    { name: "女性", value: 75 },
+    { name: "新老客", value: 66 }
+  ]
+  chartInstanceWater = echarts.init(chartFlow.value);
+  chartInstanceWater.setOption({
+    grid: {
+      left: '10%',
+      top: '10%',
+      bottom: '10%',
+      right: '10%',
+    },
+    xAxis: {
+      show: true,
+      axisLine: {
+        show: true,
+        symbol: ['none'],
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 600,
+          color: '#ffffff',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      data: list.map(val => {
+        return val.name
+      })
+    },
+    yAxis: [{
+      splitNumber: (123 % 5).toFixed(0),
+      show: true,
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          fontSize: 12,
+          fontWeight: 600,
+          color: '#ffffff'
+        },
+      },
+      splitArea: {
+        areaStyle: {
+          color: 'rgba(255,255,255,.5)',
+        },
+      },
+      splitLine: {
+        show: false,
+      }
+    }],
+    series: [{
+      type: 'pictorialBar',
+      barCategoryGap: '-20%',
+      symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
+      label: {
+        show: true,
+        position: 'top',
+        distance: 10,
+        color: '#ffffff',
+        fontWeight: 'bolder',
+        fontSize: 12,
+      },
+      itemStyle: {
+        normal: {
+          color: params => {
+            const colorList = [{
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: '#297ff2',
+              },
+              {
+                offset: 1,
+                color: '#cce7fc',
+              },
+              ]
+            },
+            {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: '#3bfafe',
+              },
+              {
+                offset: 1,
+                color: '#aaf4fe',
+              },
+              ]
+            },
+            {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: '#e08440',
+              },
+              {
+                offset: 1,
+                color: '#decabd',
+              },
+              ]
+            }
+            ];
+            return colorList[params.dataIndex];
+          },
+          opacity: 0.7
+        },
+        // 鼠标移入柱子上 透明度变为 1
+        emphasis: {
+          opacity: 1,
+        },
+      },
+      data: list.map(v => {
+        return v.value
+      })
+      // data: [123, 60, 25]
+    },],
+  });
+}
+// 生命周期
+onMounted(() => {
+  initChart()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+  chartInstanceWater?.resize();
+});
 </script>
 
 <style scoped lang="scss">
@@ -43,8 +231,7 @@ const type = 'right'
   position: absolute;
   left: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
   padding-left: 10px;
@@ -54,8 +241,7 @@ const type = 'right'
   position: absolute;
   right: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
 }
@@ -64,4 +250,10 @@ const type = 'right'
   flex: 1;
   color: #fff;
 }
+
+.box_arch {
+  display: flex;
+  align-items: center;
+  height: calc(100% - 40px);
+}
 </style>

src/views/system/passengerFlow/monitoring.vue

@@ -0,0 +1,159 @@
+<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 color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
+    const legend = {
+        //data，就是取得每个series里面的name属性。
+        orient: 'horizontal',
+        icon: 'circle', //图例形状
+        padding: 0,
+        top: 13,
+        left: 10,
+        itemWidth: 10, //小圆点宽度
+        itemHeight: 10, // 小圆点高度
+        itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
+        textStyle: {
+            fontSize: 13,
+            color: '#ffffff',
+        },
+    };
+    const tooltip = {
+        show: true,
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow',
+        },
+    };
+    let seriesData = [
+        { name: '电子邮箱', data: [120, 132, 101, 134, 90, 230, 210] },
+        { name: '联盟广告', data: [220, 182, 191, 234, 290, 330, 310] },
+        { name: '视频广告', data: [150, 232, 201, 154, 190, 330, 410] },
+        { name: '直播', data: [320, 332, 301, 334, 390, 330, 320] },
+    ];
+    const commonConfigFn = (index) => {
+        return {
+            type: 'line',
+            smooth: true,
+            symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
+            symbolSize: 4, //小圆点大小
+            itemStyle: {
+                //还是小圆点设置
+            },
+            label: {
+                show: false, //不显示小圆点上的label文字
+            },
+            lineStyle: {
+                width: 1, //线条设置
+            },
+            areaStyle: {
+                //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
+                opacity: 0.2,
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: color[index], // 上处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: 'transparent', // 下处的颜色
+                        },
+                    ],
+                    global: false, // 缺省为 false
+                },
+            },
+        };
+    };
+
+    seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
+    chartDom = echarts.init(chartAccess.value);
+    let option = {
+        color,
+        tooltip,
+        legend,
+        grid: {
+            top: '15%',
+            left: '3%',
+            right: '4%',
+            bottom: '5%',
+            containLabel: true,
+        },
+        xAxis: {
+            show: true, //显示x轴+x轴label文字
+            type: 'category',
+            boundaryGap: false, //从Y轴出发，这个false很好的
+            axisLine: {
+                show: true, //显示x坐标轴轴线
+                lineStyle: {
+                    color: 'rgba(255,255,255,.4)',
+                },
+            },
+            axisTick: {
+                show: false, //不显示x坐标1cm刻度
+            },
+            axisLabel: {
+                color: '#ffffff', //x轴label文字颜色
+            },
+            splitLine: {
+                show: false, //不显示grid竖向分割线
+            },
+
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff',
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(255,255,255,.4)',
+                },
+            },
+            splitLine: {
+                show: false, //不显示grid水平分割线
+            },
+        },
+
+        series: seriesData,
+    };
+    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/passengerFlow/security.vue

@@ -0,0 +1,171 @@
+<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 demoData = [{
+        name: '安全等级',
+        value: 204,
+        unit: '分'
+    }];
+    chartDom = echarts.init(chartAccess.value);
+    let option = {
+        series: (function () {
+            var result = [];
+            demoData.forEach(function (item) {
+                result.push(
+                    {
+                        type: 'pie',
+                        name: '内部黑色圆底',
+                        opacity: 1,
+                        radius: ['0', '34%'],
+                        center: ['50%', '50%'],
+                        hoverAnimation: false,
+                        itemStyle: {
+                            shadowColor: '#ffffff',
+                            shadowBlur: 20
+                        },
+                        z: 5,
+                        data: [
+                            {
+                                value: demoData[0].value,
+                                unit: demoData[0].unit,
+                                itemStyle: {
+                                    normal: {
+                                        color: 'black',
+                                        opacity: 1,
+                                    },
+                                },
+                                label: {
+                                    show: true,
+                                    position: 'center',
+                                    color: 'white',
+                                    formatter: [`{a|${demoData[0].value}}`, `{b|${demoData[0].unit}}`].join('\n'),
+                                    rich: {
+                                        a: {
+                                            fontSize: 28,
+                                            color: '#ffffff'
+                                        },
+                                        b: {
+                                            fontSize: 14
+                                        }
+                                    }
+
+                                },
+                            },
+                        ],
+                        labelLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        type: 'gauge',
+                        name: '核心仪表盘',
+                        radius: '90%',
+                        z: 1,
+                        splitNumber: 9,
+                        min: 0,
+                        max: 450,
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: [[1, '#FFDFD4']],
+                                width: 1,
+                                shadowColor: 'rgba(103, 194, 58)',
+                                shadowBlur: 10
+                            },
+                        },
+                        axisLabel: {
+                            distance: 3,
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: '12',
+                                fontWeight: 20
+                            }
+                        },
+                        splitLine: {
+                            show: true,
+                            length: 8,
+                            lineStyle: {
+                                color: "#FFDFD4",
+                                width: 0.5
+                            }
+                        },
+                        pointer: {
+                            z: -1,
+                            show: true,
+                            width: 2,
+                            length: '100%'
+                        },
+                        itemStyle: {
+                            color: 'white'
+                        },
+                        progress: {
+                            z: -1,
+                            show: true,
+                            width: 45,
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 1, 1, 0, [{
+                                        offset: 0,
+                                        color: 'rgba(103, 194, 58,0)',
+                                    }, {
+                                        offset: 0.7,
+                                        color: 'rgba(103, 194, 58,0.5)',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(103, 194, 58,0.9)',
+                                    }
+                                ]
+                                )
+                            }
+                        },
+                        detail: {
+                            show: false
+                        },
+                        title: {//默认为name
+                            show: true,
+                            fontSize: 16,
+                            color: 'white',
+                            offsetCenter: [0, '70%']
+                        },
+                        data: demoData
+                    },
+                );
+            });
+            return result;
+        })()
+    };
+    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/visitor/index.vue

@@ -282,7 +282,7 @@ const initChart = () => {
     series: [{
       type: 'pie',
       radius: '60%',
-      center: ['50%', '45%'],
+      center: ['50%', '50%'],
       clockwise: true,
       avoidLabelOverlap: true,
       label: {
@@ -329,8 +329,7 @@ window.addEventListener('resize', () => {
   position: absolute;
   left: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
   padding-left: 10px;
@@ -340,8 +339,7 @@ window.addEventListener('resize', () => {
   position: absolute;
   right: 0;
   width: 25%;
-  // height: calc(100% - 45px);
-  height: 100%;
+  height: calc(100% - 45px);
   display: flex;
   flex-direction: column;
 }