no message

src/api/content/insert.js

@@ -1,2 +1,37 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
+// 列表
+export function insetTime(data) {
+  return request({
+    url: `/radio/tContentIntercut/list`,
+    method: "post",
+    data,
+  });
+}
+
+// 详情
+export function detail(query) {
+  return request({
+    url: `/radio/tContentIntercut/queryDetailById`,
+    method: "get",
+    params: query,
+  });
+}
+
+// 提交
+export function submit(data) {
+  return request({
+    url: `/radio/tContentIntercut/saveOrUpdate`,
+    method: "post",
+    data,
+  });
+}
+
+// 删除
+export function removeInsert(query) {
+  return request({
+    url: `/radio/tContentIntercut/deleteById`,
+    method: "get",
+    params: query,
+  });
+}

src/api/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 门店数量 设备数量
+export function devData(data) {
+  return request({
+    url: `/statistic/DeviceRun/data`,
+    method: 'post',
+    data
+  })
+}
+
+// 门店新增趋势
+export function storeLine(data) {
+  return request({
+    url: `/statistic/storeAdd/lineChart`,
+    method: 'post',
+    data
+  })
+}

src/components/GanttChart/index.vue

@@ -28,9 +28,9 @@
           <div :style="{
         display: getDisplay(element), top: getTop(element), left: getLeft(element),
         height: getHeight(element), width: getWidth(element)
-      }" class="grid-item" @mousedown.stop>
-            <el-popover placement="bottom" width="300px" popper-class="popper"
-              :popper-style="popperStyle" :hide-after="0">
+      }" :class="[element.status === 0 ? 'grid-item' : 'grid-item-disabled']" @mousedown.stop>
+            <el-popover placement="bottom" width="300px" popper-class="popper" :popper-style="popperStyle"
+              :hide-after="0">
               <div class="title">
                 <h2>{{ element.name }}</h2>
                 <div style="display:flex; justify-content: space-between;">
@@ -67,6 +67,7 @@
 <script setup>
 import { settimgTime, removeSetting } from '@/api/content/setting'
 import { sceneTime, removeScene } from '@/api/content/scene'
+import { insetTime } from '@/api/content/insert'
 import { useBusinessSelect, useStoreSelect, useDeviceList } from '@/hooks/index'
 
 const { storeData, getStore, storeRemote } = useStoreSelect()
@@ -105,10 +106,14 @@ function getTimeList() {
     sceneTime({ storeId: storeId.value }).then(res => {
       modal(res)
     })
-  } else {
+  } else if (props.type === 'setting') {
     settimgTime({ nowDate: proxy.parseTime(nowDate.value.getTime(), "{y}-{m}-{d}"), storeId: storeId.value }).then(res => {
       modal(res)
     })
+  } else {
+    insetTime({ nowDate: proxy.parseTime(nowDate.value.getTime(), "{y}-{m}-{d}"), storeId: storeId.value }).then(res => {
+      modal(res)
+    })
   }
 }
 
