页面图形化

src/api/alarm/record.js

@@ -70,4 +70,12 @@ export function getBizAccess(query) {
         params: query
     })
 }
+// 系统压力排名
+export function getLevelSort(query) {
+    return request({
+        url: "/alarm/record/list/levelSort",
+        method: 'get',
+        params: query
+    })
+}
 

src/api/hl/hlDay.js

@@ -15,3 +15,11 @@ export function hlDay(dayId) {
         method: 'get'
     })
 }
+
+// 历史记录
+export function history() {
+    return request({
+        url: 'hl/hlDay/history',
+        method: 'get',
+    })
+}

src/api/hl/hlScore.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
 // 查询健康度分数记录列表
-export function hlsList(modelId,query) {
+export function hlsList(modelId, query) {
     return request({
-        url: '/hl/hlScore/list/'+modelId,
+        url: '/hl/hlScore/list/' + modelId,
         method: 'get',
         params: query
     })
@@ -12,7 +12,15 @@ export function hlsList(modelId,query) {
 // 获取健康度分数记录详细信息
 export function hlScore(hlScoreId) {
     return request({
-        url: 'hl/hlScore/'+hlScoreId,
+        url: 'hl/hlScore/' + hlScoreId,
+        method: 'get',
+    })
+}
+
+// 历史记录
+export function history() {
+    return request({
+        url: 'hl/hlScore/history',
         method: 'get',
     })
 }

src/router/index.js

@@ -66,7 +66,7 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '业务运行风险', icon: 'dashboard', affix: true }
       }
     ]
   },

src/views/alarm/record/bizAccess.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="app-container">
+  <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0">
       <el-form-item label="" style="width: 308px;margin-right:10px">
         <el-date-picker
@@ -16,32 +16,35 @@
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
+    <el-card>
+      <div ref="chartAccess" style="height: 600px;"></div>
+    </el-card>
+    <!--    <el-table v-loading="loading" :data="recordList" border>-->
+    <!--      <el-table-column label="告警ID" align="center" prop="modelId" width="80"/>-->
+    <!--      <el-table-column label="业务模型" align="center" prop="modelName"/>-->
+    <!--      <el-table-column label="最近1小时系统压力值" align="center" prop="access"/>-->
+    <!--      <el-table-column label="告警数量" align="center" prop="num" />-->
+    <!--      <el-table-column label="操作" align="center" prop="alarmTime" width="180">-->
+    <!--        <template #default="scope">-->
+    <!--          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>-->
+    <!--        </template>-->
+    <!--      </el-table-column>-->
+    <!--    </el-table>-->
 
-    <el-table v-loading="loading" :data="recordList" border>
-      <el-table-column label="告警ID" align="center" prop="modelId" width="80"/>
-      <el-table-column label="业务模型" align="center" prop="modelName"/>
-      <el-table-column label="最近1小时系统压力值" align="center" prop="access"/>
-      <el-table-column label="告警数量" align="center" prop="num" />
-      <el-table-column label="操作" align="center" prop="alarmTime" width="180">
-        <template #default="scope">
-          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-    />
+    <!--    <pagination-->
+    <!--        v-show="total>0"-->
+    <!--        :total="total"-->
+    <!--        v-model:page="queryParams.pageNum"-->
+    <!--        v-model:limit="queryParams.pageSize"-->
+    <!--        @pagination="getList"-->
+    <!--    />-->
   </div>
 </template>
 
 <script setup name="Record">
 import {getBizAccess} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
+import * as echarts from "echarts";
 
 const {proxy} = getCurrentInstance();
 const {alarm_level} = proxy.useDict('alarm_level');
@@ -57,33 +60,318 @@ const total = ref(0);
 const title = ref("");
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
+const chartAccess = ref();
 
 const data = reactive({
   form: {},
   queryParams: {
-    pageNum: 1,
-    pageSize: 20,
+    start: null,
+    end: null,
   },
 });
 
