<template>
|
<div class="divice" :class="{blink:isbaioji}" :style="{borderColor: background}" >
|
<div v-if="deviceData.患者姓名 !== ''&&!xiaoduzhuangti" style="height: 100%;" >
|
<el-row v-if="deviceData.患者姓名 !== ''" @click='showgaojing' :style="{backgroundColor: background}" :class="{blink2:isbaioji}" style="font-weight: 900;color: #FFFFFF; width: 100%; height: 20%; line-height: 100%;padding: 5px;position: relative; ">
|
<span class="grid-container" style="font-size: 300%; height: 100%;" v-if="deviceData.设备名称!==null">{{deviceData.设备名称}} </span>
|
<span class="grid-container" style="margin-left: 5%;font-size: 350%; height: 100%;">{{deviceData.患者姓名}} </span>
|
|
<span class="grid-container" v-if="deviceData.年龄!==null" style="margin-left: 5%;font-size: 300%; height: 100%;">{{deviceData.年龄}}岁</span>
|
<span class="grid-container" style="margin-left: 5%;font-size: 300%; height: 100%;">{{deviceData.性别}}</span>
|
<div style="position: absolute;top: 0;right: 0;display: grid;padding: 5px; font-size: 300%;" >
|
<span v-if="deviceData.iot_跨膜压>=200&&Number(deviceData.透析状态)===2" style="color: #303133;">
|
TMP↑
|
</span>
|
<span v-if="deviceData.iot_跨膜压<0&&Number(deviceData.透析状态)===2" style="color: #303133;">
|
TMP↓
|
</span>
|
<span v-if="deviceData.监测血压是否低于百分之30&&Number(deviceData.透析状态)===2" style="color: #303133;">
|
BP↓
|
</span>
|
<span v-if="deviceData.监测血压是否高于百分之30&&Number(deviceData.透析状态)===2" style="color: #303133;">
|
BP↑
|
</span>
|
|
</div>
|
|
</el-row>
|
<el-row v-if="deviceData.患者姓名!==''" :style="{backgroundColor: textcolor}" style="padding-right:2px;height: 70%;">
|
<el-col :span="12" style="height: 100%;">
|
<div style="height:100%;">
|
<el-row style="padding:10% 0px 0px 20px; height: 100%;">
|
<el-col :span="10" style="height: 100%;">
|
<div :style="{backgroundImage:`url(${deviceData.患者头像})`}" style="background-size:100% 100%;border-radius: 5px; margin-top: 10%;margin-bottom: 1%; height: 80%; width: 100%;"></div>
|
</el-col>
|
<el-col :span="14" style="padding-left: 5px; height: 100%; font-weight: 700;font-size: 300%;" >
|
<el-row style="height: 25%; ">
|
<el-col class="grid-container" style="height: 100%;" :span="12" :style="{color:deviceData.透析方案==='HDF'?'#E6A23C':''}">
|
{{deviceData.透析方案}}
|
</el-col>
|
<el-col :span="12" class="grid-container" style="text-align: right;font-weight: 800; color: #70A3DD;white-space: nowrap;height: 100%;">
|
{{txztText}}
|
</el-col>
|
</el-row>
|
<div style="height: 25%;">
|
<template v-if="Number(deviceData.透析状态)>=2">
|
<div class="grid-container" style="height: 100%;">
|
<div>
|
<span v-if="deviceData.iot_静脉压" style="color: #409EFF;">{{deviceData.iot_静脉压}}/</span><span v-if="deviceData.iot_跨膜压" :style="{color:deviceData.iot_跨膜压>200?'red':''}">{{deviceData.iot_跨膜压}}</span>
|
</div>
|
</div>
|
</template>
|
</div>
|
<div style="height: 15%;" >
|
<span v-if="Number(deviceData.透析状态)>=2">
|
|
<span style="color:#303133;">{{Number(deviceData.iot_当前脱水量).toFixed(1)}}</span>/<span style="font-size: 90%">{{Number(deviceData.iot_脱水目标量).toFixed(1)}}</span><span style="font-size: 80%">({{deviceData.iot_脱水速率}})</span>
|
</span>
|
<span v-if="Number(deviceData.透析状态)==1">
|
<span style="color:#303133;">{{Number(deviceData.iot_当前脱水量).toFixed(1)}}</span>/<span style="font-size: 90%">{{Number(deviceData.处方脱水量).toFixed(1)}}</span>
|
</span>
|
</div>
|
<div style="height: 10%;">
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
|
</div>
|
<div style="height: 25%;">
|
<span v-if="Number(deviceData.透析状态)>=1">
|
<span style="color: #303133;">{{jgTime4(deviceData.iot_透析时间)}}</span>/<span style="color: #606266;">{{deviceData.透析处方的时长_小时}}:{{deviceData.透析处方的时长_分钟}}</span>
|
</span>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div v-if="Number(deviceData.透析状态)>1" :ref="'echartsDiv'+device.设备编号" style="height: 97%;">
|
</div>
|
<div v-if="Number(deviceData.透析状态)===1" style="text-align: right;height: 100%;">
|
<div class="container" style="height: 25%;font-weight: 600;color: #909399; font-size: 80%; ">
|
CW:<span style="font-weight: 800; font-size: 130%; color: #303133;white-space: nowrap;">{{Number(deviceData.透前称重).toFixed(1)}}</span>
|
</div>
|
<div class="container" style="height: 25%;font-weight: 600;color: #909399; font-size: 80%; ">
|
D<span style="font-weight: 800; font-size: 130%; color: #303133;white-space: nowrap;">{{Number(deviceData.干体重).toFixed(1)}}</span>L<span style="font-weight: 800; font-size: 130%; color: #303133;white-space: nowrap;">{{Number(deviceData.上次透后称重)}}</span>
|
</div>
|
<div :style="{color:deviceData.体重增长率>=5?'red':'#303133'}" style="height: 25%;font-weight: 600; font-size: 80%;">
|
<span style="font-weight: 800; font-size: 130%; white-space: nowrap;">
|
<template v-if="Number(deviceData.透前称重-deviceData.干体重)>0">+</template>{{Number(deviceData.透前称重-deviceData.干体重).toFixed(1)}}
|
</span>
|
<span>({{deviceData.体重增长率}}%)</span>
|
</div>
|
<div class="container" style="font-weight: 600;height: 25%;color: #909399; font-size: 80%;margin-left: -20px;">
|
<span v-if="deviceData.透前血压_伸缩压" :style="{color:tqXygj?'red':'#303133'}" style="font-weight: 800; font-size: 130%;white-space: nowrap;">{{deviceData.透前血压_伸缩压}}/</span>
|
<span :style="{color:tqXygj?'red':'#303133'}" style="font-weight: 800; font-size: 130%;white-space: nowrap;">{{deviceData.透前血压_舒张压}}</span>
|
<span v-if="deviceData.透前脉搏" :style="{color:tqMbgj?'red':'#303133'}" style="font-weight: 800; font-size: 130%;white-space: nowrap;">,{{deviceData.透前脉搏}}</span>
|
</div>
|
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-else style="height: 100%; border: #409EFF 1px solid;" :class="{blink2:noBaoji!==''}">
|
<el-row style="font-weight: 900;font-size: 300%; color: #3b3737; width: 100%; height: 20%; border: #3b3737 1px solid;">
|
<el-row v-if="noBaoji===''" :style="{backgroundColor:zhuangtaiColor}" style="color: #FFFFFF;width: 100%; height: 100%;white-space: nowrap;overflow: hidden;">
|
<div class="grid-container" style="height: 100%;">
|
{{deviceData.设备名称}} {{zhuangtaiStr}}
|
</div>
|
|
</el-row>
|
|
<el-row v-else style="width: 100%;">
|
<el-col :span="24" style="color: #FFFFFF;width: 100%;white-space: nowrap;overflow: hidden;">
|
{{deviceData.设备名称}} {{noBaoji}}
|
</el-col>
|
</el-row>
|
|
|
</el-row>
|
<el-row style="padding-right:2px;height: 80%; background-color: #FFFFFF">
|
<el-col :span="15" style="height: 100%;">
|
<div style="height:100%;">
|
<el-row style="padding:0px 0px 0px 0px; height: 100%;">
|
<el-col :span="10" :style="{backgroundImage:`url(${TQS88})`}" style="background-size:100% 100%;border-radius: 5px; margin-top: 2%;margin-bottom: 1%;">
|
|
</el-col>
|
<el-col v-if="noBaoji!==''" :span="14" style="padding-left: 5px; height: 100%; font-weight: 500;font-size:100%" >
|
<div class="grid-container" style="height: 33%; line-height: 100%;color: red; ">
|
|
<div class="centered-text">温度：{{wd}}</div>
|
</div>
|
|
<div class="grid-container" style="height: 33%;color: #409EFF;" >
|
|
<div class="centered-text">流速：{{ls}}</div>
|
</div>
|
<div class="grid-container" style="height: 33%;color: #E6A23C;">
|
|
<div class="centered-text">Cond:{{ddd}}</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :span="9" v-if="noBaoji!==''">
|
<!-- 历史状态画图 -->
|
<div :ref="'echartsDivwd'+device.设备编号" style="height: 33%;">
|
</div>
|
<div :ref="'echartsDivls'+device.设备编号" style="height: 33%;">
|
</div>
|
<div :ref="'echartsDivddd'+device.设备编号" style="height: 33%;">
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
|
</div>
|
|
</template>
|
<script lang="ts" setup>
|
import TQS88 from './img/TQS88.png'
|
import {computed, getCurrentInstance, onMounted,ref,watch} from 'vue'
|
import * as echarts from 'echarts';
|
const props = defineProps(['deviceData'])
|
import { jgTime4 } from '../utils/formatTime';
|
const { proxy } = getCurrentInstance() as any;
|
const device=computed(()=>{
|
return props.deviceData
|
})
|
// 告警提示
|
const textbaojing=ref('')
|
const iscomfig=ref(false)
|
const centerDialogVisible=ref(false)
|
const background=ref('')
|
const txztText=ref('')
|
const textcolor=ref('')
|
const wd=ref('')
|
const ls=ref('')
|
const ddd=ref('')
|
const txzt: any = computed(() => {
|
return props.deviceData.透析状态;
|
});
|
// 是否是消毒类型和待机
|
const xiaoduzhuangti=computed(()=>{
|
// const list=device.value.设备状态列表
|
// if(list&&list.length>0){
|
// const x= list.findIndex(e=>{return e.状态类型==='透析机消毒'||e.状态类型==='待机'})
|
// if(x>=0){
|
// return true
|
// }else{
|
// return false
|
// }
|
// }
|
return false
|
});
|
// 状态颜色
|
const zhuangtaiColor=computed(()=>{
|
const list=device.value.设备状态列表
|
let colorStr='#13CE66'
|
if(list&&list.length>0){
|
// 默认显示第一状态颜色
|
// colorStr=list[0].状态颜色
|
// 消毒状态优先级高
|
const x= list.findIndex(e=>{return e.状态类型==='透析机消毒'||e.状态类型==='在线'})
|
if(x!==0){
|
colorStr=list[0].状态颜色
|
}
|
}
|
return colorStr
|
});
|
// 没有报警就返回空字符传
|
const noBaoji=computed(()=>{
|
const list=device.value.设备状态列表
|
let zhuantaiStr=''
|
let jinggaoStr=''
|
if(list&&list.length>0){
|
list.forEach((el:any)=>{
|
if(el.是否为警告标记===1){
|
if(jinggaoStr!==''){
|
jinggaoStr+='/'+el.状态名称
|
}else{
|
jinggaoStr+=el.状态名称
|
}
|
}else{
|
zhuantaiStr+=el.状态名称
|
}
|
})
|
}
|
return jinggaoStr
|
});
|
// 状态返回
|
const zhuangtaiStr=computed(()=>{
|
const list=device.value.设备状态列表
|
let zhuantaiStr=''
|
if(list&&list.length>0){
|
list.forEach((el:any)=>{
|
if(el.是否为警告标记===1||el.状态类型==='透析机消毒'||el.状态类型==='在线'){ //去掉待机和消毒状态显示
|
}else{
|
if(zhuantaiStr!==''){
|
zhuantaiStr+='/'+el.状态名称
|
}else{
|
zhuantaiStr+=el.状态名称
|
}
|
|
}
|
})
|
}
|
|
return zhuantaiStr
|
})
|
const isbaioji=computed(()=>{
|
const list=device.value.设备状态列表
|
if((device.value.监测血压是否低于百分之30||device.value.跨膜压是否大于200||device.value.监测血压是否高于百分之30)&&device.value.透析状态==='2.0'){
|
return true
|
}
|
else{
|
return false
|
}
|
})
|
// 透前血压告警
|
const tqXygj=computed(()=>{
|
if(device.value.透前血压_伸缩压>160||device.value.透前血压_伸缩压<90){
|
return true
|
}else{
|
return false
|
}
|
})
|
// 透前脉搏告警
|
const tqMbgj=computed(()=>{
|
if(device.value.透前脉搏>90){
|
return true
|
}else{
|
return false
|
}
|
})
|
// 设置内联样式对象
|
const backgroundStyle = {
|
backgroundImage: `url(${TQS88})`,
|
backgroundSize: 'cover', // 根据需要调整
|
backgroundPosition: 'center', // 根据需要调整
|
};
|
watch(
|
() => txzt.value,
|
() => {
|
if (txzt.value === '0.0') {
|
txztText.value = '未签';
|
textcolor.value = '#FAFAFA';
|
background.value='#606266'
|
} else if (txzt.value === '1.0') {// 蓝色
|
textcolor.value = '#faecd8';
|
background.value='#E6A23C'
|
txztText.value = '已签';
|
} else if (txzt.value === '2.0') {// 绿色
|
// textcolor.value = '#D9F5E2';
|
// background.value='#67C23A'
|
textcolor.value = '#ECF5FF';
|
background.value='#409EFF'
|
txztText.value = '透中';
|
} else if (txzt.value === '2.5') { //
|
textcolor.value = '#fde2e2';
|
background.value='#fab6b6'
|
txztText.value = '结束';
|
} else if (txzt.value === '3.0') {// 已经结束
|
textcolor.value = '#FFECD0';
|
background.value='#E6A23C'
|
txztText.value = '检查';
|
} else if (txzt.value === '4.0') {// yij
|
textcolor.value = '#FFECD0';
|
background.value='#E6A23C'
|
txztText.value = '归档';
|
}
|
},
|
{
|
immediate: true,
|
deep: true,
|
}
|
);
|
onMounted(()=>{
|
})
|
watch(()=>device.value.设备变化,()=>{
|
// console.log(device.value.设备名称,'子组件变量')
|
setTimeout(()=>{
|
if(!xiaoduzhuangti.value){
|
initTupiao()
|
}
|
|
},500)
|
})
|
|
const showgaojing=()=>{
|
|
if(device.value.监测血压是否低于百分之30){
|
centerDialogVisible.value=true
|
iscomfig.value=true
|
textbaojing.value=`${device.value.设备名称}床，${device.value.患者姓名} 监测血压下降至上机血压30%了，请及时处理`
|
}
|
if(device.value.跨膜压是否大于200){
|
centerDialogVisible.value=true
|
iscomfig.value=true
|
textbaojing.value=`${device.value.设备名称}床，${device.value.患者姓名} 跨膜压过高请及时处理`
|
}
|
}
|
const initTupiao=()=>{
|
if(device.value.患者姓名!==''){
|
const seriesData=[
|
{
|
name: '',
|
type: 'line',
|
symbol: "triangle",
|
symbolSize: 10,
|
symbolRotate:180,
|
data: [],
|
lineStyle: {
|
width: 5, // 设置线条宽度为5
|
color:'red'
|
|
|
},
|
itemStyle: {
|
borderWidth: 3,
|
borderColor: 'red',
|
color: 'red'
|
},
|
markPoint:{
|
data:[]
|
},
|
markLine:{
|
symbol:"none",
|
lineStyle:{color:'#409EFF',width: 3 },
|
data:[{ name:'y90',yAxis:90,label:{show:false},symbol:"none"}]
|
}
|
},
|
|
|
{
|
name: '',
|
type: 'line',
|
symbol: "triangle",
|
symbolSize: 10,
|
data: [],
|
lineStyle: {
|
color:'#409EFF',
|
width: 5 // 设置线条宽度为5
|
},
|
itemStyle: {
|
borderWidth: 3,
|
borderColor: '#409EFF',
|
color: '#409EFF'
|
},
|
markPoint:{
|
data:[]
|
},
|
markLine:{
|
symbol:"none",
|
lineStyle:{color:'#F56C6C',width: 3 },
|
data:[{ name:'y140',yAxis:140,label:{show:false},symbol:"none"}]
|
}
|
},
|
{
|
name: '',
|
type: 'line',
|
symbolSize: 10,
|
data: [],
|
lineStyle: {
|
color:'#D940FF',
|
width: 5 // 设置线条宽度为5
|
},
|
markPoint:{
|
data:[]
|
},
|
|
},
|
]
|
const xAxisData=[]
|
if(Number(device.value.透析状态)>=2){
|
// alert(111)
|
device.value.监测记录列表.forEach((e,index)=>{
|
seriesData[0].data.push(e.伸缩压)
|
seriesData[1].data.push(e.舒张压)
|
seriesData[2].data.push(e.脉搏)
|
xAxisData.push(index)
|
if(index==0){
|
let y=(Number(e.伸缩压)+20)
|
let y2=(Number(e.舒张压)+20)
|
seriesData[0].markPoint.data.push({ name: '上机血压', value: e.伸缩压, xAxis: 0, yAxis: e.伸缩压,symbolSize:0,symbolOffset:[25,-15],label:{fontSize:20,color:'red'}})
|
seriesData[1].markPoint.data.push({ name: '上机血压', value: e.舒张压, xAxis: 0, yAxis: e.舒张压,symbolSize:0 ,symbolOffset:[15,15],label:{fontSize:20,color:'#409EFF'}})
|
seriesData[2].markPoint.data.push({ name: '上机血压', value: e.脉搏, xAxis: 0, yAxis: e.脉搏,symbolSize:0 ,symbolOffset:[10,-10],label:{fontSize:20,color:'#D940FF'}})
|
}
|
else if(device.value.监测记录列表.length>1&&index===(device.value.监测记录列表.length-1)){
|
let y=(Number(e.伸缩压)+20)
|
let y2=(Number(e.舒张压)+20)
|
seriesData[0].markPoint.data.push({ name: '上机血压', value: e.伸缩压, xAxis: index, yAxis: e.伸缩压,symbolSize:0,symbolOffset:[-15,-15],label:{fontSize:20,color:'red'}})
|
seriesData[1].markPoint.data.push({ name: '上机血压', value: e.舒张压, xAxis: index, yAxis: e.舒张压,symbolSize:0 ,symbolOffset:[-15,15],label:{fontSize:20,color:'#409EFF'}})
|
seriesData[2].markPoint.data.push({ name: '上机血压', value: e.脉搏, xAxis: index, yAxis: e.脉搏,symbolSize:0 ,symbolOffset:[0,-10],label:{fontSize:20,color:'#D940FF'}})
|
}
|
})
|
if(device.value.监测记录列表.length===1){
|
xAxisData.push(1)
|
}
|
try{
|
const myChart = echarts.init(proxy.$refs['echartsDiv'+device.value.设备编号]);
|
const option={
|
backgroundColor:textcolor.value,
|
tooltip: {
|
trigger: 'axis'
|
},
|
toolbox: {
|
show: false
|
},
|
grid:{
|
left:8,
|
top:0,
|
bottom:0,
|
},
|
xAxis: {
|
type: 'category',
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: xAxisData,
|
axisTick: {
|
show: true // 显示 X 轴刻度
|
}
|
},
|
yAxis: {
|
name: '',
|
type: 'value',
|
min: 20,
|
max: 220,
|
interval: 20, // 指定刻度间隔,
|
splitLine: {
|
show: false
|
}
|
},
|
series: seriesData
|
};
|
myChart.setOption(option);
|
}catch(e){
|
console.log('图标渲染异常异常')
|
}
|
|
}else{
|
try{
|
const myChart = echarts.init(proxy.$refs['echartsDiv'+device.value.设备编号]);
|
|
const option={
|
backgroundColor:textcolor.value,
|
tooltip: {
|
trigger: 'axis'
|
},
|
toolbox: {
|
show: false
|
},
|
grid:{
|
left:5,
|
top:0,
|
bottom:0,
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: [1,2,3,4]
|
},
|
yAxis: {
|
name: '',
|
type: 'value',
|
min: 20,
|
max: 220,
|
interval: 20, // 指定刻度间隔,
|
splitLine: {
|
show: false
|
}
|
},
|
series: []
|
};
|
myChart.setOption(option);
|
}catch(e){
|
console.log('异常',proxy.$refs['echartsDiv'+device.value.设备编号])
|
}
|
}
|
}else if(device.value.患者姓名===''){
|
const tbdata1=[]
|
const tbdata2=[]
|
const tbdata3=[]
|
if(device.value.属性历史列表){
|
device.value.属性历史列表.forEach((e,index)=>{
|
// 温度
|
const wdMode=e.属性列表.find(l=>{return l.identifierText==='透析液温度'})
|
if(wdMode){
|
tbdata1.push(Number(wdMode?.finalText))
|
wd.value=Number(wdMode?.finalText)
|
}
|
|
// 血液流速
|
const xymode=e.属性列表.find(l=>{return l.identifierText==='血液流速'})
|
if(xymode){
|
tbdata2.push(Number(xymode?.finalText))
|
ls.value=Number(xymode?.finalText)
|
}
|
|
// 电导度
|
const dddMode=e.属性列表.find(l=>{return l.identifierText==='透析液电导度'})
|
if(dddMode){
|
tbdata3.push(Number(dddMode?.finalText))
|
ddd.value=Number(dddMode?.finalText)
|
}
|
})
|
}
|
try{
|
const myChart1 = echarts.init(proxy.$refs['echartsDivwd'+device.value.设备编号]);
|
const myChart2 = echarts.init(proxy.$refs['echartsDivls'+device.value.设备编号]);
|
const myChart3 = echarts.init(proxy.$refs['echartsDivddd'+device.value.设备编号]);
|
const option1={
|
backgroundColor:textcolor.value,
|
tooltip: {
|
trigger: 'axis'
|
},
|
toolbox: {
|
show: false
|
},
|
grid:{
|
left:8,
|
top:30,
|
bottom:0,
|
},
|
xAxis: {
|
show: false, // 隐藏X轴
|
type: 'category',
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: [1,2,3],
|
axisTick: {
|
show: false // 显示 X 轴刻度
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: tbdata1,
|
type: 'line',
|
lineStyle: {
|
width: 10, // 设置线条宽度为5
|
color:'red'
|
}
|
}
|
]
|
};
|
const option2={
|
backgroundColor:textcolor.value,
|
tooltip: {
|
trigger: 'axis'
|
},
|
toolbox: {
|
show: false
|
},
|
grid:{
|
left:8,
|
top:20,
|
bottom:0,
|
},
|
xAxis: {
|
show: false, // 隐藏X轴
|
type: 'category',
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: [1,2,3],
|
axisTick: {
|
show: false // 显示 X 轴刻度
|
}
|
},
|
yAxis: {
|
type: 'value',
|
min:-10,
|
splitLine: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: tbdata2,
|
type: 'line',
|
lineStyle: {
|
width: 10, // 设置线条宽度为5
|
color:'#409EFF'
|
}
|
|
}
|
]
|
};
|
const option3={
|
backgroundColor:textcolor.value,
|
tooltip: {
|
trigger: 'axis'
|
},
|
toolbox: {
|
show: false
|
},
|
grid:{
|
left:8,
|
top:10,
|
bottom:0,
|
},
|
xAxis: {
|
show: false, // 隐藏X轴
|
type: 'category',
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: [1,2,3],
|
axisTick: {
|
show: false // 显示 X 轴刻度
|
}
|
},
|
yAxis: {
|
type: 'value',
|
min:-10,
|
splitLine: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: tbdata3,
|
type: 'line',
|
lineStyle: {
|
width: 10, // 设置线条宽度为5
|
color:'#E6A23C'
|
}
|
}
|
]
|
};
|
myChart1.setOption(option1);
|
myChart2.setOption(option2);
|
myChart3.setOption(option3);
|
}catch(e){
|
console.log('图标渲染异常异常')
|
}
|
|
console.log(device.value)
|
}
|
|
|
}
|
</script>
|
<style lang="less" scoped>
|
.divice{
|
font-size: 100%;
|
border-radius: 4px;
|
border: solid 1px;
|
width: 100%;
|
height: 100%;
|
border: 1px solid coral;
|
}
|
/* 定义闪烁动画 */
|
@keyframes blink {
|
0% {
|
border:4px solid red ;
|
}
|
50% {
|
border:4px solid Transparent ;
|
}
|
100% {
|
border:4px solid red ;
|
// border-bottom:8px solid red ;
|
}
|
}
|
|
/* 应用闪烁动画 */
|
.blink {
|
// float: left; /* 让div浮动到左边 */
|
width: 100%;
|
height: 100%;
|
animation: blink 2s infinite; /* 每秒闪烁一次，无限次数 */
|
|
// border-left:5px solid red ;
|
// border-right:5px solid red ;
|
|
// background: red;
|
cursor: pointer;
|
// margin-bottom: 100%;
|
}
|
@keyframes blink2 {
|
0% {
|
background: red ;
|
}
|
50% {
|
background: Transparent ;
|
}
|
100% {
|
background: red ;
|
// border-bottom:8px solid red ;
|
}
|
}
|
.blink2{
|
animation: blink2 2s infinite; /* 每秒闪烁一次，无限次数 */
|
width: 100%;
|
height: 100%;
|
}
|
.grid-container {
|
display: grid;
|
align-items: center; /* 垂直居中 */
|
height: 100vh; /* 根据需要调整高度 */
|
}
|
|
.centered-text {
|
font-weight: 600;
|
/* 其他样式 */
|
}
|
|
</style>
|
