楼宇自控++

src/layout/components/AppMain.vue

@@ -8,8 +8,8 @@
       </transition>
     </router-view>
     <iframe-toggle />
-    <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0"
-      @mousemove="handleScroll"></iframe>
+    <!-- <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0" @mousemove="handleScroll"
+      @load="onLoad"></iframe> -->
   </section>
 </template>
 
@@ -23,6 +23,21 @@ onMounted(() => {
   addIframe()
 })
 
+const onLoad = () => {
+  let num = 1
+  console.log('----------------------加载完成');
+  // 向 iframe 发送消息
+  const iframe = document.getElementById("myIframe");
+  iframe.contentWindow.postMessage(
+    `window.iot3d.ParkSwitch(${num});`,
+    "*" // 必须与 iframe 的域名一致
+  );
+  if (num == 0) {
+    num = 1
+  } else {
+    num = 0
+  }
+}
 function handleScroll() {
   console.log('Iframe scrolled!');
 }

src/views/system/building/index.vue

@@ -0,0 +1,334 @@
+<template>
+    <div class="inspection">
+        <layout>
+            <template #left>
+                <div class="left_spection">
+                    <HeadlineTag value="设备列表"></HeadlineTag>
+                    <div class="box_arch_point">
+                        <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
+                            <el-input v-model="input" placeholder="按设备名称搜索" />
+                        </div>
+                        <div style="height: calc(100% - 160px);">
+                            <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" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #right>
+                <div class="right_spection">
+                    <div class="operation_spection">
+                        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
+                        <div class="box_arch">
+                            <div class="image_tubbiness">
+                                <div class="work_num">3235</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>0
+                                </div>
+                                <div class="work_week">
+                                    <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
+                                    <span>停止状态:</span>0
+                                </div>
+                                <div class="work_week">
+                                    <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
+                                    <span>故障状态:</span>0
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex_spection">
+                        <HeadlineTag type="right" value="设备群控"></HeadlineTag>
+                        <div class="box_arch">
+                            <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+                        </div>
+                    </div>
+                    <div class="flex_spection">
+                        <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>
+            </template>
+        </layout>
+    </div>
+</template>
+
+<script setup>
+import layout from "@/components/layout_/index.vue";
+import HeadlineTag from '@/components/HeadlineTag'
+import Empty from '@/components/Empty'
+import * as echarts from 'echarts'
+const total = ref(0);
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+});
+const input = ref('')
+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']
+    ]
+})
+
+/** 查询列表 */
+function getList() {
+};
+const chartRouting = ref(null);
+let chartInstance = null;
+// 初始化图表
+const initChart = () => {
+    chartInstance = echarts.init(chartRouting.value);
+    chartInstance.setOption({
+        tooltip: {
+            trigger: 'axis',
+            textStyle: {
+                color: '#fafafa',
+            },
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
+        },
+        legend: {
+            data: ['产值', '增加值'],
+            icon: 'rich',
+            show: true,
+            itemWidth: 18,
+            itemHeight: 2,
+            textStyle: {
+                color: '#AFBDD1',
+                fontSize: '12px',
+            },
+            top: 8,
+            right: 10,
+            itemGap: 34,
+        },
+        grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '10%',
+            top: '16%',
+            containLabel: true,
+        },
+        xAxis: {
+            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+                symbol: 'none',
+                lineStyle: {
+                    color: '#50637A',
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                color: '#ffffff',
+                fontSize: 12,
+                padding: [10, 0, 0, 0],
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff',
+                fontSize: 12,
+                padding: [0, 10, 0, 0],
+            },
+            splitLine: {
+                show: false,
+            },
+        },
+        series: [
+            {
+                name: '增加值',
+                data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
+                type: 'line',
+                smooth: true,
+                color: '#00F7FF',
+                lineStyle: {
+                    width: 2,
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [{
+                            offset: 0,
+                            color: 'rgba(0, 247, 255, .6)',
+                        },
+                        {
+                            offset: 0.8,
+                            color: 'rgba(0, 247, 255, .2)',
+                        },
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                    shadowBlur: 10,
+                },
+                symbol: 'circle',
+                symbolSize: 6,
+            },
+        ],
+    });
+};
+// 生命周期
+onMounted(initChart);
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartInstance?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.inspection {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.left_spection {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.right_spection {
+    position: absolute;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.box_arch_point {
+    height: calc(100% - 40px);
+}
+
+.operation_spection {
+    height: 250px;
+    color: #fff;
+}
+
+.flex_spection {
+    flex: 1;
+    color: #fff;
+}
+
+.box_arch {
+    display: flex;
+    align-items: center;
+    height: calc(100% - 40px);
+}
+
+.image_tubbiness {
+    position: relative;
+    flex: none;
+    width: 200px;
+    height: 100%;
+    background: url("@/assets/images/tubbiness.png");
+    background-size: 80% 80%;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    .work_num {
+        position: absolute;
+        top: 32%;
+        left: 0;
+        right: 0;
+        text-align: center;
+        font-size: 26px;
+        font-weight: bold;
+        background-image: -webkit-linear-gradient(top, rgb(89 178 255) 10%, rgb(229, 232, 236));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+
+        span {
+            font-size: 14px;
+            color: rgb(158, 174, 195);
+        }
+    }
+
+    .work_title {
+        position: absolute;
+        bottom: 20%;
+        left: 0px;
+        right: 0px;
+        text-align: center;
+    }
+}
+
+.right_content {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    .work_week {
+        display: flex;
+        align-items: center;
+        font-size: 22px;
+        font-weight: bold;
+        color: #fff;
+
+        span {
+            padding-right: 10px;
+            font-size: 16px;
+            color: rgb(214, 218, 222);
+        }
+    }
+}
+
+.color_line_xj {
+    width: 6px;
+    height: 6px;
+    margin-right: 10px;
+}
+</style>
+<style lang="scss" scoped>
+.point_box :deep(.el-input__wrapper) {
+    background-color: transparent !important;
+    box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
+}
+
+.point_box :deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 1px #409EFF inset !important;
+}
+
+.point_box :deep(.el-input__inner) {
+    color: #ffffff !important;
+}
+</style>

src/views/system/receptiondesk/feedback.vue

@@ -7,69 +7,19 @@
 <script setup>
 import * as echarts from 'echarts'
 import 'echarts-liquidfill';
-defineProps({
-    title: {
-        type: String,
-        default: '暂无数据'
+const props = defineProps({
+    resultData: {
+        type: Array,
+        default: []
     }
 })
+const employData = ref([])
 const chartDistrict = ref(null);
 let chartDom = null;
 const initAccess = () => {
     chartDom = null
     chartDom = echarts.init(chartDistrict.value);
     let option = {
-        title: [{
-            text: "混凝土拌和站",
-            left: "33%",
-            top: "60%",
-            textAlign: "center",
-            textStyle: {
-                color: "#ffffff",
-                fontSize: 16,
-            },
-        },
-        {
-            text: "水稳拌和站",
-            left: "66%",
-            top: "60%",
-            textAlign: "center",
-            textStyle: {
-                color: "#ffffff",
-                fontSize: 16,
-            },
-        },
-        {
-            text: "张拉延伸量",
-            left: "18%",
-            top: "12.5%",
-            textAlign: "center",
-            textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-            },
-        },
-        {
-            text: "智能压浆",
-            left: "49%",
-            top: "12.5%",
-            textAlign: "center",
-            textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-            },
-        },
-        {
-            text: "履约出勤",
-            left: "82%",
-            top: "12.5%",
-            textAlign: "center",
-            textStyle: {
-                color: "#ffffff",
-                fontSize: 16,
-            },
-        },
-        ],
         series: [{
             type: "liquidFill",
             radius: "40%",
@@ -77,13 +27,12 @@ const initAccess = () => {
             color: ["#2c90fa"],
             center: ["18%", "25%"],
             label: {
-                normal: {
-                    textStyle: {
-                        color: "#2c90fa",
-                        insideColor: "#2c90fa",
-                        fontSize: 20,
-                    },
+                position: ['50%', '50%'],
+                formatter: function () {
+                    return employData.value[0];
                 },
+                fontSize: 16,
+                color: '#fff',
             },
             itemStyle: {
                 opacity: 0.5, //波浪的透明度
@@ -103,8 +52,8 @@ const initAccess = () => {
                     opacity: 1, //鼠标经过波浪颜色的透明度
                 },
             },
-            data: [0.6, 0.5804],
-            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            data: [0.8, 0.7804],
+            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
             waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
             backgroundStyle: {
                 color: 'transparent',
@@ -115,21 +64,19 @@ const initAccess = () => {
             animationEasingUpdate: "quarticInOut", //数据更新的动画效果
             animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
             animationDurationUpdate: 300, //数据更新动画的时长
-        },
-        {
+        }, {
             type: "liquidFill",
             radius: "40%",
             // 水球颜色
             color: ["#fdaf61"],
             center: ["49%", "25%"],
             label: {
-                normal: {
-                    textStyle: {
-                        color: "#fdaf61",
-                        insideColor: "#fdaf61",
-                        fontSize: 20,
-                    },
+                position: ['50%', '50%'],
+                formatter: function () {
+                    return employData.value[1];
                 },
+                fontSize: 16,
+                color: '#fff',
             },
             itemStyle: {
                 opacity: 0.5, //波浪的透明度
@@ -149,8 +96,8 @@ const initAccess = () => {
                     opacity: 1, //鼠标经过波浪颜色的透明度
                 },
             },
-            data: [0.3, 0.3444],
-            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            data: [0.4, 0.4444],
+            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
             waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
             backgroundStyle: {
                 color: 'transparent',
@@ -161,21 +108,19 @@ const initAccess = () => {
             animationEasingUpdate: "quarticInOut", //数据更新的动画效果
             animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
             animationDurationUpdate: 300, //数据更新动画的时长
-        },
-        {
+        }, {
             type: "liquidFill",
             radius: "40%",
             // 水球颜色
             color: ["#d4cc3e"],
             center: ["82%", "25%"],
             label: {
-                normal: {
-                    textStyle: {
-                        color: "#d4cc3e",
-                        insideColor: "#d4cc3e",
-                        fontSize: 20,
-                    },
+                position: ['50%', '50%'],
+                formatter: function () {
+                    return employData.value[2];
                 },
+                fontSize: 16,
+                color: '#fff',
             },
             itemStyle: {
                 opacity: 0.5, //波浪的透明度
@@ -195,8 +140,8 @@ const initAccess = () => {
                     opacity: 1, //鼠标经过波浪颜色的透明度
                 },
             },
-            data: [0.45, 0.4144],
-            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            data: [0.3, 0.2544],
+            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
             waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
             backgroundStyle: {
                 color: 'transparent',
@@ -207,21 +152,19 @@ const initAccess = () => {
             animationEasingUpdate: "quarticInOut", //数据更新的动画效果
             animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
             animationDurationUpdate: 300, //数据更新动画的时长
-        },
-        {
+        }, {
             type: "liquidFill",
             radius: "40%",
             // 水球颜色
             color: ["#beff72"],
             center: ["33%", "72%"],
             label: {
-                normal: {
-                    textStyle: {
-                        color: "#beff72",
-                        insideColor: "#beff72",
-                        fontSize: 20,
-                    },
+                position: ['50%', '50%'],
+                formatter: function () {
+                    return employData.value[3];
                 },
+                fontSize: 16,
+                color: '#fff',
             },
             itemStyle: {
                 opacity: 0.5, //波浪的透明度
@@ -241,8 +184,8 @@ const initAccess = () => {
                     opacity: 1, //鼠标经过波浪颜色的透明度
                 },
             },
-            data: [0.32, 0.3544],
-            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            data: [0.2, 0.1544],
+            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
             waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
             backgroundStyle: {
                 color: 'transparent',
@@ -253,21 +196,19 @@ const initAccess = () => {
             animationEasingUpdate: "quarticInOut", //数据更新的动画效果
             animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
             animationDurationUpdate: 300, //数据更新动画的时长
-        },
-        {
+        }, {
             type: "liquidFill",
             radius: "40%",
             // 水球颜色
             color: ["#7cf2e0"],
             center: ["66%", "72%"],
             label: {
-                normal: {
-                    textStyle: {
-                        color: "#7cf2e0",
-                        insideColor: "#7cf2e0",
-                        fontSize: 20,
-                    },
+                position: ['50%', '50%'],
+                formatter: function () {
+                    return employData.value[4];
                 },
+                fontSize: 16,
+                color: '#fff',
             },
             itemStyle: {
                 opacity: 0.5, //波浪的透明度
@@ -288,9 +229,8 @@ const initAccess = () => {
                     opacity: 1, //鼠标经过波浪颜色的透明度
                 },
             },
-
-            data: [0.32, 0.3044],
-            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            data: [0.12, 0.1044],
+            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
             waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
             backgroundStyle: {
                 color: 'transparent',
@@ -306,6 +246,63 @@ const initAccess = () => {
     };
     chartDom.setOption(option)
 };
+
+watch(() => props.resultData, (newVal) => {
+    let arrData = newVal
+    employData.value = []
+    arrData.forEach((item) => {
+        let nameTitle = ''
+        let originalString = item.name;
+        let insertString = "\n";
+        let maxLength = 6; // 指定插入位置
+        // 检查是否需要插入
+        if (originalString.length > maxLength) {
+            let newString = `${originalString.slice(0, maxLength)}${insertString}${originalString.slice(maxLength)}`;
+            nameTitle = newString
+        } else {
+            nameTitle = originalString
+        }
+        let arr = item.hours + '\n' + nameTitle
+        employData.value.push(arr)
+    })
+    if (chartDom) {
+        chartDom = echarts.init(chartDistrict.value);
+        chartDom.setOption({
+            series: [{
+                label: {
+                    formatter: function () {
+                        return employData.value[0];
+                    },
+                }
+            }, {
+                label: {
+                    formatter: function () {
+                        return employData.value[1];
+                    },
+                }
+            }, {
+                label: {
+                    formatter: function () {
+                        return employData.value[2];
+                    },
+                }
+            }, {
+                label: {
+                    formatter: function () {
+                        return employData.value[3];
+                    },
+                }
+            }, {
+                label: {
+                    formatter: function () {
+                        return employData.value[4];
+                    },
+                }
+            }],
+        })
+    }
+}, { deep: true, immediate: true } // 开启深度监听
+)
 // 生命周期
 onMounted(() => {
     initAccess()

src/views/system/receptiondesk/formerly.vue

@@ -7,219 +7,23 @@
 <script setup>
 import * as echarts from 'echarts'
 import 'echarts-gl'
-defineProps({
-    title: {
-        type: String,
-        default: '暂无数据'
-    }
+const props = defineProps({
+    xData: {
+        type: Array,
+        default: []
+    },
+    yData: {
+        type: Array,
+        default: []
+    },
 })
 const chartDistrict = ref(null);
 let chartDom = null;
 const initAccess = () => {
     chartDom = null
-    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
-        // 计算
-        let midRatio = (startRatio + endRatio) / 2;
-        let startRadian = startRatio * Math.PI * 2;
-        let endRadian = endRatio * Math.PI * 2;
-        let midRadian = midRatio * Math.PI * 2;
-        // 如果只有一个扇形，则不实现选中效果。
-        if (startRatio === 0 && endRatio === 1) {
-            isSelected = false;
-        }
-        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-        k = typeof k !== 'undefined' ? k : 1 / 3;
-        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-        // 计算高亮效果的放大比例（未高亮，则比例为 1）
-        let hoverRate = isHovered ? 1.05 : 1;
-        // 返回曲面参数方程
-        return {
-            u: {
-                min: -Math.PI,
-                max: Math.PI * 3,
-                step: Math.PI / 32
-            },
-            v: {
-                min: 0,
-                max: Math.PI * 2,
-                step: Math.PI / 20
-            },
-            x: function (u, v) {
-                if (u < startRadian) {
-                    return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                }
-                if (u > endRadian) {
-                    return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                }
-                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-            },
-            y: function (u, v) {
-                if (u < startRadian) {
-                    return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                }
-                if (u > endRadian) {
-                    return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                }
-                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-            },
-            z: function (u, v) {
-                if (u < - Math.PI * 0.5) {
-                    return Math.sin(u);
-                }
-                if (u > Math.PI * 2.5) {
-                    return Math.sin(u);
-                }
-                return Math.sin(v) > 0 ? 1 * height : -1;
-            }
-        };
-    };
-    // 生成模拟 3D 饼图的配置项
-    function getPie3D(pieData, internalDiameterRatio) {
-        let series = [];
-        let sumValue = 0;
-        let startValue = 0;
-        let endValue = 0;
-        let legendData = [];
-        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
-        for (let i = 0; i < pieData.length; i++) {
-            sumValue += pieData[i].value;
-            let seriesItem = {
-                name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-                type: 'surface',
-                parametric: true,
-                wireframe: {
-                    show: false
-                },
-                pieData: pieData[i],
-                pieStatus: {
-                    selected: false,
-                    hovered: false,
-                    k: k
-                }
-            };
-            if (typeof pieData[i].itemStyle != 'undefined') {
-                let itemStyle = {};
-                typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
-                typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
-                seriesItem.itemStyle = itemStyle;
-            }
-            series.push(seriesItem);
-        }
-        for (let i = 0; i < series.length; i++) {
-            endValue = startValue + series[i].pieData.value;
-            series[i].pieData.startRatio = startValue / sumValue;
-            series[i].pieData.endRatio = endValue / sumValue;
-            series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
-            startValue = endValue;
-            legendData.push(series[i].name);
-        }
-        series.push({
-            name: 'mouseoutSeries',
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-                show: false,
-            },
-            itemStyle: {
-                opacity: 0.1,
-                color: '#E1E8EC',
-            },
-            parametricEquation: {
-                u: {
-                    min: 0,
-                    max: Math.PI * 2,
-                    step: Math.PI / 20,
-                },
-                v: {
-                    min: 0,
-                    max: Math.PI,
-                    step: Math.PI / 20,
-                },
-                x: function (u, v) {
-                    return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
-                },
-                y: function (u, v) {
-                    return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
-                },
-                z: function (u, v) {
-                    return Math.cos(v) > 0 ? -0.5 : -5;
-                },
-            },
-        });
-        // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
-        series.push({
-            name: 'mouseoutSeries',
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-                show: false,
-            },
-            itemStyle: {
-                opacity: 0.1,
-                color: '#E1E8EC',
-            },
-            parametricEquation: {
-                u: {
-                    min: 0,
-                    max: Math.PI * 2,
-                    step: Math.PI / 20,
-                },
-                v: {
-                    min: 0,
-                    max: Math.PI,
-                    step: Math.PI / 20,
-                },
-                x: function (u, v) {
-                    return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
-                },
-                y: function (u, v) {
-                    return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
-                },
-                z: function (u, v) {
-                    return Math.cos(v) > 0 ? -5 : -7;
-                },
-            },
-        });
-        series.push({
-            name: 'mouseoutSeries',
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-                show: false,
-            },
-            itemStyle: {
-                opacity: 0.1,
-                color: '#E1E8EC',
-            },
-            parametricEquation: {
-                u: {
-                    min: 0,
-                    max: Math.PI * 2,
-                    step: Math.PI / 20,
-                },
-                v: {
-                    min: 0,
-                    max: Math.PI,
-                    step: Math.PI / 20,
-                },
-                x: function (u, v) {
-                    return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
-                },
-                y: function (u, v) {
-                    return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
-                },
-                z: function (u, v) {
-                    return Math.cos(v) > 0 ? -7 : -7;
-                },
-            },
-        });
-        return series;
-    }
     let colors = ['rgb(42, 139, 247)', 'rgb(250, 139, 31)', 'rgb(255, 244, 10)', 'rgb(140, 229, 41)', 'rgb(131, 255, 233)', 'rgb(141, 156, 255)']
-    let xData = ['0-15分钟', '15-30分钟', '30-45分钟', '45-60分钟', '60-90分钟', '90分钟以上']
-    let yData = [100, 20, 30, 50, 90, 40, 30, 20]
+    let xData = props.xData
+    let yData = props.yData
     // 传入数据生成 option
     let optionsData = [];
     for (let i = 0; i < xData.length; i++) {
@@ -331,6 +135,229 @@ const initAccess = () => {
     };
     chartDom.setOption(option)
 };
+
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
+    // 计算
+    let midRatio = (startRatio + endRatio) / 2;
+    let startRadian = startRatio * Math.PI * 2;
+    let endRadian = endRatio * Math.PI * 2;
+    let midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = typeof k !== 'undefined' ? k : 1 / 3;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    let hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < - Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+        }
+    };
+};
+// 生成模拟 3D 饼图的配置项
+function getPie3D(pieData, internalDiameterRatio) {
+    let series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    let legendData = [];
+    let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+    for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value;
+        let seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k
+            }
+        };
+        if (typeof pieData[i].itemStyle != 'undefined') {
+            let itemStyle = {};
+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+    for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
+        startValue = endValue;
+        legendData.push(series[i].name);
+    }
+    series.push({
+        name: 'mouseoutSeries',
+        type: 'surface',
+        parametric: true,
+        wireframe: {
+            show: false,
+        },
+        itemStyle: {
+            opacity: 0.1,
+            color: '#E1E8EC',
+        },
+        parametricEquation: {
+            u: {
+                min: 0,
+                max: Math.PI * 2,
+                step: Math.PI / 20,
+            },
+            v: {
+                min: 0,
+                max: Math.PI,
+                step: Math.PI / 20,
+            },
+            x: function (u, v) {
+                return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+            },
+            y: function (u, v) {
+                return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+            },
+            z: function (u, v) {
+                return Math.cos(v) > 0 ? -0.5 : -5;
+            },
+        },
+    });
+    // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+    series.push({
+        name: 'mouseoutSeries',
+        type: 'surface',
+        parametric: true,
+        wireframe: {
+            show: false,
+        },
+        itemStyle: {
+            opacity: 0.1,
+            color: '#E1E8EC',
+        },
+        parametricEquation: {
+            u: {
+                min: 0,
+                max: Math.PI * 2,
+                step: Math.PI / 20,
+            },
+            v: {
+                min: 0,
+                max: Math.PI,
+                step: Math.PI / 20,
+            },
+            x: function (u, v) {
+                return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+            },
+            y: function (u, v) {
+                return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+            },
+            z: function (u, v) {
+                return Math.cos(v) > 0 ? -5 : -7;
+            },
+        },
+    });
+    series.push({
+        name: 'mouseoutSeries',
+        type: 'surface',
+        parametric: true,
+        wireframe: {
+            show: false,
+        },
+        itemStyle: {
+            opacity: 0.1,
+            color: '#E1E8EC',
+        },
+        parametricEquation: {
+            u: {
+                min: 0,
+                max: Math.PI * 2,
+                step: Math.PI / 20,
+            },
+            v: {
+                min: 0,
+                max: Math.PI,
+                step: Math.PI / 20,
+            },
+            x: function (u, v) {
+                return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+            },
+            y: function (u, v) {
+                return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+            },
+            z: function (u, v) {
+                return Math.cos(v) > 0 ? -7 : -7;
+            },
+        },
+    });
+    return series;
+}
+watch(() => props.yData, (newVal) => {
+    let arrData = newVal
+    if (chartDom) {
+        let xData = props.xData
+        let yData = props.yData
+        // 传入数据生成 option
+        let optionsData = [];
+        for (let i = 0; i < xData.length; i++) {
+            optionsData.push(
+                {
+                    name: xData[i],
+                    value: yData[i],
+                }
+            );
+        }
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        chartDom.setOption({
+            series: series,
+        })
+    }
+}, { deep: true, immediate: true } // 开启深度监听
+)
 // 生命周期
 onMounted(() => {
     initAccess()

src/views/system/receptiondesk/gambit.vue

@@ -6,52 +6,46 @@
 
 <script setup>
 import * as echarts from 'echarts'
-defineProps({
-    title: {
-        type: String,
-        default: '暂无数据'
+const props = defineProps({
+    resultData: {
+        type: Array,
+        default: []
     }
 })
+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)",
+];
 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 },
-    ];
+    let result = props.resultData
     chartDom = echarts.init(chartDistrict.value);
     let option = {
         color: colorList,
@@ -71,7 +65,7 @@ const initAccess = () => {
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             extraCssText: 'backdrop-filter: blur(6px);',
             confine: true,
-            formatter: "{b}<br />客流指数: {c}",
+            formatter: "{b}<br />使用场数：{c}",
         },
         legend: {
             show: false,
@@ -166,7 +160,7 @@ const initAccess = () => {
                     padding: [0, 5, 10, 0],
                     inside: true,
                     formatter: function (value) {
-                        return `{name|客流指数：}{value|${value}}`;
+                        return `{name|使用场数：}{value|${value}}`;
                     },
                     rich: {
                         name: {
@@ -183,7 +177,7 @@ const initAccess = () => {
                         },
                     },
                 },
-                data: result.map((item) => item.value),
+                data: result.map((item) => item.count),
             },
         ],
         series: [
@@ -213,7 +207,7 @@ const initAccess = () => {
                 data: result.map((item, index) => {
                     return {
                         name: item.name,
-                        value: item.value,
+                        value: item.count,
                         itemStyle: {
                             barBorderRadius: [3, 0, 0, 3],
                             color: {
@@ -250,7 +244,7 @@ const initAccess = () => {
                 data: result.map((item, index) => {
                     return {
                         name: item.name,
-                        value: item.value,
+                        value: item.count,
                         itemStyle: {
                             color: colorListB[index],
                             borderColor: colorListC[index],
@@ -275,7 +269,7 @@ const initAccess = () => {
                 data: result.map((item, index) => {
                     return {
                         name: item.name,
-                        value: item.value,
+                        value: item.count,
                         itemStyle: {
                             color: colorListB[index],
                             borderColor: colorListC[index],
@@ -292,6 +286,78 @@ const initAccess = () => {
     };
     chartDom.setOption(option)
 };
+watch(() => props.resultData, (newVal) => {
+    let arrData = newVal
+    if (chartDom) {
+        chartDom = echarts.init(chartDistrict.value);
+        chartDom.setOption({
+            yAxis: [{
+                data: arrData.map((item) => item.name)
+            }, {
+                data: arrData.map((item) => item.count),
+            }],
+            series: [{
+                data: arrData.map((item, index) => {
+                    return {
+                        name: item.name,
+                        value: item.count,
+                        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],
+                                    },
+                                ],
+                            },
+                        },
+                    }
+                })
+            }, {
+                data: arrData.map((item, index) => {
+                    return {
+                        name: item.name,
+                        value: item.count,
+                        itemStyle: {
+                            color: colorListB[index],
+                            borderColor: colorListC[index],
+                            borderWidth: 12,
+                            shadowColor: colorListC[index],
+                            shadowBlur: 10,
+                            opacity: 1,
+                        },
+                    }
+                })
+            }, {
+                data: arrData.map((item, index) => {
+                    return {
+                        name: item.name,
+                        value: item.count,
+                        itemStyle: {
+                            color: colorListB[index],
+                            borderColor: colorListC[index],
+                            borderWidth: 30,
+                            shadowColor: colorListC[index],
+                            shadowBlur: 10,
+                            opacity: 1,
+                        },
+                    }
+                })
+            }],
+        })
+    }
+}, { deep: true, immediate: true } // 开启深度监听
+)
 // 生命周期
 onMounted(() => {
     initAccess()

src/views/system/receptiondesk/index.vue

@@ -12,13 +12,30 @@
           <div class="flex_spection">
             <HeadlineTag value="会议室累计使用场数 (Top5)"></HeadlineTag>
             <div class="box_arch">
-              <gambit></gambit>
+              <gambit :resultData="gamesData" v-if="gamesData.length > 0"></gambit>
+              <Empty v-else></Empty>
+            </div>
+            <div class="box_time_select">
+              <div class="time_choice" :class="timeType == 'month' ? 'activateTime' : ''" @click="timeChoice('month')">
+                本月
+              </div>
+              <div class="time_choice" :class="timeType == 'year' ? 'activateTime' : ''" @click="timeChoice('year')">
+                全年
+              </div>
             </div>
           </div>
           <div class="flex_spection">
             <HeadlineTag value="会议室累计使用时长 (Top5)"></HeadlineTag>
             <div class="box_arch" style="justify-content: flex-end">
-              <feedback></feedback>
+              <feedback :resultData="utilityTimeData"></feedback>
+            </div>
+            <div class="box_time_select">
+              <div class="time_choice" :class="timeType == 'month' ? 'activateTime' : ''" @click="timeChoice('month')">
+                本月
+              </div>
+              <div class="time_choice" :class="timeType == 'year' ? 'activateTime' : ''" @click="timeChoice('year')">
+                全年
+              </div>
             </div>
           </div>
         </div>
@@ -28,19 +45,31 @@
           <div class="flex_spection">
             <HeadlineTag type="right" value="部门全年会议次数统计"></HeadlineTag>
             <div class="box_arch">
-              <wordcloud></wordcloud>
+              <wordcloud :resultData="meetingData" v-if="meetingData.length > 0"></wordcloud>
+              <Empty v-else></Empty>
             </div>
           </div>
           <div class="flex_spection">
             <HeadlineTag type="right" value="会议时长分布"></HeadlineTag>
             <div class="box_arch">
-              <formerly></formerly>
+              <formerly :xData="durationKey" :yData="durationValue" v-if="durationValue.length > 0"></formerly>
+              <Empty v-else></Empty>
+            </div>
+            <div class="box_time_select" style="left: 0;right: unset;">
+              <div class="time_choiceil" :class="timeType == 'month' ? 'activateTime' : ''"
+                @click="timeChoice('month')">
+                本月
+              </div>
+              <div class="time_choiceil" :class="timeType == 'year' ? 'activateTime' : ''" @click="timeChoice('year')">
+                全年
+              </div>
             </div>
           </div>
           <div class="flex_spection">
-            <HeadlineTag type="right" value="会议人数分布"></HeadlineTag>
+            <HeadlineTag type="right" value="会议预约时段分析"></HeadlineTag>
             <div class="box_arch">
-              <satisfaction></satisfaction>
+              <subscribe :resultData="subscribeData" v-if="subscribeData.length > 0"></subscribe>
+              <Empty v-else></Empty>
             </div>
           </div>
         </div>
@@ -65,23 +94,40 @@ import { getDataAnalysis } from "@/api/system/meeting"
 import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import kilobit from '@/components/kilobit'
+import Empty from '@/components/Empty'
 import conference from './conference'
 import feedback from './feedback'
 import gambit from './gambit'
 import wordcloud from './wordcloud'
 import formerly from './formerly'
 import satisfaction from './satisfaction'
-const leisureNum = ref([0, 0, 0, 0])
-const busyNum = ref([0, 0, 0, 0])
-const forbiddenNum = ref([0, 0, 0, 0])
+import subscribe from './subscribe'
+const intervalId = ref(null)
+const timeType = ref('month') //month 月 year 年
+const leisureNum = ref([0, 0, 0, 0]) //空闲
+const busyNum = ref([0, 0, 0, 0]) //使用中
+const forbiddenNum = ref([0, 0, 0, 0]) //禁用
+// 全年会议统计
 const arrData = ref({})
+// 使用场数
+const gamesData = ref([])
+// 使用时长
+const utilityTimeData = ref([])
+// 会议次数
+const meetingData = ref([])
+// 会议时长分布
+const durationKey = ref([])
+const durationValue = ref([])
+// 会议预约时段
+const subscribeData = ref([])
 // 生命周期
 onMounted(() => {
+  intervalId.value = setInterval(getStatisticData, 10000);
   getStatisticData()
-  leisureNum.value = [0, 5, 3, 8]
-  busyNum.value = [0, 5, 3, 8]
-  forbiddenNum.value = [0, 5, 3, 8]
 });
+onUnmounted(() => {
+  clearInterval(intervalId.value);
+})
 // 获取会议统计数据
 function getStatisticData() {
   getDataAnalysis().then(res => {
@@ -100,7 +146,48 @@ function getStatisticData() {
       leisureNum.value = Array.from(String(addZero(arrList.meetingRoomFreeCount)), Number)
       busyNum.value = Array.from(String(addZero(arrList.meetingRoomOccupiedCount)), Number)
       forbiddenNum.value = Array.from(String(addZero(arrList.meetingRoomForbiddenCount)), Number)
-
+      meetingData.value = arrList.departmentMeetingYearCount
+      const result = [];
+      let obj = arrList.meetingAppointIntervalYear
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          let timeNum = key.split('-')
+          result.push({ time: timeNum[1], value: obj[key] });
+        }
+      }
+      subscribeData.value = result
+      console.log(timeType.value, 'timeType');
+      if (timeType.value == 'month') {
+        gamesData.value = arrList.meetingRoomMonthUseCount
+        let keysArray = Object.keys(arrList.meetingTimeMonth).map(item => {
+          let title = '分钟'
+          if (item == '90') {
+            title = '分钟以上'
+          } else {
+            title = '分钟'
+          }
+          return item + title
+        })
+        let valuesArray = Object.values(arrList.meetingTimeMonth)
+        durationKey.value = keysArray
+        durationValue.value = valuesArray
+        utilityTimeData.value = arrList.meetingRoomMonthTimes
+      } else {
+        gamesData.value = arrList.meetingRoomYearUseCount
+        let keysArray = Object.keys(arrList.meetingTimeYear).map(item => {
+          let title = '分钟'
+          if (item == '90') {
+            title = '分钟以上'
+          } else {
+            title = '分钟'
+          }
+          return item + title
+        })
+        let valuesArray = Object.values(arrList.meetingTimeYear)
+        durationKey.value = keysArray
+        durationValue.value = valuesArray
+        utilityTimeData.value = arrList.meetingRoomYearTimes
+      }
       function addZero(num) {
         if (num < 10) {
           return '000' + num;
@@ -115,6 +202,11 @@ function getStatisticData() {
     }
   })
 }
+// 选择时间
+function timeChoice(params) {
+  timeType.value = params
+  getStatisticData()
+}
 </script>
 
 <style scoped lang="scss">
@@ -159,6 +251,7 @@ function getStatisticData() {
 }
 
 .flex_spection {
+  position: relative;
   flex: 1;
   color: #fff;
 }
@@ -168,4 +261,37 @@ function getStatisticData() {
   align-items: center;
   height: calc(100% - 40px);
 }
+
+.box_time_select {
+  position: absolute;
+  top: 10px;
+  right: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.time_choice {
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  padding: 4px 15px;
+  border: 1px solid #1AB4FF;
+  margin-left: 10px;
+  background-color: rgb(11, 33, 62);
+}
+
+.time_choiceil {
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  padding: 4px 15px;
+  border: 1px solid #1AB4FF;
+  margin-right: 10px;
+  background-color: rgb(11, 33, 62);
+}
+
+.activateTime {
+  background: linear-gradient(0deg, rgba(26, 180, 255, 1), rgba(26, 180, 255, .05));
+  color: #ffffff;
+}
 </style>

src/views/system/receptiondesk/satisfaction.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 雷达图 -->
     <div class="person_box">
         <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
     </div>

src/views/system/receptiondesk/subscribe.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="person_box">
+        <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+const props = defineProps({
+    resultData: {
+        type: Array,
+        default: []
+    }
+})
+
+const chartRouting = ref(null);
+let chartInstance = null;
+const initChart = () => {
+    let result = props.resultData
+    chartInstance = echarts.init(chartRouting.value);
+    chartInstance.setOption({
+        grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '10%',
+            top: '16%',
+            containLabel: true,
+        },
+        xAxis: {
+            data: result.map((item) => item.time),
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+                symbol: 'none',
+                lineStyle: {
+                    color: '#50637A',
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                color: '#ffffff',
+                fontSize: 12,
+                padding: [10, 0, 0, 0],
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff',
+                fontSize: 12,
+                padding: [0, 10, 0, 0],
+            },
+            splitLine: {
+                show: false,
+            },
+        },
+        series: [
+            {
+                name: '时段',
+                data: result.map((item) => item.value),
+                type: 'line',
+                smooth: true,
+                color: '#00F7FF',
+                lineStyle: {
+                    width: 2,
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [{
+                            offset: 0,
+                            color: 'rgba(0, 247, 255, .6)',
+                        },
+                        {
+                            offset: 0.8,
+                            color: 'rgba(0, 247, 255, .2)',
+                        },
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                    shadowBlur: 10,
+                },
+                symbol: 'circle',
+                symbolSize: 6,
+            },
+        ],
+    });
+};
+// 生命周期
+onMounted(() => {
+    initChart()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartInstance?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/receptiondesk/wordcloud.vue

@@ -6,15 +6,17 @@
 
 <script setup>
 import * as echarts from 'echarts'
+const props = defineProps({
+    resultData: {
+        type: Array,
+        default: []
+    }
+})
 const chartcloud = ref(null);
 let chartDom = null;
 const initAccess = () => {
+    let result = props.resultData
     chartDom = echarts.init(chartcloud.value);
-    let information = {
-        color: "#069DFD",
-        area: ["单位一", "单位二", "单位三", "单位四", "单位五", "单位六"],
-        dataArray: [560, 480, 350, 280, 220, 180],
-    };
     let style = {
         width: 32,
         height: 24,
@@ -70,7 +72,7 @@ const initAccess = () => {
                     show: false,
                 },
                 inverse: true,
-                data: information.area,
+                data: result.map((item) => item.department_name),
                 axisLabel: {
                     color: "rgba(239, 242, 250, 1)",
                     margin: 10,
@@ -128,7 +130,7 @@ const initAccess = () => {
                         return value;
                     },
                 },
-                data: information.dataArray,
+                data: result.map((item) => item.count),
             },
         ],
         series: [
@@ -141,12 +143,12 @@ const initAccess = () => {
                     color: "rgb(10, 51, 126)",
                     borderRadius: 5, //设置背景的圆角
                 },
-                data: information.dataArray.map((item) => {
+                data: result.map((item) => item.count).map((item) => {
                     return {
                         value: item,
                         itemStyle: {
                             borderRadius: 5,
-                            color: information.color,
+                            color: "#069DFD",
                         },
                     };
                 }),
@@ -167,7 +169,7 @@ const initAccess = () => {
                 },
                 symbolSize: [4, 10], // 进度条白点的大小
                 z: 2,
-                data: [560, 480, 350, 280, 220, 180],
+                data: result.map((item) => item.count),
             },
         ],
     };