-function handleDetails(row){
-  console.log(row,router)
+function handleDetails(row) {
+  console.log(row, router)
 }
 
 const {queryParams, form} = toRefs(data);
 
+function initChart(res) {
+  let myChart = echarts.init(chartAccess.value);
+  let img = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjUzOTAwNTEzMjYyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxNjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5AZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IGZlZWRiYWNrLWljb25mb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xMDMxMTU4X3U2OXc4eWh4ZHUud29mZjI/dD0xNjMwMDMzNzU5OTQ0IikgZm9ybWF0KCJ3b2ZmMiIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LndvZmY/dD0xNjMwMDMzNzU5OTQ0IikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xMDMxMTU4X3U2OXc4eWh4ZHUudHRmP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgidHJ1ZXR5cGUiKTsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBoMzJ2MTYwaC0zMnpNNTEyIDI1NmgzMnYxNjBoLTMyek01MTIgNTEyaDMydjE2MGgtMzJ6TTUxMiA3NjhoMzJ2MTYwaC0zMnoiIGZpbGw9IiNkODFlMDYiIHAtaWQ9IjIxNzAiPjwvcGF0aD48L3N2Zz4=";
+  let datas = [];
+  let legendData1 = [];
+  let legendData2 = [];
+  let xMax1 = 50;
+  let xMax2 = 50;
+
+  for (let i in res.data) {
+    let obj = res.data[i];
+    datas.push(obj.modelName);
+    legendData1.push(obj.access);
+    legendData2.push(obj.num);
+    if (obj.access > xMax1) {
+      xMax1 = obj.access;
+    }
+    if (obj.num > xMax2) {
+      xMax2 = obj.num;
+    }
+  }
+  let dataheng = [xMax1+2, xMax1+2, xMax1+2, xMax1+2, xMax1+2];
+  let option = {
+    backgroundColor: '#fff',
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(210,219,238,0.2)',
+        },
+      },
+    },
+    legend: {},
+    grid: [{
+      show: false,
+      left: '0',
+      top: 0,
+      bottom: 22,
+      width: '15%',
+    },
+      {
+        containLabel: true,
+        top: 0,
+        left: '20%',
+        bottom: '0%',
+        width: '50%',
+        show: false
+      },
+      {
+        left: '74%',
+        right: '0%',
+        top: 0,
+        bottom: '0%',
+        containLabel: true,
+        show: false
+      },
+    ],
+    xAxis: [{
+      gridIndex: 0,
+      show: false,
+    },
+      {
+        gridIndex: 1,
+        show: false,
+        max: xMax1,
+      },
+      {
+
+        gridIndex: 2,
+        show: false,
+        max: xMax2,
+      },
+    ],
+    yAxis: [{
+      gridIndex: 0,
+      type: 'category',
+      inverse: true,
+      position: 'right',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      data: datas.map(function (value) {
+        return {
+          value: value,
+          textStyle: {
+            align: 'right',
+          },
+        };
+      }),
+      axisLabel: {
+        fontSize: 14,
+        align: 'left',
+        rich: {
+          a: {
+            color: '#fff',
+            backgroundColor: '#49a2ff',
+            width: 24,
+            height: 24,
+            align: 'center',
+            borderRadius: 3,
+          },
+          a1: {
+            color: '#fff',
+            backgroundColor: '#f5576c',
+            width: 24,
+            height: 24,
+            align: 'center',
+            borderRadius: 3,
+          },
+          a2: {
+            color: '#fff',
+            backgroundColor: '#fee140',
+            width: 24,
+            height: 24,
+            align: 'center',
+            borderRadius: 3,
+          },
+          a3: {
+            color: '#fff',
+            backgroundColor: '#96fbc4',
+            width: 24,
+            height: 24,
+            align: 'center',
+            borderRadius: 3,
+          },
+          b: {
+            color: '#333',
+            width: 100,
+            height: 30,
+            align: 'right',
+          },
+        },
+        formatter: function (params) {
+          var index = datas.map((item) => item).indexOf(params);
+          index = index + 1;
+          if (index < 4) {
+            return [`{a${index}|${index}}{b|${params}}`].join('\n');
+          } else {
+            return [`{a|${index}}{b|${params}}`].join('\n');
+          }
+        },
+      },
+    },
+      {
+        inverse: true,
+        gridIndex: 1,
+        data: datas,
+        // max:10,
+        axisLabel: {
+          // margin: 80,
+          show: false
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisPointer: {
+          label: {
+            show: false,
+            margin: 30,
+          },
+        },
+      },
+      {
+        gridIndex: 2,
+        inverse: true,
+        data: datas,
+        //   max:10,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        axisPointer: {
+          label: {
+            show: false,
+            margin: 30,
+          },
+        },
+      },
+    ],
+    series: [{
+      type: 'bar',
+      name: '系统压力值',
+      stack: '2',
+      barWidth: 20,
+      z: 10,
+      barCategoryGap: 15,
+      // barGap:i==1?'-100%':'0',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: '#ffc001',
+        barBorderRadius: [0, 10, 10, 0],
+        // barBorderRadius: legendData[i].barBorderRadius,
+        emphasis: {
+          color: '#ffc001',
+        },
+      },
+      // 数字
+      label: {
+        show: true,
+        position: 'inside',
+        right: 0,
+        color: '#fff',
+        formatter: function (params) {
+          if (params.value == 0) {
+            return '';
+          } else {
+            return params.value;
+          }
+        },
+      },
+      data: legendData1,
+    },
+      //虚线
+      {
+        name: '',
+        type: 'pictorialBar',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        symbolSize: [7, 30],
+        symbolOffset: [15, 0],
+        symbol: 'image://' + img,
+        symbolPosition: 'end',
+        barWidth: "20",
+        z: 12,
+        color: '#fe5959',
+        data: dataheng,
+        tooltip: {
+          show: false,
+        },
+      },
+      //右边的柱状图
+      {
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        type: 'bar',
+        name: '告警数量',
+        stack: '3',
+        barWidth: 30,
+        barCategoryGap: 15,
+        // barGap:i==1?'-100%':'0',
+        itemStyle: {
+          color: '#fe5959',
+          barBorderRadius: [0, 20, 20, 0],
+          emphasis: {
+            color: '#fe5959',
+          },
+        },
+        // 数字
+        label: {
+          show: true,
+          position: 'inside',
+          right: 0,
+          color: '#fff',
+          formatter: function (params) {
+            if (params.value == 0) {
+              return '';
+            } else {
+              return params.value;
+            }
+          },
+        },
+        data: legendData2,
+      },
+    ],
+  };
+  // 3.配置项和数据给实例化对象
+  myChart.setOption(option);
+}
+
 /** 查询告警记录列表 */
 function getList() {
   loading.value = true;
   queryParams.value.params = {};
   if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
-    queryParams.value.params["start"] = daterangeAlarmTime.value[0];
-    queryParams.value.params["end"] = daterangeAlarmTime.value[1];
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
   }
   getBizAccess(queryParams.value).then(response => {
-    recordList.value = response.rows;
-    total.value = response.total;
+    // recordList.value = response.rows;
+    // total.value = response.total;
     loading.value = false;
+    initChart(response);
   });
 }
 

