feat: 大屏时间修改&工业园区首页
This commit is contained in:
parent
6abbb4b65f
commit
8bda410da9
BIN
god-ui/src/assets/biaoti.ttf
Normal file
BIN
god-ui/src/assets/biaoti.ttf
Normal file
Binary file not shown.
@ -392,25 +392,25 @@ export default {
|
||||
{
|
||||
icon: '',
|
||||
content: '带压开启反应釜盖',
|
||||
time: '2023/11/10 10:30:23',
|
||||
time: formatter(95785631),
|
||||
status: '未处理'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
content: '贮槽超压使用',
|
||||
time: '2023/11/10 10:30:23',
|
||||
time: formatter(95885631),
|
||||
status: '未处理'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
content: '粉体等投料岗位未戴防尘口罩',
|
||||
time: '2023/11/10 10:30:23',
|
||||
time: formatter(152245263),
|
||||
status: '未处理'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
content: '提取催化剂现场散落较多',
|
||||
time: '2023/11/10 10:30:23',
|
||||
time: formatter(185569545),
|
||||
status: '未处理'
|
||||
},
|
||||
],
|
||||
|
||||
BIN
god-ui/src/views/home/assets/icon1.png
Normal file
BIN
god-ui/src/views/home/assets/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
god-ui/src/views/home/assets/icon10.png
Normal file
BIN
god-ui/src/views/home/assets/icon10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
god-ui/src/views/home/assets/icon11.png
Normal file
BIN
god-ui/src/views/home/assets/icon11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
god-ui/src/views/home/assets/icon12.png
Normal file
BIN
god-ui/src/views/home/assets/icon12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
god-ui/src/views/home/assets/icon13.png
Normal file
BIN
god-ui/src/views/home/assets/icon13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
god-ui/src/views/home/assets/icon14.png
Normal file
BIN
god-ui/src/views/home/assets/icon14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
god-ui/src/views/home/assets/icon15.png
Normal file
BIN
god-ui/src/views/home/assets/icon15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
god-ui/src/views/home/assets/icon16.png
Normal file
BIN
god-ui/src/views/home/assets/icon16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
god-ui/src/views/home/assets/icon2.png
Normal file
BIN
god-ui/src/views/home/assets/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
god-ui/src/views/home/assets/icon3.png
Normal file
BIN
god-ui/src/views/home/assets/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
god-ui/src/views/home/assets/icon4.png
Normal file
BIN
god-ui/src/views/home/assets/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
god-ui/src/views/home/assets/icon5.png
Normal file
BIN
god-ui/src/views/home/assets/icon5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
god-ui/src/views/home/assets/icon6.png
Normal file
BIN
god-ui/src/views/home/assets/icon6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
god-ui/src/views/home/assets/icon7.png
Normal file
BIN
god-ui/src/views/home/assets/icon7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
god-ui/src/views/home/assets/icon8.png
Normal file
BIN
god-ui/src/views/home/assets/icon8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
god-ui/src/views/home/assets/icon9.png
Normal file
BIN
god-ui/src/views/home/assets/icon9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
god-ui/src/views/home/assets/warnIcon.png
Normal file
BIN
god-ui/src/views/home/assets/warnIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
907
god-ui/src/views/home/index.vue
Normal file
907
god-ui/src/views/home/index.vue
Normal file
@ -0,0 +1,907 @@
|
||||
<!--工业园区首页-->
|
||||
<template>
|
||||
<div class="ins-area-home-wrapper">
|
||||
<div class="top-btns-wrapper">
|
||||
<div
|
||||
:class="['top-btns-item', tab === '1' ? 'btn-active' : '']"
|
||||
@click="tab = '1'"
|
||||
>智慧家居设备</div>
|
||||
<div
|
||||
:class="['top-btns-item', tab === '2' ? 'btn-active' : '']"
|
||||
@click="tab = '2'"
|
||||
>智慧健康</div>
|
||||
<div
|
||||
:class="['top-btns-item', tab === '3' ? 'btn-active' : '']"
|
||||
@click="tab = '3'"
|
||||
>社区卫生院</div>
|
||||
</div>
|
||||
<div
|
||||
class="panel-1"
|
||||
v-show="tab === '1'"
|
||||
>
|
||||
<div
|
||||
class="top-cards-wrapper"
|
||||
style="grid-template-columns: repeat(5, 1fr);"
|
||||
>
|
||||
<div class="top-cards-item icon1" style="background-color: #07b5d5;">
|
||||
<div class="top-cards-title">智能门锁</div>
|
||||
<div class="top-cards-value">95</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>关闭</span>
|
||||
<span>46</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>打开</span>
|
||||
<span>49</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon2" style="background-color: #3550a6;">
|
||||
<div class="top-cards-title">智能照明</div>
|
||||
<div class="top-cards-value">231</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>灯亮</span>
|
||||
<span>19</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>灯灭</span>
|
||||
<span>212</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon3" style="background-color: #60b3ae;">
|
||||
<div class="top-cards-title">智能烟感报警器</div>
|
||||
<div class="top-cards-value">128</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>正常运行</span>
|
||||
<span>127</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>警报</span>
|
||||
<span>1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon4" style="background-color: #5572e6;">
|
||||
<div class="top-cards-title">智能监控摄像头</div>
|
||||
<div class="top-cards-value">123</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>正常运行</span>
|
||||
<span>120</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>故障</span>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon5" style="background-color: #32629e;">
|
||||
<div class="top-cards-title">智能语音助手</div>
|
||||
<div class="top-cards-value">96</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>正常呼叫</span>
|
||||
<span>96</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>故障</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ins-area-home-card-wrapper">
|
||||
<div class="ins-area-home-card-item">
|
||||
<div class="ins-area-home-card-title">设备类型分布</div>
|
||||
<div class="ins-area-home-card-content" style="height: 260px;" id="chart1"></div>
|
||||
</div>
|
||||
<div class="ins-area-home-card-item">
|
||||
<div class="ins-area-home-card-title">报警事件</div>
|
||||
<div
|
||||
class="ins-area-home-card-content"
|
||||
style="height: 260px;padding: 20px;"
|
||||
>
|
||||
<div class="warn-info-item" v-for="item in warnList">
|
||||
<i class="warn-icon"></i>
|
||||
<div class="warn-info-info">{{ item.info }}</div>
|
||||
<div class="warn-info-time">{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ins-area-home-card-item"
|
||||
style="grid-column: span 2;"
|
||||
>
|
||||
<div class="ins-area-home-card-title">维修工单</div>
|
||||
<div class="ins-area-home-card-content">
|
||||
<simple-table
|
||||
:columns="columns1"
|
||||
:data="data1"
|
||||
></simple-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="panel-2"
|
||||
v-show="tab === '2'"
|
||||
>
|
||||
<div
|
||||
class="top-cards-wrapper"
|
||||
style="grid-template-columns: repeat(6, 1fr);"
|
||||
>
|
||||
<div class="top-cards-item icon6" style="background-color: #07b5d5;">
|
||||
<div class="top-cards-title">智能手环</div>
|
||||
<div class="top-cards-value">218</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>已佩戴</span>
|
||||
<span>95</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>库存</span>
|
||||
<span>123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon7" style="background-color: #3550a6;">
|
||||
<div class="top-cards-title">智能检测</div>
|
||||
<div class="top-cards-value">192</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>智能血糖仪</span>
|
||||
<span>52</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>智能血压仪</span>
|
||||
<span>40</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>智能体温计</span>
|
||||
<span>100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon8" style="background-color: #60b3ae;">
|
||||
<div class="top-cards-title">智能手表</div>
|
||||
<div class="top-cards-value">218</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>已佩戴</span>
|
||||
<span>95</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>库存</span>
|
||||
<span>123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon9" style="background-color: #5572e6;">
|
||||
<div class="top-cards-title">智能心电图仪</div>
|
||||
<div class="top-cards-value">92</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>配置到床位</span>
|
||||
<span>46</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>正在运行</span>
|
||||
<span>42</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>关闭</span>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon10" style="background-color: #32629e;">
|
||||
<div class="top-cards-title">智能床垫</div>
|
||||
<div class="top-cards-value">216</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>配置</span>
|
||||
<span>108床</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>已使用</span>
|
||||
<span>96床</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>空闲</span>
|
||||
<span>12床</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon11" style="background-color: #60b3ae;">
|
||||
<div class="top-cards-title">智能康复训练器</div>
|
||||
<div class="top-cards-value">65</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>肌肉运动康复</span>
|
||||
<span>32</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>红外理疗康复</span>
|
||||
<span>18</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>智能按摩理疗</span>
|
||||
<span>15</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ins-area-home-card-wrapper">
|
||||
<div class="ins-area-home-card-item">
|
||||
<div class="ins-area-home-card-title">设备运行状态</div>
|
||||
<div class="ins-area-home-card-content">
|
||||
<simple-table
|
||||
:columns="columns2"
|
||||
:data="data2"
|
||||
></simple-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ins-area-home-card-item">
|
||||
<div class="ins-area-home-card-title">预警信息</div>
|
||||
<div class="ins-area-home-card-content" style="padding: 20px;">
|
||||
<div class="warn-info-item" v-for="item in warnList2">
|
||||
<i class="warn-icon"></i>
|
||||
<div class="warn-info-info">{{ item.info }}</div>
|
||||
<div class="warn-info-time">{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="panel-3"
|
||||
v-show="tab === '3'"
|
||||
>
|
||||
<div
|
||||
class="top-cards-wrapper"
|
||||
style="grid-template-columns: repeat(5, 1fr);"
|
||||
>
|
||||
<div class="top-cards-item icon12" style="background-color: #07b5d5;">
|
||||
<div class="top-cards-title">今日就诊</div>
|
||||
<div class="top-cards-value">32</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>就诊结束</span>
|
||||
<span>24</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>待就诊</span>
|
||||
<span>8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon13" style="background-color: #3550a6;">
|
||||
<div class="top-cards-title">今日床位</div>
|
||||
<div class="top-cards-value">20</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>已使用</span>
|
||||
<span>12</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>空闲</span>
|
||||
<span>8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon14" style="background-color: #60b3ae;">
|
||||
<div class="top-cards-title">社区人员</div>
|
||||
<div class="top-cards-value">72</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>医生</span>
|
||||
<span>24</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>社区护工</span>
|
||||
<span>48</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon15" style="background-color: #5572e6;">
|
||||
<div class="top-cards-title">今日医生</div>
|
||||
<div class="top-cards-value">8</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>外科</span>
|
||||
<span>4</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>内科</span>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cards-item icon16" style="background-color: #32629e;">
|
||||
<div class="top-cards-title">值班护士</div>
|
||||
<div class="top-cards-value">4</div>
|
||||
<div class="top-cards-grid">
|
||||
<div class="top-cards-item-inner">
|
||||
<span>李纯</span>
|
||||
<span style="top: 0;">胡甜甜</span>
|
||||
</div>
|
||||
<div class="top-cards-item-inner">
|
||||
<span>陈玲</span>
|
||||
<span style="top: 0;">黄宵云</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ins-area-home-card-wrapper">
|
||||
<div class="ins-area-home-card-item">
|
||||
<div class="ins-area-home-card-title">就诊记录</div>
|
||||
<div class="ins-area-home-card-content">
|
||||
<simple-table
|
||||
:columns="columns3"
|
||||
:data="data3"
|
||||
></simple-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ins-area-home-card-item">
|
||||
<div class="ins-area-home-card-title">用药记录</div>
|
||||
<div class="ins-area-home-card-content">
|
||||
<simple-table
|
||||
:columns="columns4"
|
||||
:data="data4"
|
||||
></simple-table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ins-area-home-card-item"
|
||||
style="grid-column: span 2;"
|
||||
>
|
||||
<div class="ins-area-home-card-title">就诊记录</div>
|
||||
<div class="ins-area-home-card-content">
|
||||
<simple-table
|
||||
:columns="columns5"
|
||||
:data="data5"
|
||||
></simple-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SimpleTable from './simpleTable.vue'
|
||||
import {
|
||||
generatePieOptions,
|
||||
initChartStatic
|
||||
} from '@/utils/bigscreenTool/index.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SimpleTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tab: '1',
|
||||
warnList: [
|
||||
{
|
||||
info: '老年生活区，CS90801烟感设备报警，疑似有人点火或者吸烟',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
info: '奉贤餐厅东南角，CAM100601摄像头报警，识别有肢体碰撞行为，请及时处理',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
info: '809房间，门锁警报: 密码超过三次输入错误，锁定15分钟，请查看是否是陌生人闯入',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
info: '703房间，门锁警报: 密码超过三次输入错误，锁定15分钟，请查看是否是陌生人闯入',
|
||||
time: ''
|
||||
},
|
||||
],
|
||||
warnList2: [
|
||||
{
|
||||
info: '老年生活区，CS90801烟感设备报警，疑似有人点火或者吸烟',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
info: '奉贤餐厅东南角，CAM100601摄像头报警，识别有肢体碰撞行为，请及时处理',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
info: '809房间，门锁警报: 密码超过三次输入错误，锁定15分钟，请查看是否是陌生人闯入',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
info: '703房间，门锁警报: 密码超过三次输入错误，锁定15分钟，请查看是否是陌生人闯入',
|
||||
time: ''
|
||||
},
|
||||
],
|
||||
columns1: [
|
||||
{
|
||||
key: 'staff',
|
||||
label: '维修事项',
|
||||
width: '40%'
|
||||
},
|
||||
{
|
||||
key: 'progress',
|
||||
label: '维修进度',
|
||||
width: '30%'
|
||||
},
|
||||
{
|
||||
key: 'time',
|
||||
label: '故障时间',
|
||||
width: '30%'
|
||||
},
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
staff: '棋盘室摄像头开机故障，电源线完好，没有破损现象。',
|
||||
progress: '已申报客服，待维修师傅上门验修',
|
||||
time: '2023/11/19 13:21:19'
|
||||
},
|
||||
{
|
||||
staff: '棋盘室摄像头开机故障，电源线完好，没有破损现象。',
|
||||
progress: '已申报客服，待维修师傅上门验修',
|
||||
time: ''
|
||||
},
|
||||
{
|
||||
staff: '1021房问，智能照明灯，智能按键失效，只能物理开发灯。',
|
||||
progress: '',
|
||||
time: ''
|
||||
},
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
key: 'name',
|
||||
label: '设备名称',
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '设备类型',
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '状态',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'power',
|
||||
label: '电量',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'data',
|
||||
label: '健康监测数据',
|
||||
width: '40%'
|
||||
},
|
||||
],
|
||||
data2: [
|
||||
{
|
||||
name: 'HWSH0810',
|
||||
type: '智能手环',
|
||||
status: '正常',
|
||||
power: '47％',
|
||||
data: '步数: 986,心率74/分'
|
||||
},
|
||||
{
|
||||
name: 'CD091001',
|
||||
type: '智能床垫',
|
||||
status: '正常',
|
||||
power: '87％',
|
||||
data: '体重: 56kg,深度睡眠2h'
|
||||
},
|
||||
{
|
||||
name: 'KE-2938m',
|
||||
type: '智能手表',
|
||||
status: '正常',
|
||||
power: '68％',
|
||||
data: '体温等等数据'
|
||||
},
|
||||
{
|
||||
name: 'DI938103',
|
||||
type: '智能血压仪',
|
||||
status: '正常',
|
||||
power: '92％',
|
||||
data: '血压'
|
||||
},
|
||||
],
|
||||
columns3: [
|
||||
{
|
||||
key: 'num',
|
||||
label: '序号',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'custom',
|
||||
label: '患者',
|
||||
width: '20%'
|
||||
},
|
||||
{
|
||||
key: 'doctor',
|
||||
label: '医生',
|
||||
width: '30%'
|
||||
},
|
||||
{
|
||||
key: 'time',
|
||||
label: '时间',
|
||||
width: '40%'
|
||||
},
|
||||
],
|
||||
data3: [
|
||||
{
|
||||
num: '1',
|
||||
custom: '',
|
||||
doctor: '',
|
||||
time: ''
|
||||
},
|
||||
],
|
||||
columns4: [
|
||||
{
|
||||
key: 'name',
|
||||
label: '设备名称',
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '设备类型',
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '状态',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'power',
|
||||
label: '电量',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'data',
|
||||
label: '健康监测数据',
|
||||
width: '40%'
|
||||
},
|
||||
],
|
||||
data4: [
|
||||
{
|
||||
name: 'HWSH0810',
|
||||
type: '智能手环',
|
||||
status: '正常',
|
||||
power: '47％',
|
||||
data: '步数: 986,心率74/分'
|
||||
},
|
||||
{
|
||||
name: 'CD091001',
|
||||
type: '智能床垫',
|
||||
status: '正常',
|
||||
power: '87％',
|
||||
data: '体重: 56kg,深度睡眠2h'
|
||||
},
|
||||
{
|
||||
name: 'KE-2938m',
|
||||
type: '智能手表',
|
||||
status: '正常',
|
||||
power: '68％',
|
||||
data: '体温等等数据'
|
||||
},
|
||||
{
|
||||
name: 'DI938103',
|
||||
type: '智能血压仪',
|
||||
status: '正常',
|
||||
power: '92％',
|
||||
data: '血压'
|
||||
},
|
||||
],
|
||||
columns5: [
|
||||
{
|
||||
key: 'name',
|
||||
label: '设备名称',
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '设备类型',
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '状态',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'power',
|
||||
label: '电量',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
key: 'data',
|
||||
label: '健康监测数据',
|
||||
width: '40%'
|
||||
},
|
||||
],
|
||||
data5: [
|
||||
{
|
||||
name: 'HWSH0810',
|
||||
type: '智能手环',
|
||||
status: '正常',
|
||||
power: '47％',
|
||||
data: '步数: 986,心率74/分'
|
||||
},
|
||||
{
|
||||
name: 'CD091001',
|
||||
type: '智能床垫',
|
||||
status: '正常',
|
||||
power: '87％',
|
||||
data: '体重: 56kg,深度睡眠2h'
|
||||
},
|
||||
{
|
||||
name: 'KE-2938m',
|
||||
type: '智能手表',
|
||||
status: '正常',
|
||||
power: '68％',
|
||||
data: '体温等等数据'
|
||||
},
|
||||
{
|
||||
name: 'DI938103',
|
||||
type: '智能血压仪',
|
||||
status: '正常',
|
||||
power: '92％',
|
||||
data: '血压'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
initChartStatic('chart1', generatePieOptions({
|
||||
color: [
|
||||
'#2352c0',
|
||||
'#218b92',
|
||||
'#9c7d2b',
|
||||
'#6a57a4',
|
||||
'#577297',
|
||||
'#9c9071',
|
||||
'#3380a5'
|
||||
],
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "vertical",
|
||||
right: 50,
|
||||
itemGap: 10,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#252525'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "数据详情",
|
||||
type: "pie",
|
||||
radius: ["36%", "60%"],
|
||||
center: ["37%", "50%"],
|
||||
data: [
|
||||
{
|
||||
name: '智能门锁',
|
||||
value: 27
|
||||
},
|
||||
{
|
||||
name: '智能熙明',
|
||||
value: 72
|
||||
},
|
||||
{
|
||||
name: '智能烟感报警器',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
name: '智能监控摄像头',
|
||||
value: 35
|
||||
},
|
||||
{
|
||||
name: '智能语音助手',
|
||||
value: 27
|
||||
},
|
||||
],
|
||||
label: {
|
||||
formatter: "{c|{c}} , {per|{d}%}",
|
||||
rich: {
|
||||
c: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
per: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
font-family: 'BIAOTI';
|
||||
src: url(../../assets/biaoti.ttf);
|
||||
}
|
||||
.ins-area-home-wrapper {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background-color: #f0f0f0;
|
||||
.top-btns-wrapper {
|
||||
border-radius: 6px;
|
||||
padding: 4px 3px;
|
||||
background-color: white;
|
||||
box-shadow: 2px 2px 6px #00000057;
|
||||
display: flex;
|
||||
.top-btns-item {
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
line-height: 34px;
|
||||
height: 34px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out .2s;
|
||||
color: #252525;
|
||||
}
|
||||
.btn-active {
|
||||
background-color: #5572e6;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**顶部卡片 */
|
||||
.top-cards-wrapper {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
.top-cards-item {
|
||||
padding: 20px 10%;
|
||||
box-shadow: 2px 2px 6px #00000057;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 105% -30%;
|
||||
background-size: auto 70%;
|
||||
.top-cards-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.top-cards-value {
|
||||
font-size: 1.8rem;
|
||||
font-family: 'BIAOTI';
|
||||
}
|
||||
.top-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3px 10px;
|
||||
.top-cards-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4%;
|
||||
height: 2rem;
|
||||
font-size: .9rem;
|
||||
span:nth-child(2) {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**卡片内容 */
|
||||
.ins-area-home-card-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
.ins-area-home-card-item {
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 6px #00000057;
|
||||
padding: 14px;
|
||||
background-color: white;
|
||||
.ins-area-home-card-title {
|
||||
color: #0000008a;
|
||||
padding-left: 12px;
|
||||
font-family: 'BIAOTI';
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.ins-area-home-card-content {
|
||||
color: black;
|
||||
.warn-info-item {
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(to right, #ffe7e7, #ffe7e74b);
|
||||
.warn-icon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
background-image: url(./assets/warnIcon.png);
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.warn-info-info {
|
||||
width: calc(100% - 100px);
|
||||
padding: 0 8px;
|
||||
}
|
||||
.warn-info-time {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
background-image: url(./assets/icon1.png);
|
||||
}
|
||||
.icon2 {
|
||||
background-image: url(./assets/icon2.png);
|
||||
}
|
||||
.icon3 {
|
||||
background-image: url(./assets/icon3.png);
|
||||
}
|
||||
.icon4 {
|
||||
background-image: url(./assets/icon4.png);
|
||||
}
|
||||
.icon5 {
|
||||
background-image: url(./assets/icon5.png);
|
||||
}
|
||||
|
||||
.icon6 {
|
||||
background-image: url(./assets/icon6.png);
|
||||
}
|
||||
.icon7 {
|
||||
background-image: url(./assets/icon7.png);
|
||||
}
|
||||
.icon8 {
|
||||
background-image: url(./assets/icon8.png);
|
||||
}
|
||||
.icon9 {
|
||||
background-image: url(./assets/icon9.png);
|
||||
}
|
||||
.icon10 {
|
||||
background-image: url(./assets/icon10.png);
|
||||
}
|
||||
.icon11 {
|
||||
background-image: url(./assets/icon11.png);
|
||||
}
|
||||
|
||||
.icon12 {
|
||||
background-image: url(./assets/icon12.png);
|
||||
}
|
||||
.icon13 {
|
||||
background-image: url(./assets/icon13.png);
|
||||
}
|
||||
.icon14 {
|
||||
background-image: url(./assets/icon14.png);
|
||||
}
|
||||
.icon15 {
|
||||
background-image: url(./assets/icon15.png);
|
||||
}
|
||||
.icon16 {
|
||||
background-image: url(./assets/icon16.png);
|
||||
}
|
||||
</style>
|
||||
77
god-ui/src/views/home/simpleTable.vue
Normal file
77
god-ui/src/views/home/simpleTable.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="main-page-table-wrapper">
|
||||
<div class="main-page-table-header-wrapper">
|
||||
<div
|
||||
class="main-page-table-header-cell"
|
||||
v-for="column in columns"
|
||||
:style="`width: ${column.width};`"
|
||||
>{{ column.label }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="main-page-table-row-wrapper"
|
||||
v-for="(item, index) in data"
|
||||
>
|
||||
<div
|
||||
class="main-page-table-row-cell"
|
||||
v-for="column in columns"
|
||||
:style="`width: ${column.width};`"
|
||||
>
|
||||
<slot :name="column.key" :data="item" :column="column">
|
||||
{{ item[column.key] }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SimpleTable',
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.main-page-table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
color: #ffffffd3;
|
||||
padding: 0 3px 10px 3px;
|
||||
overflow: auto;
|
||||
.main-page-table-header-wrapper {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
color: #252525;
|
||||
background-color: #ebedf7;
|
||||
margin: 8px 0;
|
||||
.main-page-table-header-cell {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.main-page-table-row-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
font-size: .9rem;
|
||||
color: #252525D0;
|
||||
margin-bottom: 8px;
|
||||
background-color: #f7f8fd;
|
||||
.main-page-table-row-cell {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-page-table-wrapper::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user