main
parent
a8ba8139a6
commit
ff2ae358d9
|
|
@ -21,9 +21,10 @@
|
|||
"@vueuse/core": "9.5.0",
|
||||
"axios": "0.27.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"element-plus": "2.2.27",
|
||||
"echarts": "^5.2.2",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "2.2.27",
|
||||
"file-saver": "2.0.5",
|
||||
"fuse.js": "6.6.2",
|
||||
"js-cookie": "3.0.1",
|
||||
|
|
|
|||
|
|
@ -17,24 +17,166 @@
|
|||
</div>
|
||||
<div class="bottom-div">
|
||||
<div class="left-div">
|
||||
|
||||
<div id="echartDiv"></div>
|
||||
<div class="span-div">健康度</div>
|
||||
</div>
|
||||
<div class="right-div">
|
||||
<img src="@/assets/images/1.png" alt="" width="100%">
|
||||
<div class="select-date">
|
||||
<el-date-picker v-model="value" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
|
||||
:default-time="defaultTime" />
|
||||
</div>
|
||||
<div class="time-line">
|
||||
<el-timeline class="timeline">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top"
|
||||
:icon="activity.icon" :type="activity.type" :size="activity.size"
|
||||
:class="{ 'isoodClass': index % 2 == 0 }">
|
||||
<slot name="timestamp">
|
||||
<div class="timestamp">
|
||||
<span class="time">{{ activity.time }}</span>
|
||||
<span class="time-stamp">{{ activity.timestamp }}</span>
|
||||
</div>
|
||||
|
||||
</slot>
|
||||
<el-card :style="{ 'background': activity.color }">
|
||||
{{ activity.content }}
|
||||
</el-card>
|
||||
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import 'echarts-liquidfill/src/liquidFill.js';
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import { MoreFilled, Warning } from '@element-plus/icons-vue';
|
||||
const value = ref(["2023-11-30T16:00:00.000Z", "2023-12-31T15:59:59.000Z"])
|
||||
const defaultTime = ref([
|
||||
new Date(2000, 1, 1, 0, 0, 0),
|
||||
new Date(2000, 2, 1, 23, 59, 59),
|
||||
])
|
||||
const data = reactive({
|
||||
|
||||
activities: [
|
||||
{
|
||||
content: '设备完成巡检计划',
|
||||
time: '2023年',
|
||||
timestamp: '12月3日',
|
||||
color: '#0bbd87',
|
||||
icon: MoreFilled,
|
||||
type: 'primary',
|
||||
size: 'large'
|
||||
},
|
||||
{
|
||||
content: '设备发生故障：电流过大',
|
||||
time: '2023年',
|
||||
timestamp: '12月5日',
|
||||
color: '#e54c44',
|
||||
type: 'danger',
|
||||
icon: Warning,
|
||||
size: 'large'
|
||||
},
|
||||
{
|
||||
content: '设备保养周期剩余3天',
|
||||
time: '2023年',
|
||||
timestamp: '12月6日',
|
||||
color: '#31bdb4',
|
||||
icon: MoreFilled,
|
||||
type: 'primary',
|
||||
size: 'large'
|
||||
},
|
||||
{
|
||||
content: '设备完成巡检计划',
|
||||
time: '2023年',
|
||||
timestamp: '12月20日',
|
||||
color: '#0bbd87',
|
||||
icon: MoreFilled,
|
||||
type: 'primary',
|
||||
size: 'large'
|
||||
},
|
||||
{
|
||||
content: '设备发生故障：电流过大',
|
||||
time: '2023年',
|
||||
timestamp: '12月23日',
|
||||
color: '#e54c44',
|
||||
type: 'danger',
|
||||
icon: Warning,
|
||||
size: 'large'
|
||||
},
|
||||
]
|
||||
});
|
||||
const { activities } = toRefs(data);
|
||||
|
||||
const deviceInfo = computed(() =>
|
||||
bimStore().activateDevice.info
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
getEchart();
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const getEchart = () => {
|
||||
var dom = document.getElementById('echartDiv');
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
const series = [
|
||||
{
|
||||
type: 'liquidFill',
|
||||
shape: 'circle',
|
||||
radius: '80%',
|
||||
center: ['50%', '50%'],
|
||||
data: [0.6, 0.5, 0.4],
|
||||
// 球体配置
|
||||
outline: {
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#3dfff6',
|
||||
shadowBlur: 20,
|
||||
shadowColor: '#12786f'
|
||||
}
|
||||
},
|
||||
color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
|
||||
backgroundStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#12786f',
|
||||
insideColor: '#12786f',
|
||||
fontSize: 28
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#12786f',
|
||||
insideColor: '#12786f',
|
||||
fontSize: 40
|
||||
},
|
||||
formatter: params => {
|
||||
return `${(params.value * 100).toFixed(0)}%`
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 24,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
const option = { series, backgroundColor: '#ffffff' }
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realInfoDialog {
|
||||
|
|
@ -50,16 +192,19 @@ const deviceInfo = computed(() =>
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> div {
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
line-height: 48px;
|
||||
width: 240px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 45%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
|
|
@ -76,14 +221,84 @@ const deviceInfo = computed(() =>
|
|||
width: 20%;
|
||||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
#echartDiv {
|
||||
height: 60%;
|
||||
width:95%;
|
||||
}
|
||||
.span-div {
|
||||
padding: 5px 25px;
|
||||
background: #3cbfdf;
|
||||
border-radius: 15px;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
.right-div {
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
>div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.select-date {
|
||||
height: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.time-line {
|
||||
height: 88%;
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
margin: 150px auto;
|
||||
|
||||
.lineitem {
|
||||
transform: translateX(50%);
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-timeline-item__tail) {
|
||||
border-left: none;
|
||||
border-top: 2px solid #e4e7ed;
|
||||
width: 100%;
|
||||
// position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-timeline-item__wrapper) {
|
||||
padding-left: 0;
|
||||
// position: absolute;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
width: 150px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.isoodClass {
|
||||
:deep(.el-timeline-item__wrapper) {
|
||||
top: -120px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-timeline-item__timestamp) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
Loading…
Reference in New Issue