src/views/alarm/record/bizSort.vue

@@ -1,45 +1,312 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="12">
-        <el-card>
-          <div ref="echartsRef" style="width: 600px; height: 400px;"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="12"></el-col>
-    </el-row>
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0">
+      <el-form-item label="" style="width: 308px;margin-right:10px">
+        <el-date-picker
+            v-model="daterangeAlarmTime"
+            value-format="YYYY-MM-DD"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+<!--      <el-form-item label="" style="width: 208px;margin-right:10px">-->
+<!--        <el-select v-model="queryParams.objType" placeholder="请选择业务类型" clearable style="width: 100%">-->
+<!--          <el-option-->
+<!--              v-for="dict in biz_type"-->
+<!--              :key="dict.value"-->
+<!--              :label="dict.label"-->
+<!--              :value="dict.value"-->
+<!--          ></el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-card>
+      <div ref="chartSort" style="height: 600px;"></div>
+    </el-card>
+    <!--    <el-table v-loading="loading" border :data="recordList">-->
+    <!--      <el-table-column label="告警ID" align="center" prop="objId" width="80"/>-->
+    <!--      <el-table-column label="告警对象/应用组件" align="center" prop="objName"/>-->
+    <!--      <el-table-column label="告警数量" align="center" prop="num"/>-->
+    <!--      <el-table-column label="操作" align="center" prop="alarmTime" width="180">-->
+    <!--        <template #default="scope">-->
+    <!--          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>-->
+    <!--        </template>-->
+    <!--      </el-table-column>-->
+    <!--    </el-table>-->
+
+    <!--    <pagination-->
+    <!--        v-show="total>0"-->
+    <!--        :total="total"-->
+    <!--        v-model:page="queryParams.pageNum"-->
+    <!--        v-model:limit="queryParams.pageSize"-->
+    <!--        @pagination="getList"-->
+    <!--    />-->
   </div>
 </template>
 
-<script setup>
-import {onMounted, ref} from 'vue';
-import * as echarts from 'echarts';
+<script setup name="Record">
+import {getBizSort} from "@/api/alarm/record";
+import {useRouter} from "vue-router";
+import * as echarts from "echarts";
+
+const {proxy} = getCurrentInstance();
+const {alarm_level} = proxy.useDict('alarm_level');
+const {biz_type} = proxy.useDict('biz_type');
+
+const recordList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const daterangeAlarmTime = ref([]);
+const router = useRouter();
+const chartSort = ref();
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    start: null,
+    end: null
+  },
+});
+
+const {queryParams, form} = toRefs(data);
 
-const echartsRef = ref(null);
+function handleDetails(row) {
+  console.log(row, router)
+}
 