@@ -119,8 +124,8 @@ const modal = (res) => {
     res.data.forEach(i => {
       i.listDate.forEach(j => {
         data.list.push({
-          startTime: props.type === 'setting' ? j.startTime.split(' ')[1] : j.startTime,
-          endTime: props.type === 'setting' ? j.endTime.split(' ')[1] : j.endTime,
+          startTime: props.type === 'scene' ? j.startTime : j.startTime.split(' ')[1],
+          endTime: props.type === 'scene' ? j.endTime : j.endTime.split(' ')[1],
           timeId: j.timeId,
           id: i.id,
           deviceIds: i.deviceIds,
@@ -194,13 +199,20 @@ const getDelete = (row) => {
           getTimeList()
         }
       })
-    } else {
+    } else if (props.type === 'scene') {
       removeScene({ id: row.id }).then(res => {
         if (res.code === 0) {
           proxy.$modal.msgSuccess('删除成功！')
           getTimeList()
         }
       })
+    } else {
+      removeInsert({ id: row.id }).then(res => {
+        if (res.code === 0) {
+          proxy.$modal.msgSuccess('删除成功！')
+          getTimeList()
+        }
+      })
     }
   }).catch(() => { })
 }
@@ -293,17 +305,25 @@ const getLeft = (val) => {
     .label {
       width: 50px;
       height: 100%;
-      border-right: 1px solid #e3e3e3;
       line-height: 60px
     }
 
     .line {
       width: calc(100% - 50px);
-      height: 1px;
-      background-color: #e3e3e3;
+      // height: 60px;
+      border-top-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px;
+      border-bottom-width: 0;
+      border-style: solid;
+      border-color: #e3e3e3;
     }
   }
 
+  .time:nth-child(24) .line {
+    border-bottom-width: 1px;
+  }
+
   .grid {
     position: absolute;
     top: 0;
@@ -315,15 +335,29 @@ const getLeft = (val) => {
     }
 
     .grid-item {
-      background-color: rgb(57 121 249 / 10%);
       position: absolute;
       margin: 0 5px;
+      background-color: rgb(57 121 249 / 10%);
       border-left: 4px solid #3979F9;
       border-radius: 4px;
       overflow: hidden;
       color: #337ecc;
 
-      .info{
+      .info {
+        padding: 10px 0 0 10px;
+      }
+    }
+
+    .grid-item-disabled {
+      position: absolute;
+      margin: 0 5px;
+      background-color: rgb(144 147 153 / 20%);
+      border-left: 4px solid #909399;
+      border-radius: 4px;
+      overflow: hidden;
+      color: #909399;
+
+      .info {
         padding: 10px 0 0 10px;
       }
     }

src/views/content/insert/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='app-container'>
-    <el-form class="form" label-width="auto" ref="form" :model="data.form" :rules="data.rules">
-      <el-form-item class="chooseAudio" label="内容音频：" prop="audioList">
+    <el-form class="form" label-width="100px" ref="form" :model="data.form" :rules="data.rules">
+      <el-form-item class="chooseAudio" label="插播音频：" prop="audioList">
         <div class="audioList" v-for="(item, index) in data.form.audioList" :key="item.id">
           <el-tag v-show="item.type === 0 || item.type === 1" size="large" :closable="checkClose()"
             @close="handleClose(index)">
@@ -14,20 +14,31 @@
         </div>
         <el-button v-if="checkClose()" icon="Plus" @click="getDialog">选择音频</el-button>
       </el-form-item>
-      <el-form-item label="内容设定：" prop="name">
+      <el-form-item class="chooseAudio" label="内容设定：" prop="name">
+        <div class="audioList">
+          <el-tag v-if="data.form.name" size="large" style="height: 50px; line-height: 20px">
+            <div>{{ data.form.name }}</div>
+            <div>{{ data.disabledDate[0] }} - {{ data.disabledDate[1] }}</div>
+          </el-tag>
+        </div>
         <el-button icon="Plus" @click="getContentDialog">选择内容</el-button>
       </el-form-item>
       <el-form-item label="播放时间：" prop="listDate">
         <div class="date" v-for="(item, index) in data.dateList">
           <el-date-picker v-model="data.dateList[index]" type="datetimerange" start-placeholder="开始时间"
             end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
-            @change="handleChangeDate($event, index)" />
+            :disabled-date="getDisabledDate" @change="handleChangeDate($event, index)" />
           <el-link v-show="data.dateList.length > 1" icon="CircleClose" :underline="false"
             @click="handleDeleteDate(index)" />
           <el-link v-show="data.dateList.length - 1 === index" icon="CirclePlus" :underline="false"
             @click="handlePushDate" />
         </div>
       </el-form-item>
+      <el-form-item v-if="data.form.id" label="当前状态：" prop="status">
+        <el-select v-model="data.form.status" placeholder="请选择当前状态">
+          <el-option v-for="item in sys_change_status" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
     </el-form>
     <div class="form-btn">
       <el-button @click="getClose">取消</el-button>
@@ -92,17 +103,21 @@
           <el-input v-model="settingData.form.name" placeholder="请输入内容名称" clearable />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getSearch">搜索</el-button>
+          <el-button type="primary" @click="getSearchContent">搜索</el-button>
         </el-form-item>
       </el-form>
-      <el-table>
-        <el-table-column label="内容ID" align="center"></el-table-column>
-        <el-table-column label="内容名称" align="center"></el-table-column>
-        <el-table-column label="当前状态" align="center"></el-table-column>
-        <el-table-column label="播放时段" align="center"></el-table-column>
-        <el-table-column label="操作" align="center">
+      <el-table :data="settingData.tableData">
+        <el-table-column label="内容ID" prop="id" align="center" width="200" />
+        <el-table-column label="内容名称" prop="name" align="center" width="200" />
+        <el-table-column label="当前状态" prop="status" align="center" width="100" :formatter="statusFormatter" />
+        <el-table-column label="播放时段" align="center">
+          <template #default="scope">
+            {{ scope.row.startTime }} - {{ scope.row.endTime }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="100">
           <template #default="scope">
-            <el-button type="primary" link>选择</el-button>
+            <el-button type="primary" link @click="handleCheckTime(scope.row)">选择</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -111,6 +126,7 @@
 </template>
 
 <script setup>
+import { submit } from '@/api/content/insert'
 import { useAudioList, useAudioClass, useSettingList } from '@/hooks/index'
 
 const { proxy } = getCurrentInstance();
@@ -130,6 +146,8 @@ const data = reactive({
   },
   // 时间段
   dateList: [[]],
+  // 限制时段
+  disabledDate: [],
   // 分页
   radioOptions: [{
     value: 0,
@@ -148,8 +166,14 @@ const data = reactive({
     audioList: [{
       required: true, message: '请选择音频', trigger: 'change'
     }],
+    name: [{
+      required: true, message: '请选择需要插播的内容设定', trigger: 'change'
+    }],
     listDate: [{
       required: true, message: '请选择播放时间', trigger: 'change'
+    }],
+    status: [{
+      required: true, message: '请选择当前状态', trigger: 'change'
     }]
   },
   business_store: []
@@ -244,6 +268,11 @@ const getSearch = () => {
   getAudio()
 }
 
+const getSearchContent = () => {
+  settingData.form.pageNum = 1
+  getSetting()
+}
+
 // 重置
 const getRefresh = () => {
   audioData.form = {
@@ -290,6 +319,15 @@ const handleChooseAudio = (e) => {
   dialogVisible_audio.value = false
 }
 
+// 选择时段
+const handleCheckTime = (e) => {
+  data.form.contentPlayTimeId = e.id
+  data.form.name = e.name
+  data.disabledDate = [e.startTime, e.endTime]
+  proxy.$modal.msgSuccess('选择成功！')
+  dialogVisible_content.value = false
+}
+
 // 确定
 const getPush = () => {
   data.form.audioList = []
@@ -332,25 +370,40 @@ const handleChangeDate = (e, index) => {
     const start = new Date(e[0]).getTime()
     const end = new Date(e[1]).getTime()
 
-    for (let i = 0; i < data.dateList.length; i++) {
-      if (i !== index) {
-        let st = new Date(data.dateList[i][0]).getTime()
-        let en = new Date(data.dateList[i][1]).getTime()
+    let disabledStart = new Date(data.disabledDate[0]).getTime()
+    let disabledEnd = new Date(data.disabledDate[1]).getTime()
+
+    if (start > disabledStart && end < disabledEnd) {
+      for (let i = 0; i < data.dateList.length; i++) {
+        if (i !== index) {
+          let st = new Date(data.dateList[i][0]).getTime()
+          let en = new Date(data.dateList[i][1]).getTime()
 
-        if (start >= st && start <= en || end >= st && end <= en || start <= st && end >= en || end <= st && start >= en) {
-          data.dateList.splice(index, 1)
-          proxy.$modal.msgError("该时间段已设置！")
-          return false
+          if (start >= st && start <= en || end >= st && end <= en || start <= st && end >= en || end <= st && start >= en) {
+            data.dateList[index] = []
+            proxy.$modal.msgError("该时间段已设置！")
+            return false
+          }
         }
+        data.form.listDate.push({
+          startTime: data.dateList[i][0],
+          endTime: data.dateList[i][1]
+        })
       }
-      data.form.listDate.push({
-        startTime: data.dateList[i][0],
-        endTime: data.dateList[i][1]
-      })
+    } else {
+      data.dateList[index] = []
+      proxy.$modal.msgError("请在所选内容设定时间范围内插播")
     }
   }
 }
 
+// 禁选时间
+const getDisabledDate = (e) => {
+  if (data.disabledDate.length > 0) {
+    return e.getTime() < new Date(data.disabledDate[0]).getTime() - 8.64e7 || e.getTime() > new Date(data.disabledDate[1]).getTime()
+  }
+}
+
 // 所属企业
 const index = ref(0)
 const handleChangeTenant = (e, i) => {
@@ -361,7 +414,7 @@ const handleChangeTenant = (e, i) => {
 
 // 取消
 const getClose = () => {
-  proxy.$tab.closeOpenPage('/content/setting')
+  proxy.$tab.closeOpenPage('/content/insert')
 }
 
 // 提交
@@ -472,4 +525,8 @@ watch(() => audioData.form.type, (val) => {
     font-size: 16px;
   }
 }
+
+.date:last-child{
+  margin: 0;
+}
 </style>

src/views/content/insert/index.vue

@@ -45,7 +45,7 @@
       </div>
     </div>
     <div class="right">
-      <gantt-chart path="/content/insert/detail" type="setting" :date="nowDate" />
+      <gantt-chart path="/content/insert/detail" type="insert" :date="nowDate" />
     </div>
   </div>
 </template>
@@ -74,9 +74,6 @@ const data = reactive({
   }, {
     value: 1,
     label: 'ohplay音频'
-  }, {
-    value: 2,
-    label: '场景预设'
   }],
   // 表单
   form: {

src/views/content/scene/detail.vue

@@ -65,6 +65,11 @@
       <el-form-item style="width: 800px">
         <el-button icon="Plus" @click="getAdd">新增关联</el-button>
       </el-form-item>
+      <el-form-item v-if="data.form.id" label="当前状态：" prop="status">
+        <el-select v-model="data.form.status" placeholder="请选择当前状态">
+          <el-option v-for="item in sys_change_status" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
     </el-form>
     <div class="form-btn">
       <el-button @click="getClose">取消</el-button>
@@ -108,7 +113,8 @@ const data = reactive({
   rules: {
     takeId: [{ required: true, message: '请选择预设音频', trigger: 'change' }],
     listDate: [{ type: 'array', required: true, message: '请选择播放时间', trigger: 'change' }],
-    tpresetContentInfoReq: [{ type: 'array', required: true, message: '请新增关联设备', trigger: 'change' }]
+    tpresetContentInfoReq: [{ type: 'array', required: true, message: '请新增关联设备', trigger: 'change' }],
+    status: [{ required: true, message: '请选择当前状态', trigger: 'change' }]
   },
   dialogForm: {
     pageNum: 1,

src/views/content/setting/detail.vue

@@ -75,6 +75,11 @@
       <el-form-item style="width: 800px">
         <el-button icon="Plus" @click="getAdd">新增关联</el-button>
       </el-form-item>
+      <el-form-item v-if="data.form.id" label="当前状态：" prop="status">
+        <el-select v-model="data.form.status" placeholder="请选择当前状态">
+          <el-option v-for="item in sys_change_status" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
     </el-form>
     <div class="form-btn">
       <el-button @click="getClose">取消</el-button>
@@ -186,6 +191,9 @@ const data = reactive({
     }],
     tpresetContentInfoReq: [{
       required: true, message: '请新增关联', trigger: 'change'
+    }],
+    status: [{
+      required: true, message: '请选择当前状态', trigger: 'change'
     }]
   },
   business_store: []
@@ -368,7 +376,7 @@ const handleChangeDate = (e, index) => {
         let en = new Date(data.dateList[i][1]).getTime()
 
         if (start >= st && start <= en || end >= st && end <= en || start <= st && end >= en || end <= st && start >= en) {
-          data.dateList.splice(index, 1)
+          data.dateList[index] = []
           proxy.$modal.msgError("该时间段已设置！")
           return false
         }
@@ -529,4 +537,8 @@ watch(() => audioData.form.type, (val) => {
     font-size: 16px;
   }
 }
+
+.date:last-child{
+  margin: 0;
+}
 </style>

src/views/index.vue

@@ -1,47 +1,341 @@
 <template>
-  <div class="app-container">
-    <el-skeleton class="skeleton" :rows="1" animated>
-      <template #template>
-        <div class="item" style="height: 150px">
-          <el-skeleton-item v-for="item in 5" :key="item" />
+  <div class="app-container" :style="{ 'backgroundColor': loading ? '' : 'rgba(240, 242, 245, 1)' }">
+    <div class="first">
+      <div class="item">
+        <h1>{{ data.info.currentDeviceTotalNum }}</h1>
+        <span>当前设备总数量（台）</span>
+      </div>
+      <div class="item">
+        <h1>{{ data.info.currentStoreTotalNum }}</h1>
+        <span>当前门店总数量（家）</span>
+      </div>
+      <div class="item">
+        <h1>{{ data.info.currentDayStoreTotalNum }}</h1>
+        <span>当日新增门店数量（家）</span>
+      </div>
+      <div class="item">
+        <h1>{{ data.info.lastWeekStoreTotalNum }}</h1>
+        <span>上周新增门店数量（家）</span>
+      </div>
+      <div class="item">
+        <h1>{{ data.info.lastMonthStoreTotalNum }}</h1>
+        <span>上月新增门店数量（家）</span>
+      </div>
+    </div>
+    <div class="second">
+      <div class="left">
+        <span>当前设备在线情况</span>
+        <div id="circle" style="width: 100%; height: calc(100% - 20px)" />
+      </div>
+      <div class="right">
+        <div class="header">
+          <span>门店新增趋势</span>
+          <el-button-group size="small">
+            <el-button v-for="item in data.buttonGroup" :key="item.value"
+              :type="getDisabled(item.value) ? 'primary' : ''" :plain="getDisabled(item.value)"
+              :disabled="getDisabled(item.value)" @click="handleChangeButton(item.value)">{{ item.label }}</el-button>
+          </el-button-group>
         </div>
-        <div class="item" style="height: 320px">
-          <el-skeleton-item style="width: 720px;" />
-          <el-skeleton-item />
-        </div>
-        <div class="item" style="height: calc(100% - 150px - 320px - 40px)">
-          <el-skeleton-item />
-        </div>
-      </template>
-    </el-skeleton>
+        <div id="store" style="width: 100%; height: calc(100% - 20px)" />
+      </div>
+    </div>
+    <div class="third">
+      <span>设备运行统计</span>
+      <div id="dev" style="width: 100%; height: calc(100% - 20px)" />
+    </div>
   </div>
 </template>
 
 <script setup>
+import * as echarts from 'echarts'
+import { devData, storeLine } from '@/api/index'
+const { proxy } = getCurrentInstance()
+
+// 遮罩层
+const loading = ref(false)
+
+const data = reactive({
+  info: {},
+  buttonGroup: [{
+    value: 0,
+    label: '最近一周'
+  }, {
+    value: 1,
+    label: '最近30天'
+  }, {
+    value: 2,
+    label: '最近半年'
+  }, {
+    value: 3,
+    label: '最近1年'
+  }],
+  xAxisOptions: [],
+  yAxisOptions: []
+})
+
+// 最近一周
+const getTime = (e) => {
+  data.xAxisOptions = []
+  let today = new Date()
+  for (let i = 0; i < e; i++) {
+    let date = new Date(today)
+    date.setDate(today.getDate() - i)
+    data.xAxisOptions.unshift(proxy.parseTime(date, '{y}-{m}-{d}'))
+  }
+}
+getTime(7)
+
+// 设备信息
+const getDevData = async () => {
+  loading.value = true
+  await devData({}).then(res => {
+    if (res.code === 0) {
+      data.info = res.data
+      loading.value = false
+    }
+  })
+}
+
+// 门店新增趋势
+const getStoreLine = async (e) => {
+  data.yAxisOptions = []
+  await storeLine({ type: e }).then(res => {
+    if (res.code === 0) {
+      data.xAxisOptions.forEach((i, index) => {
+        data.yAxisOptions[index] = 0
+        res.data.forEach(j => {
+          if (j.day === i) {
+            data.yAxisOptions[index] = j.totalNum
+          }
+        })
+      })
+    }
+  })
+}
+
+// 设备在线情况
+const circleChart = () => {
+  let circle = echarts.init(document.getElementById('circle'))
+  circle.setOption({
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '0%',
+      right: '0%'
+    },
+    series: [{
+      type: 'pie',
+      radius: ['40%', '70%'],
+      center: ['30%', '50%'],
+      itemStyle: {
+        borderRadius: 4,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      color: ['#5470c6', '#ef6665'],
+      label: false,
+      data: [{
+        value: data.info.currentDeviceOnlineNum, name: `在线`
+      }, {
+        value: data.info.currentDeviceOfflineNum, name: `离线`
+      }]
+    }]
+  })
+}
+
+// 门店新增趋势
+const lineChart = () => {
+  let store = echarts.init(document.getElementById('store'))
+  store.setOption({
+    color: '#f55b4f',
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: data.xAxisOptions
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1
+    },
+    grid: {
+      width: '93%',
+      height: '75%',
+      bottom: 30,
+      left: 40,
+    },
+    series: [{
+      type: 'line',
+      stack: 'Total',
+      lineStyle: {
+        color: '#f55b4f'
+      },
+      showSymbol: false,
+      areaStyle: {
+        opacity: 0.5,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: '#f55b4f'
+        },
+        {
+          offset: 1,
+          color: '#FFF'
+        }])
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: data.yAxisOptions
+    }]
+  })
+}
+
+// 设备运行统计
+const devChart = () => {
+  let xAxisData = []
+  let onlineRate = []
+  let onlineNum = []
+  let offlineNum = []
+  data.info.deviceRunList.map(i => {
+    xAxisData.push(i.day)
+    onlineRate.push(i.onlineRate)
+    onlineNum.push(i.onlineNum)
+    offlineNum.push(i.offlineNum)
+  })
+  let dev = echarts.init(document.getElementById('dev'))
+  dev.setOption({
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      top: '0%',
+      right: '0%',
+      data: ['设备在线率', '设备在线数', '设备离线数']
+    },
+    grid: {
+      width: '95%',
+      bottom: 30,
+      left: 40,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: xAxisData
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1
+    },
+    series: [{
+      name: '设备在线率',
+      type: 'line',
+      stack: 'Total',
+      data: onlineRate
+    }, {
+      name: '设备在线数',
+      type: 'line',
+      stack: 'Total',
+      data: onlineNum
+    }, {
+      name: '设备离线数',
+      type: 'line',
+      stack: 'Total',
+      data: offlineNum
+    }]
+  })
+}
 
+const activeButton = ref(0)
+const getDisabled = (e) => {
+  return activeButton.value === e
+}
+// 切换日期
+const handleChangeButton = async (e) => {
+  activeButton.value = e
+  if (e === 0) {
+    getTime(7)
+  } else if (e === 1) {
+    getTime(30)
+  } else if (e === 2) {
+    getTime(182)
+  } else {
+    getTime(365)
+  }
+  await getStoreLine(e)
+
+  lineChart()
+}
+
+onMounted(async () => {
+  await getDevData()
+  await getStoreLine(0)
+  nextTick(() => {
+    circleChart()
+    lineChart()
+    devChart()
+  })
+})
 </script>
 
 <style scoped lang="scss">
 .app-container {
   height: calc(100vh - 84px);
-}
+  background-color: rgba(240, 242, 245, 1);
 
-.skeleton {
-  height: 100%;
+  .first {
+    height: 150px;
+    display: flex;
+    margin-bottom: 20px;
 
-  .item {
+    .item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: #FFF;
+      width: 20%;
+      margin-right: 20px;
+    }
+
+    .item:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .second {
+    height: 240px;
     display: flex;
+    justify-content: space-between;
     margin-bottom: 20px;
-    flex: 1;
 
-    .el-skeleton__item {
-      height: 100%;
+    .left,
+    .right {
+      background-color: #FFF;
+      padding: 15px;
+    }
+
+    .left {
+      min-width: calc(100% / 3);
       margin-right: 20px;
     }
 
-    .el-skeleton__item:last-child{
-      margin: 0;
+    .right {
+      min-width: calc(100% - 100% / 3 - 20px);
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+      }
     }
   }
+
+  .third {
+    height: calc(100% - 240px - 150px - 40px);
+    background-color: #FFF;
+    padding: 20px;
+  }
 }
 </style>