Tony/god-ytr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
zhaofei06 2023-11-09 09:30:02 +08:00
commit b44438a05f
28 changed files with 1304 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
god-ui/src/assets/biaoti.ttf Normal file
View File

Binary file not shown.

10
god-ui/src/router/index.js
View File

@ -76,6 +76,16 @@ export const constantRoutes = [
component: () => import('@/views/bigscreen2/index.vue'),
hidden: true
},
{
path: '/bigscreen3',
component: () => import('@/views/bigscreen3/index.vue'),
hidden: true
},
{
path: '/bigscreen4',
component: () => import('@/views/bigscreen4/index.vue'),
hidden: true
},
{
path: '',
component: Layout,

8
god-ui/src/views/bigscreen2/index.vue
View File

@ -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: '未处理'
},
],

69
god-ui/src/views/bigscreen3/index.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div class="bigscreen3-wrapper bigscreen-main-wrapper">
<div class="header-main-wrapper">
<div class="header-left-part-wrapper">
<BigScreenTime />
</div>
<div class="header-title-wrapper">工业园区安全生产综合服务监测大屏</div>
<div class="header-right-part-wrapper"></div>
</div>
<div class="content-main-wrapper grid-layout">
<div class="content-main-item" style="grid-row: span 4;">
</div>
<div class="content-main-item"></div>
<div class="content-main-item"></div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg">报警中心</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg">能耗比例图</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg">水电能耗统计</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
</div>
<div class="footer-main-wrapper"></div>
</div>
</template>
<script>
import BigScreenTime from '@/utils/bigscreenTool/currentTime.vue'
import {
generateBaseOptions,
generatePieOptions,
initChartStatic
} from '@/utils/bigscreenTool/index.js'
export default {
components: { BigScreenTime },
}
</script>
<style scoped lang="scss">
@import url(../../utils/bigscreenTool/index.scss);
.bigscreen3-wrapper {
width: 100vw;
height: 100vh;
.header-main-wrapper {
}
}
.grid-layout {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 14% 28% 30% 28%;
}
.item-title-bg {
/**标题的背景图 */
}
</style>

BIN
god-ui/src/views/bigscreen4/assets/headerBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
god-ui/src/views/bigscreen4/assets/itemTitle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
god-ui/src/views/bigscreen4/assets/itemTitle1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
god-ui/src/views/bigscreen4/assets/middleItem.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

237
god-ui/src/views/bigscreen4/index.vue Normal file
View File

@ -0,0 +1,237 @@
<template>
<div class="bigscreen4-wrapper bigscreen-main-wrapper">
<div class="header-main-wrapper">
<div class="header-left-part-wrapper">
<BigScreenTime />
</div>
<div class="header-title-wrapper">智慧生活服务保障中心大屏</div>
<div class="header-right-part-wrapper"></div>
</div>
<div class="content-main-wrapper grid-layout">
<div class="content-main-item">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg">
数据统计
</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg">
紧急响应中心
</div>
<div class="bigscreen-item-content middle-item-wrapper">
<div class="middle-item">
<div>预警描述:预警中心的事件情况继续恶化</div>
<div>预警时间:2023-11-08 15:30:00</div>
<div>人员姓名:章燕</div>
<div>地址:金福小区6号楼1单元501</div>
<div>联系电话:13236985689</div>
</div>
<div class="middle-item">
<div>预警描述:保障人员触发了屋内的SOS设备报警</div>
<div>预警时间:2023-11-08 17:26:34</div>
<div>人员姓名:王海武</div>
<div>地址:金福小区12号楼1单元1302</div>
<div>联系电话: 17963040687</div>
</div>
</div>
</div>
</div>
<div class="content-main-item">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg">
预警中心
</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg1">
设备分类
</div>
<div class="bigscreen-item-content" id="deviceTypes">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg1">
健康监测趋势
</div>
<div class="bigscreen-item-content" id="healtyTrend">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg1">
设备实时数据
</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
<div class="content-main-item" style="grid-column: span 2;">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title item-title-bg1">
就诊记录
</div>
<div class="bigscreen-item-content">
</div>
</div>
</div>
</div>
<div class="footer-main-wrapper"></div>
</div>
</template>
<script>
import BigScreenTime from '@/utils/bigscreenTool/currentTime.vue'
import {
generateBaseOptions,
generatePieOptions,
initChartStatic
} from '@/utils/bigscreenTool/index.js'
export default {
components: { BigScreenTime },
mounted() {
this.initChart1();
this.initChart2();
},
methods: {
initChart1() {
initChartStatic('deviceTypes', generatePieOptions({
color: [
'#2352c0',
'#218b92',
'#9c7d2b',
'#6a57a4',
'#577297',
'#9c9071',
'#3380a5'
],
series: [
{
name: "数据详情",
type: "pie",
radius: ["36%", "60%"],
center: ["37%", "50%"],
data: [
{
name: '设备设施报警',
value: 56
},
{
name: '电器仪器报警',
value: 32
},
{
name: '静电报警',
value: 18
},
{
name: '生产现场报警',
value: 47
},
{
name: '人员现场操作报警',
value: 39
},
{
name: '生产工艺异常',
value: 12
},
{
name: '气瓶异常',
value: 11
},
],
}
]
}))
},
initChart2() {
initChartStatic('healtyTrend', generateBaseOptions({
xAxis: {
data: ['罐区', '聚合岗位', '基础科区']
},
series: [
{
name: '进行中',
data: [4, 18, 24],
type: 'bar',
barWidth: 20
},
{
name: '已完成',
data: [12, 21, 12],
type: 'bar',
barWidth: 20
},
{
name: '违规作业',
data: [1, 1, 0],
type: 'bar',
barWidth: 20
},
]
}))
}
}
}
</script>
<style scoped lang="scss">
@import url(../../utils/bigscreenTool/index.scss);
.bigscreen4-wrapper {
width: 100vw;
height: 100vh;
.header-main-wrapper {
background-image: url(./assets/headerBg.png);
}
}
.middle-item-wrapper {
display: flex;
justify-content: space-between;
padding: 10px;
.middle-item {
width: 49%;
background-image: url(./assets/middleItem.png);
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: .8rem;
padding: 20px;
color: #e2e2e2cb;
}
}
/** */
.grid-layout {
grid-template-columns: 2fr 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
.item-title-bg {
/**标题的背景图 */
background-image: url(./assets/itemTitle.png);
}
.item-title-bg1 {
/**标题的背景图 */
background-image: url(./assets/itemTitle1.png);
}
.bigscreen-item-title {
height: 3rem;
line-height: 3rem;
padding-left: 3rem !important;
}
</style>

BIN
god-ui/src/views/home/assets/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
god-ui/src/views/home/assets/icon10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
god-ui/src/views/home/assets/icon11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
god-ui/src/views/home/assets/icon12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
god-ui/src/views/home/assets/icon13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
god-ui/src/views/home/assets/icon14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
god-ui/src/views/home/assets/icon15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
god-ui/src/views/home/assets/icon16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
god-ui/src/views/home/assets/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
god-ui/src/views/home/assets/icon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
god-ui/src/views/home/assets/icon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
god-ui/src/views/home/assets/icon5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
god-ui/src/views/home/assets/icon6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
god-ui/src/views/home/assets/icon7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
god-ui/src/views/home/assets/icon8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
god-ui/src/views/home/assets/icon9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
god-ui/src/views/home/assets/warnIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 B

907
god-ui/src/views/home/index.vue Normal file
View 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
View 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>