-onMounted(() => {
-  const chart = echarts.init(echartsRef.value);
-  const option = {
-    // ECharts 配置项
-    title: {
-      text: 'ECharts 示例'
+function initChart(res) {
+  const myChart = echarts.init(chartSort.value);
+  var ydata = [];
+  var salvProValue = [];
+  for (const i in res.data) {
+    let obj=res.data[i]
+    ydata.push(obj.objName);
+    salvProValue.push(obj.num);
+  }
+  let colorList = ['#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093','#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093'];
+  let option = {
+    backgroundColor: '#fff',
+    grid: {
+      left: '2%',
+      right: '4%',
+      bottom: '2%',
+      top: '2%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'none'
+      },
+      formatter: '{b}:{c}',
     },
-    tooltip: {},
     xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+      show: false,
+      type: 'value',
+    },
+    yAxis: {
+      type: "category",
+      data: ydata,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        margin: 30,
+        width: 16,
+        align: "left",
+        overflow: "truncate",
+        formatter: function (value, index) {
+          let ind = index + 1;
+          if (ind == ydata.length) {
+            return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
+          } else if (ind + 1 == ydata.length) {
+            return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
+          } else if (ind + 2 == ydata.length) {
+            return (
+                "{three|" + (ydata.length - index) + "} {c|" + value + "}"
+            );
+          }
+          if (ydata.length - index > 9) {
+            return (
+                "{five|" + (ydata.length - index) + "} {d|" + value + "}"
+            );
+          }
+          return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
+        },
+        rich: {
+          a: {
+            color: "#59c9f9",
+          },
+          b: {
+            color: "#59c9f9",
+          },
+          c: {
+            color: "#59c9f9",
+          },
+          d: {
+            color: "#59c9f9",
+          },
+          // 第一名
+          one: {
+            backgroundColor: "#E86452",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 第二名
+          two: {
+            backgroundColor: "#FF9845",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 第三名
+          three: {
+            backgroundColor: "#F6BD16",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 一位数
+          four: {
+            backgroundColor: "rgba(0,0,0,0.15)",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 两位数
+          five: {
+            backgroundColor: "rgba(0,0,0,0.15)",
+            color: "white",
+            width: 16,
+            height: 16,
+            padding: [1, 0, 0, 1],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+        },
+      },
     },
-    yAxis: {},
-    series: [{
-      name: '销量',
-      type: 'bar',
-      data: [5, 20, 36, 10, 10, 20]
-    }]
+    series: [
+      {
+        name: 'value',
+        type: 'bar',
+        zlevel: 1,
+        showBackground: true,
+
+        itemStyle: {
+          normal: {
+            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
+            color: (params) => {
+              return colorList[params.dataIndex]
+            },
+            // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            //   '#5CFFB1', '#24C879'
+            // ].map((color, offset) => ({
+            //   color,
+            //   offset
+            // }))), // 渐变
+          },
+        },
+        label: {
+          normal: {
+            color: '#000',
+            show: true,
+            position: [0, '-20px'],
+            textStyle: {
+              fontSize: 16,
+            },
+            formatter: '{b}',
+          },
+        },
+        barWidth: 20,
+        data: salvProValue,
+      },
+      {
+        name: '21',
+        type: 'bar',
+        barWidth: 20,
+        barGap: '-100%',
+        data: salvProValue,
+        itemStyle: {
+          normal: {
+            color: '#f5f8ff',
+          },
+          emphasis: {
+            color: '#f5f8ff',
+          },
+        },
+        label: {
+          normal: {
+            color: '#000',
+            show: true,
+            position: 'right',
+            distance: 4,
+            textStyle: {
+              fontSize: 16,
+            },
+            formatter: '{c}',
+          },
+        },
+      },
+    ],
   };
 
-  chart.setOption(option);
-});
-</script>
+  myChart.setOption(option)
+}
+
+/** 查询告警记录列表 */
+function getList() {
+  loading.value = true;
+  queryParams.value.params = {};
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
+  }
+  getBizSort(queryParams.value).then(response => {
+    // recordList.value = response.rows;
+    // total.value = response.total;
+    loading.value = false;
+    initChart(response);
+  });
+}
 
-<style>
-/* 你的样式 */
-</style>
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  daterangeAlarmTime.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+getList();
+</script>

src/views/alarm/record/bizType.vue

@@ -7,8 +7,8 @@
             value-format="YYYY-MM-DD"
             type="daterange"
             range-separator="-"
-            start-placeholder="告警开始日期"
-            end-placeholder="告警结束日期"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
@@ -16,34 +16,36 @@
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
-    <el-table v-loading="loading" :data="recordList" border >
-      <el-table-column label="业务类型" align="center" >
-        <template #default="scope">
-          <span v-if="biz_type.length">{{ biz_type.find(p=>p.value === scope.row.bizType ).label }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警值" align="center" prop="num"  />
-      <el-table-column label="操作" align="center" prop="alarmTime" width="180">
-        <template #default="scope">
-          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-    />
+    <el-card>
+      <div ref="chartType" style="height: 600px;"></div>
+    </el-card>
+<!--    <el-table v-loading="loading" :data="recordList" border >-->
+<!--      <el-table-column label="业务类型" align="center" >-->
+<!--        <template #default="scope">-->
+<!--          <span v-if="biz_type.length">{{ biz_type.find(p=>p.value === scope.row.bizType ).label }}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+<!--      <el-table-column label="告警值" align="center" prop="num"  />-->
+<!--      <el-table-column label="操作" align="center" prop="alarmTime" width="180">-->
+<!--        <template #default="scope">-->
+<!--          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+<!--    </el-table>-->
+<!--    <pagination-->
+<!--        v-show="total>0"-->
+<!--        :total="total"-->
+<!--        v-model:page="queryParams.pageNum"-->
+<!--        v-model:limit="queryParams.pageSize"-->
+<!--        @pagination="getList"-->
+<!--    />-->
   </div>
 </template>
 
 <script setup name="Record">
 import {getBizType} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
-
+import * as echarts from 'echarts'
 const {proxy} = getCurrentInstance();
 const {alarm_level} = proxy.useDict('alarm_level');
 const {biz_type} = proxy.useDict('biz_type');
@@ -53,14 +55,15 @@ const loading = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
 const title = ref("");
+const chartType = ref();
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
 
 const data = reactive({
   form: {},
   queryParams: {
-    pageNum: 1,
-    pageSize: 10,
+    start: null,
+    end: null
   },
 });
 
@@ -69,19 +72,206 @@ const {queryParams, form, rules} = toRefs(data);
 function handleDetails(row){
   console.log(row,router)
 }
+function initChart(res){
+  const myChart = echarts.init(chartType.value);
+  let colorList = ['#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093','#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093'];
+  var ydata = [];
+  var salvProValue = [];
+  for (const i in res.data) {
+    let obj=res.data[i]
+    ydata.push(obj.bizType);
+    salvProValue.push(obj.num);
+  }
+  let option = {
+    backgroundColor: '#fff',
+    grid: {
+      left: '2%',
+      right: '4%',
+      bottom: '2%',
+      top: '2%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'none'
+      },
+      formatter: '{b}:{c}',
+    },
+    xAxis: {
+      show: false,
+      type: 'value',
+    },
+    yAxis: {
+      type: "category",
+      data: ydata,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        margin: 30,
+        width: 16,
+        align: "left",
+        overflow: "truncate",
+        formatter: function (value, index) {
+          let ind = index + 1;
+          if (ind == ydata.length) {
+            return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
+          } else if (ind + 1 == ydata.length) {
+            return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
+          } else if (ind + 2 == ydata.length) {
+            return (
+                "{three|" + (ydata.length - index) + "} {c|" + value + "}"
+            );
+          }
+          if (ydata.length - index > 9) {
+            return (
+                "{five|" + (ydata.length - index) + "} {d|" + value + "}"
+            );
+          }
+          return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
+        },
+        rich: {
+          a: {
+            color: "#59c9f9",
+          },
+          b: {
+            color: "#59c9f9",
+          },
+          c: {
+            color: "#59c9f9",
+          },
+          d: {
+            color: "#59c9f9",
+          },
+          // 第一名
+          one: {
+            backgroundColor: "#E86452",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 第二名
+          two: {
+            backgroundColor: "#FF9845",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 第三名
+          three: {
+            backgroundColor: "#F6BD16",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 一位数
+          four: {
+            backgroundColor: "rgba(0,0,0,0.15)",
+            color: "white",
+            width: 12,
+            height: 16,
+            padding: [1, 0, 0, 5],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+          // 两位数
+          five: {
+            backgroundColor: "rgba(0,0,0,0.15)",
+            color: "white",
+            width: 16,
+            height: 16,
+            padding: [1, 0, 0, 1],
+            borderRadius: 10,
+            fontSize: 11,
+          },
+        },
+      },
+    },
+    series: [
+      {
+        name: 'value',
+        type: 'bar',
+        zlevel: 1,
+        showBackground: true,
 
+        itemStyle: {
+          normal: {
+            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
+            color: (params) => {
+              return colorList[params.dataIndex]
+            }
+          },
+        },
+        label: {
+          normal: {
+            color: '#000',
+            show: true,
+            position: [0, '-20px'],
+            textStyle: {
+              fontSize: 16,
+            },
+            formatter: '{b}',
+          },
+        },
+        barWidth: 20,
+        data: salvProValue,
+      },
+      {
+        name: '21',
+        type: 'bar',
+        barWidth: 20,
+        barGap: '-100%',
+        data: salvProValue,
+        itemStyle: {
+          normal: {
+            color: '#f5f8ff',
+          },
+          emphasis: {
+            color: '#f5f8ff',
+          },
+        },
+        label: {
+          normal: {
+            color: '#000',
+            show: true,
+            position:'right',
+            distance: 4,
+            textStyle: {
+              fontSize: 16,
+            },
+            formatter: '{c}',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.setOption(option)
+}
 /** 查询告警记录列表 */
 function getList() {
   loading.value = true;
   queryParams.value.params = {};
   if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
-    queryParams.value.params["start"] = daterangeAlarmTime.value[0];
-    queryParams.value.params["end"] = daterangeAlarmTime.value[1];
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
   }
   getBizType(queryParams.value).then(response => {
-    recordList.value = response.rows;
-    total.value = response.total;
     loading.value = false;
+    initChart(response);
   });
 }
 

src/views/alarm/record/index.vue

@@ -3,34 +3,26 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="16">
         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0">
-          <el-form-item label="" prop="objId" style="margin-right:10px">
-            <el-select v-model="queryParams.objId" placeholder="请选择业务类型" style="width: 260px" clearable filterable remote reserve-keyword :remote-method="remoteMethod">
-              <el-option
-                  v-for="dict in objList"
-                  :key="dict.objId"
-                  :label="dict.objName"
-                  :value="dict.objId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="" prop="objMetricsId" style="margin-right:10px">
-            <el-input
-                v-model="queryParams.objMetricsId"
-                placeholder="请输入告警指标"
-                clearable
-                @keyup.enter="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="" prop="alarmLevel" style="margin-right:10px">
-            <el-select v-model="queryParams.alarmLevel" placeholder="请选择告警级别" clearable>
-              <el-option
-                  v-for="dict in alarm_level"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
+<!--          <el-form-item label="" prop="objId" style="margin-right:10px">-->
+<!--            <el-select v-model="queryParams.objId" placeholder="请选择业务类型" style="width: 260px" clearable filterable remote reserve-keyword :remote-method="remoteMethod">-->
+<!--              <el-option-->
+<!--                  v-for="dict in objList"-->
+<!--                  :key="dict.objId"-->
+<!--                  :label="dict.objName"-->
+<!--                  :value="dict.objId"-->
+<!--              ></el-option>-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label="" prop="alarmLevel" style="margin-right:10px">-->
+<!--            <el-select v-model="queryParams.alarmLevel" placeholder="告警级别" clearable style="width:100px;">-->
+<!--              <el-option-->
+<!--                  v-for="dict in alarm_level"-->
+<!--                  :key="dict.value"-->
+<!--                  :label="dict.label"-->
+<!--                  :value="dict.value"-->
+<!--              />-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
           <el-form-item label="" style="width: 308px;margin-right:10px">
             <el-date-picker
                 v-model="daterangeAlarmTime"
@@ -41,14 +33,25 @@
                 end-placeholder="结束日期"
             ></el-date-picker>
           </el-form-item>
-          <el-form-item>
+          <el-form-item style="margin-right:10px">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
       </el-col>
     </el-row>
-
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="10">
+        <el-card>
+          <div ref="alarmLeft" style="height: 190px;"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="14" style="text-align: right">
+        <el-card>
+          <div ref="alarmRight" style="height: 190px;"></div>
+        </el-card>
+      </el-col>
+    </el-row>
     <el-table v-loading="loading" :data="recordList" border>
       <el-table-column label="告警ID" align="left" prop="alarmId" width="80"/>
       <el-table-column label="告警对象" align="left" prop="bizobj.objName"/>
@@ -76,8 +79,9 @@
 </template>
 
 <script setup name="Record">
-import {listRecord} from "@/api/alarm/record";
+import {listRecord,getLevelSort} from "@/api/alarm/record";
 import {listObj} from "@/api/obj/obj.js"
+import * as echarts from 'echarts'
 const {proxy} = getCurrentInstance();
 const {alarm_level} = proxy.useDict('alarm_level');
 
@@ -88,6 +92,8 @@ const total = ref(0);
 const title = ref("");
 const daterangeAlarmTime = ref([]);
 const objList = ref([]);
+const alarmLeft = ref();
+const alarmRight = ref([]);
 
 const data = reactive({
   form: {},
@@ -110,6 +116,230 @@ function remoteMethod(keyword){
   })
 }
 
+function left(){
+  let myChart = echarts.init(alarmLeft.value);
+  getLevelSort(queryParams.value).then(res=>{
+    console.log(res);
+    const d_data = [];
+    for (let i = 0; i < res.data.length; i++) {
+      let d={value:res.data[i].num,name:res.data[i].name}
+      d_data.push(d);
+    }
+    let legend_style = {
+      rich: {
+        a: {
+          fontFamily: 'PingFangSC-Regular, PingFang SC',
+          color: '#4F5860',
+          fontSize: 12
+        },
+        b: {
+          fontFamily: 'Arial Black',
+          color: '#4F5860',
+          fontWeight: 600,
+          fontSize: 12
+        }
+      }
+    };
+    let option = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+      },
+      title: {
+        show: true,
+        text: '告警级别统计',
+        textStyle: {
+          fontFamily: 'PingFangSC-Regular, PingFang SC',
+          align: 'center',
+          color: '#515961',
+          fontSize: 18,
+        },
+      },
+      legend: [{
+        icon: 'circle',
+        zlevel: 1,
+        top: '20%',
+        right: '25%',
+        itemWidth: 20,
+        itemHeight: 20,
+        itemGap: 20,
+        orient: "vertical", // 图例列表的布局朝向。 'horizontal'  'vertical'
+        textStyle: legend_style,
+        data: d_data,
+        formatter: view_legend,
+      }
+      ],
+      series: [{
+        name: '告警数量',
+        type: 'pie',
+        left: '-45%',
+        radius: ['35%', '85%'],
+        // color: color_list,
+        label: {
+          show: false,
+        },
+        data: d_data
+      }]
+    };
+    myChart.setOption(option);
+
+    function view_legend(name) {
+      let x_data;
+      let total = 0;
+      for (let i in d_data) {
+        total += d_data[i].value;
+        if (d_data[i].name == name) {
+          x_data = d_data[i];
+          // console.log(d_data[i])
+        }
+      }
+      let percent = (x_data.value * 100 / total).toFixed(2);
+      return '{a|' + name + '} {b|' + percent + '%}     {c|'+x_data.value+'}次';
+    }
+  })
+
+}
+
+function right(){
+  let myChart = echarts.init(alarmRight.value);
+  var res=[
+    {
+      "scores": [
+        58.0,
+        86.0,
+        59.0,
+        81.0,
+        51.0,
+        73.0,
+        51.0
+      ],
+      "xdata": [
+        "8-27",
+        "8-28",
+        "8-29",
+        "8-30",
+        "8-31",
+        "9-1",
+        "9-2"
+      ]
+    }
+  ];
+  let ss = [];
+  for (let i = 0; i < res.length; i++) {
+    let xx = {
+      name: res[i].modelName,
+      type: 'line',
+      data: res[i].scores,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      stack:'total'
+    }
+    ss.push(xx);
+  }
+  let x_data = res[0].xdata;
+  let option = {
+    backgroundColor: '#FFFFFF',
+    title: {
+      show: true,
+      text: '一周告警趋势',
+      // textStyle: {
+      //   fontFamily: 'PingFangSC-Regular, PingFang SC',
+      //   fontSize: 16,
+      //   fontWeight: 600,
+      //   color: '#848E98'
+      // },
+      left: 'left',
+      // top: '3%'
+    },
+    legend: {
+      icon: 'rect',
+      top: '3%',
+      right: '10%',
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      textStyle: {
+        fontFamily: 'PingFangSC-Regular, PingFang SC',
+        color: '#848E98'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#fff',
+          color: '#556677',
+          borderColor: 'rgba(0,0,0,0)',
+          shadowColor: 'rgba(0,0,0,0)',
+          shadowOffsetY: 0
+        },
+        lineStyle: {
+          width: 0
+        }
+      },
+      backgroundColor: '#fff',
+      textStyle: {
+        color: '#5c6c7c'
+      },
+      padding: [10, 10],
+      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+    },
+    grid: {
+      top: '18%'
+    },
+    xAxis: [{
+      type: 'category',
+      data: x_data,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#000000'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 0,
+        rotate: 0,
+        textStyle: {
+          color: '#B7C3CE'
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 5
+      }
+    }],
+    yAxis: [{
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        fontSize: 12,
+        textStyle: {
+          color: '#B7C3CE'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed"
+        }
+      }
+    }],
+    series: ss
+  };
+  myChart.setOption(option)
+}
+
 /** 查询告警记录列表 */
 function getList() {
   loading.value = true;
@@ -122,6 +352,8 @@ function getList() {
     recordList.value = response.rows;
     total.value = response.total;
     loading.value = false;
+    left();
+    right();
   });
 }
 

src/views/hl/bm/index.vue

@@ -3,11 +3,13 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="12">
         <el-card>
-          <div ref="myChartOne" style="height: 400px;"></div>
+          <div ref="bmLeft" style="height: 300px;"></div>
         </el-card>
       </el-col>
       <el-col :span="12" style="text-align: right">
-        <div style="width: 100%;height: 60px;color: #1f2d3d;border: #c03639"></div>
+        <el-card>
+          <div ref="bmRight" style="height: 300px;"></div>
+        </el-card>
       </el-col>
     </el-row>
     <el-row :gutter="10" class="mb8">
@@ -40,10 +42,10 @@
     </el-row>
 
     <el-table v-loading="loading" :data="bmList" border>
-      <el-table-column label="模型ID" align="center" prop="modelId" width="80"/>
+      <!--      <el-table-column label="模型ID" align="center" prop="modelId" width="80" :hidden="hidden"/>-->
       <el-table-column label="模型名称" align="left" prop="modelName"/>
-      <el-table-column label="昨日健康度" align="center" prop="yesterdayScore" width="180"/>
-      <el-table-column label="最近一次健康度得分" align="center" prop="lastScore" width="180"/>
+      <!--      <el-table-column label="昨日健康度" align="center" prop="yesterdayScore" width="180"/>-->
+      <!--      <el-table-column label="最近一次健康度得分" align="center" prop="lastScore" width="180"/>-->
       <!--      <el-table-column label="更新时间" align="left" prop="updateTime" width="180">-->
       <!--        <template #default="scope">-->
       <!--          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>-->
@@ -86,6 +88,8 @@
 <script setup name="Bm">
 
 import {addBm, delBm, listBm, updateBm} from "@/api/hl/bm";
+import {history} from "@/api/hl/hlScore";
+import {history as dayHistory} from "@/api/hl/hlDay";
 import healthSetting from "./component/healthSetting.vue"
 import historyHealth from "./component/historyHealth.vue"
 import * as echarts from 'echarts'
@@ -105,7 +109,8 @@ const dialogType = ref("add")
 const modelId = ref(0)
 const activeComponent = [healthSetting, historyHealth]
 const currentActive = ref(0)
-const myChartOne=ref(null)
+const bmLeft = ref(null)
+const bmRight = ref(null)
 
 const data = reactive({
   form: {},
@@ -136,30 +141,142 @@ function handleHealthSet(row, type) {
 }
 
 
-function initChart() {
-  const myChart = echarts.init(myChartOne.value);
-  const option = {
-    // ECharts 配置项
+function initChatLeft(res, tag) {
+  let obj = bmLeft;
+  let title = "24小时健康度趋势"
+  if (tag == 'right') {
+    obj = bmRight;
+    title = "最近7天健康度趋势"
+  }
+  const myChart = echarts.init(obj.value);
+  let ss = [];
+  for (let i = 0; i < res.length; i++) {
+    let xx = {
+      name: res[i].modelName,
+      type: 'line',
+      data: res[i].scores,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false
+    }
+    ss.push(xx);
+  }
+  let x_data = res[0].xdata;
+  let option = {
+    backgroundColor: '#FFFFFF',
     title: {
-      text: 'ECharts 示例'
+      show: true,
+      text: title,
+      textStyle: {
+        fontFamily: 'PingFangSC-Regular, PingFang SC',
+        fontSize: 16,
+        fontWeight: 600,
+        color: '#848E98'
+      },
+      left: 'left',
+      top: '3%'
+    },
+    legend: {
+      icon: 'rect',
+      top: '3%',
+      right: '10%',
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      textStyle: {
+        fontFamily: 'PingFangSC-Regular, PingFang SC',
+        color: '#848E98'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#fff',
+          color: '#556677',
+          borderColor: 'rgba(0,0,0,0)',
+          shadowColor: 'rgba(0,0,0,0)',
+          shadowOffsetY: 0
+        },
+        lineStyle: {
+          width: 0
+        }
+      },
+      backgroundColor: '#fff',
+      textStyle: {
+        color: '#5c6c7c'
+      },
+      padding: [10, 10],
+      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
     },
-    tooltip: {},
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+    grid: {
+      top: '18%'
     },
-    yAxis: {},
-    series: [{
-      name: '销量',
-      type: 'bar',
-      data: [5, 20, 36, 10, 10, 20]
-    }]
+    xAxis: [{
+      type: 'category',
+      data: x_data,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#000000'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 0,
+        rotate: 0,
+        textStyle: {
+          color: '#B7C3CE'
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 5
+      }
+    }],
+    yAxis: [{
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        fontSize: 12,
+        textStyle: {
+          color: '#B7C3CE'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed"
+        }
+      }
+    }],
+    series: ss
   };
   myChart.setOption(option)
 }
 
 /** 查询业务模型列表 */
 function getList() {
-  initChart();
+  history().then(response => {
+    proxy.$nextTick(() => {
+      initChatLeft(response, 'left');
+    })
+  });
+
+  dayHistory().then(response => {
+    proxy.$nextTick(() => {
+      initChatLeft(response, 'right');
+    })
+  });
   loading.value = true;
   listBm(queryParams.value).then(response => {
     bmList.value = response.rows;

src/views/index.vue

@@ -1,4 +1,6 @@
 <template>
-  <div class="app-container home">欢迎</div>
+  <div class="app-container home">
+    <img src="@/assets/images/page.png" style="width: 100%;height: 900px;"/>
+  </div>
 </template>