From 220a2f65dbbe788d48568bbe596d8b87f5b30b78 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Mon, 13 Feb 2023 17:52:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/DashBoard/components/Amap.vue      |  19 +++
 .../device/DashBoard/components/Guide.vue     |  58 +++++++++
 .../DashBoard/components/MessageChart.vue     | 112 ++++++++++++++++
 .../DashBoard/components/TimeSelect.vue       | 117 +++++++++++++++++
 src/views/device/DashBoard/index.vue          | 120 +++++++++++++++++-
 5 files changed, 421 insertions(+), 5 deletions(-)
 create mode 100644 src/views/device/DashBoard/components/Amap.vue
 create mode 100644 src/views/device/DashBoard/components/Guide.vue
 create mode 100644 src/views/device/DashBoard/components/MessageChart.vue
 create mode 100644 src/views/device/DashBoard/components/TimeSelect.vue

diff --git a/src/views/device/DashBoard/components/Amap.vue b/src/views/device/DashBoard/components/Amap.vue
new file mode 100644
index 00000000..9042e51f
--- /dev/null
+++ b/src/views/device/DashBoard/components/Amap.vue
@@ -0,0 +1,19 @@
+<template>
+    <div style="width: 100%; height: 400px">
+        <el-amap 
+        >
+        </el-amap>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { initAMapApiLoader } from '@vuemap/vue-amap';
+import '@vuemap/vue-amap/dist/style.css';
+initAMapApiLoader({
+    // key: '95fa72137f4263f8e64ae01f766ad09c',
+    key: 'a0415acfc35af15f10221bfa5a6850b4',
+    securityJsCode: 'cae6108ec3dd222f946d1a7237c78be0',
+});
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/device/DashBoard/components/Guide.vue b/src/views/device/DashBoard/components/Guide.vue
new file mode 100644
index 00000000..510dcc10
--- /dev/null
+++ b/src/views/device/DashBoard/components/Guide.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="home-title">
+        <div v-if="title">{{ title }}</div>
+        <div v-else>
+            <slot name="title"></slot>
+        </div>
+        <div class="extra-text">
+            <slot name="extra"></slot>
+        </div>
+        <div class="home-title-english">{{ english }}</div>
+    </div>
+</template>
+
+<script setup lang="ts" name="Guide">
+interface guideProps {
+    title?: string;
+    english?: string;
+}
+
+const props = defineProps<guideProps>();
+</script>
+
+<style scoped lang="less">
+.home-title {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding-left: 18px;
+    font-weight: 700;
+    font-size: 18px;
+
+    &::after {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        background-color: @primary-color;
+        border: 1px solid #b4c0da;
+        transform: translateY(-50%);
+        content: ' ';
+    }
+
+    .extra-text {
+        font-size: 14px;
+        font-weight: 400;
+    }
+
+    .home-title-english {
+        position: absolute;
+        top: 30px;
+        color: rgba(0, 0, 0, 0.3);
+        font-size: 12px;
+    }
+}
+</style>
diff --git a/src/views/device/DashBoard/components/MessageChart.vue b/src/views/device/DashBoard/components/MessageChart.vue
new file mode 100644
index 00000000..c088d53d
--- /dev/null
+++ b/src/views/device/DashBoard/components/MessageChart.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="chart" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const { proxy } = <any>getCurrentInstance();
+
+const props = defineProps({
+    // 图表数据
+    x: {
+        type: Array,
+        default: () => [],
+    },
+    y: {
+        type: Array,
+        default: () => [],
+    },
+    maxY:{
+        type:Number,
+        default: 0
+    }
+});
+
+/**
+ * 绘制图表
+ */
+const createChart = () => {
+    nextTick(() => {
+        const myChart = echarts.init(proxy.$refs.chart);
+        const options = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: props.x,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b0}<br />{a0}: {c0}',
+          // formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}%'
+        },
+        grid: {
+          top: '2%',
+          bottom: '5%',
+          left: props.maxY > 100000 ? '90px' : '50px',
+          right: '50px',
+        },
+        series: [
+          {
+            name: '消息量',
+            data: props.y,
+            type: 'bar',
+            // type: 'line',
+            // smooth: true,
+            color: '#597EF7',
+            barWidth: '30%',
+            // areaStyle: {
+            //   color: {
+            //     type: 'linear',
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [
+            //       {
+            //         offset: 0,
+            //         color: '#685DEB', // 100% 处的颜色
+            //       },
+            //       {
+            //         offset: 1,
+            //         color: '#FFFFFF', //   0% 处的颜色
+            //       },
+            //     ],
+            //     global: false, // 缺省为 false
+            //   },
+            // },
+          },
+          {
+            name: '占比',
+            data: props.y,
+            // data: percentageY,
+            type: 'line',
+            smooth: true,
+            symbolSize: 0, // 拐点大小
+            color: '#96ECE3',
+          },
+        ],
+      }
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    });
+};
+
+watch(
+    () => props.y,
+    () => createChart(),
+    { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/src/views/device/DashBoard/components/TimeSelect.vue b/src/views/device/DashBoard/components/TimeSelect.vue
new file mode 100644
index 00000000..eaa86387
--- /dev/null
+++ b/src/views/device/DashBoard/components/TimeSelect.vue
@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <a-radio-group
+            v-if="quickBtn"
+            default-value="today"
+            button-style="solid"
+            v-model:value="radioValue"
+            @change="(e) => handleBtnChange(e.target.value)"
+        >
+            <a-radio-button
+                v-for="item in quickBtnList"
+                :key="item.value"
+                :value="item.value"
+            >
+                {{ item.label }}
+            </a-radio-button>
+        </a-radio-group>
+        <a-range-picker
+            format="YYYY-MM-DD HH:mm:ss"
+            valueFormat="YYYY-MM-DD HH:mm:ss"
+            style="margin-left: 12px"
+            @change="rangeChange"
+            v-model:value="rangeVal"
+            :allowClear="false"
+        >
+        </a-range-picker>
+    </div>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import { PropType } from 'vue';
+
+interface BtnOptions {
+    label: string;
+    value: string;
+}
+
+interface EmitProps {
+    (e: 'change', data: Record<string, any>): void;
+}
+
+const emit = defineEmits<EmitProps>();
+
+const props = defineProps({
+    // 显示快捷按钮
+    quickBtn: {
+        type: Boolean,
+        default: true,
+    },
+    // 快捷按钮列表
+    quickBtnList: {
+        type: Array as PropType<BtnOptions[]>,
+        default: [
+            { label: '今日', value: 'today' },
+            { label: '近一周', value: 'week' },
+            { label: '近一月', value: 'month' },
+            { label: '近一年', value: 'year' },
+        ],
+    },
+    type: {
+        type: String,
+        default: 'today',
+    },
+});
+
+const radioValue = ref(props.type || 'week' || undefined);
+const rangeVal = ref<[string, string]>();
+
+const rangeChange = (val: any) => {
+    radioValue.value = undefined;
+    emit('change', {
+        start: moment(val[0]).valueOf(),
+        end: moment(val[1]).valueOf(),
+        type: undefined,
+    });
+};
+
+const getTimeByType = (type: string) => {
+    switch (type) {
+        case 'hour':
+            return moment().subtract(1, 'hours').valueOf();
+        case 'week':
+            return moment().subtract(6, 'days').valueOf();
+        case 'month':
+            return moment().subtract(29, 'days').valueOf();
+        case 'year':
+            return moment().subtract(365, 'days').valueOf();
+        default:
+            return moment().startOf('day').valueOf();
+    }
+};
+
+const handleBtnChange = (val: string) => {
+    radioValue.value = val;
+    let endTime = moment(new Date()).valueOf();
+    let startTime = getTimeByType(val);
+    if (val === 'yesterday') {
+        startTime = moment().subtract(1, 'days').startOf('day').valueOf();
+        endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+    }
+    rangeVal.value = [
+        moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
+        moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
+    ];
+    emit('change', {
+        start: startTime,
+        end: endTime,
+        type: val,
+    });
+};
+handleBtnChange(radioValue.value);
+watch(
+    () => radioValue.value,
+    { deep: true, immediate: true },
+);
+</script>
diff --git a/src/views/device/DashBoard/index.vue b/src/views/device/DashBoard/index.vue
index 88779122..b916fef9 100644
--- a/src/views/device/DashBoard/index.vue
+++ b/src/views/device/DashBoard/index.vue
@@ -24,7 +24,10 @@
                         :footer="onlineFooter"
                         :value="onlineToday"
                     >
-                        <BarChart :chartXData="barChartXData" :chartYData="barChartYData"></BarChart> </TopCard
+                        <BarChart
+                            :chartXData="barChartXData"
+                            :chartYData="barChartYData"
+                        ></BarChart> </TopCard
                 ></a-col>
                 <a-col :span="6"
                     ><TopCard
@@ -32,15 +35,50 @@
                         :footer="messageFooter"
                         :value="dayMessage"
                     >
-                        <LineChart :chartXData="lineChartXData" :chartYData="lineChartYData"></LineChart> </TopCard
+                        <LineChart
+                            :chartXData="lineChartXData"
+                            :chartYData="lineChartYData"
+                        ></LineChart> </TopCard
                 ></a-col>
             </a-row>
+            <a-row :span="24">
+                <a-col :span="24">
+                    <div class="message-card">
+                        <Guide title="设备消息">
+                            <template #extra>
+                                <TimeSelect
+                                    key="flow-static"
+                                    :type="'week'"
+                                    :quickBtnList="quickBtnList"
+                                    @change="getEcharts"
+                                />
+                            </template>
+                        </Guide>
+                        <div class="message-chart">
+                            <MessageChart :x="messageChartXData" :y="messageChartYData" :maxY="messageMaxChartYData"></MessageChart>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+            <a-row :span="24">
+                <a-col :span="24">
+                    <div class="device-position">
+                        <Guide title="设备分布"></Guide>
+                        <div class="device-map">
+                            <Amap></Amap>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
         </div>
     </page-container>
 </template>
 <script lang="ts" setup>
 import BarChart from './components/BarChart.vue';
 import LineChart from './components/LineChart.vue';
+import TimeSelect from './components/TimeSelect.vue';
+import Guide from './components/Guide.vue';
+import MessageChart from './components/messageChart.vue';
 import {
     productCount,
     deviceCount,
@@ -51,6 +89,7 @@ import encodeQuery from '@/utils/encodeQuery';
 import { getImage } from '@/utils/comm';
 import type { Footer } from '@/views/device/DashBoard/typings';
 import TopCard from '@/views/device/DashBoard/components/TopCard.vue';
+import Amap from './components/Amap.vue'
 let productTotal = ref(0);
 let productFooter = ref<Footer[]>([
     {
@@ -95,6 +134,15 @@ let lineChartYData = ref<any[]>([]);
 let lineChartXData = ref<any[]>([]);
 let barChartXData = ref<any[]>([]);
 let barChartYData = ref<any[]>([]);
+let messageChartXData = ref<any[]>([]);
+let messageChartYData = ref<any[]>([]);
+let messageMaxChartYData = ref<number>();
+const quickBtnList = [
+    { label: '昨日', value: 'yesterday' },
+    { label: '近一周', value: 'week' },
+    { label: '近一月', value: 'month' },
+    { label: '近一年', value: 'year' },
+];
 const getProductData = () => {
     productCount().then((res) => {
         if (res.status == 200) {
@@ -224,19 +272,81 @@ const getDevice = () => {
             const oneDay = res.result.find(
                 (item: any) => item.group === 'oneday',
             )?.data.value;
-            dayMessage = oneDay;
+            dayMessage.value = oneDay;
             messageFooter.value[0].value = thisMonth;
             const today = res.result.filter(
                 (item: any) => item.group === 'today',
             );
             const x = today.map((item: any) => item.data.timeString).reverse();
             const y = today.map((item: any) => item.data.value).reverse();
-            lineChartXData.value = x ;
-            lineChartYData.value = y ;
+            lineChartXData.value = x;
+            lineChartYData.value = y;
         }
     });
 };
 getDevice();
+const getEcharts = (data: any) => {
+    let _time = '1h';
+    let format = 'HH';
+    let limit = 12;
+    const dt = data.end - data.start;
+    const hour = 60 * 60 * 1000;
+    const days = hour * 24;
+    const months = days * 30;
+    const year = 365 * days;
+    if (dt <= days) {
+        limit = Math.abs(Math.ceil(dt / hour));
+    } else if (dt > days && dt < year) {
+        limit = Math.abs(Math.ceil(dt / days)) + 1;
+        _time = '1d';
+        format = 'M月dd日';
+    } else if (dt >= year) {
+        limit = Math.abs(Math.floor(dt / months));
+        _time = '1M';
+        format = 'yyyy年-M月';
+    }
+    dashboard([
+        {
+            dashboard: 'device',
+            object: 'message',
+            measurement: 'quantity',
+            dimension: 'agg',
+            group: 'device_msg',
+            params: {
+                time: _time,
+                format: format,
+                limit: limit,
+                from: data.start,
+                to: data.end,
+            },
+        },
+    ]).then((res:any) => {
+        if (res.status === 200) {
+            messageChartXData.value = res.result
+                .map((item: any) =>
+                    _time === '1h'
+                        ? `${item.data.timeString}时`
+                        : item.data.timeString,
+                )
+                .reverse();
+            messageChartYData.value = res.result.map((item: any) => item.data.value).reverse();
+            messageMaxChartYData.value = Math.max.apply(null, messageChartYData.value.length ? messageChartYData.value : [0]);
+        }
+    });
+};
 </script>
 <style lang="less" scoped>
+.message-card,.device-position{
+    margin-top: 24px;
+    padding: 24px;
+    background-color: white;
+}
+.message-chart {
+    width: 100%;
+    height: 400px;   
+}
+.amap-box{
+    height: 500px;
+    width: 100%;
+}
 </style>
\ No newline at end of file