143 lines
4.5 KiB
Plaintext
143 lines
4.5 KiB
Plaintext
<template>
|
|
<div>
|
|
<el-row>
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<div style="font-weight: 600">我的任务</div>
|
|
<el-collapse accordion>
|
|
<el-collapse-item
|
|
v-for="(item, index) in findEarlyWarningArr"
|
|
:key="index"
|
|
>
|
|
<template slot="title">
|
|
<svg
|
|
class="icon"
|
|
style="font-size: 20px"
|
|
aria-hidden="true"
|
|
>
|
|
<use xlink:href="#icon-renwu"></use></svg
|
|
>工单: {{ item.oider }}
|
|
</template>
|
|
<div>
|
|
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
|
|
</div>
|
|
<div>
|
|
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<div style="font-weight: 600">预警信息</div>
|
|
<div
|
|
v-for="(item, index) in findEarlyWarningArr"
|
|
:key="index"
|
|
style="
|
|
background: #eed79a;
|
|
border-radius: 10px;
|
|
margin: 5px;
|
|
min-height: 50px;
|
|
"
|
|
>
|
|
<div style="display: flex">
|
|
<svg
|
|
class="icon"
|
|
style="font-size: 20px; height: 30px"
|
|
aria-hidden="true"
|
|
>
|
|
<use xlink:href="#icon-xitongbaojing"></use>
|
|
</svg>
|
|
<div>
|
|
<span
|
|
style="
|
|
font-size: 16px;
|
|
color: #e1251b;
|
|
display: inline-block;
|
|
padding-top: 8px;
|
|
"
|
|
>{{ item.title }}</span
|
|
>
|
|
<span style="display: block; color: #666">{{
|
|
item.description
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<div style="font-weight: 600">通知公告</div>
|
|
<div
|
|
v-for="(item, index) in getSysMessageAllArr"
|
|
:key="index"
|
|
style="background: #ecebeb; border-radius: 10px; margin: 5px"
|
|
>
|
|
<div style="display: flex">
|
|
<i
|
|
class="el-icon-message"
|
|
style="font-size: 16px; padding-top: 5px; color: #40c9c6"
|
|
></i>
|
|
<div>
|
|
<span
|
|
style="
|
|
font-size: 16px;
|
|
color: #40c9c6;
|
|
display: inline-block;
|
|
padding-top: 8px;
|
|
"
|
|
>{{ item.title }}</span
|
|
>
|
|
<span style="display: block; color: #666">{{
|
|
item.content
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data() {
|
|
return {
|
|
findEarlyWarningArr: [],
|
|
getSysMessageAllArr: [],
|
|
}
|
|
},
|
|
mounted(){
|
|
this.GetEarlyWarning();
|
|
this.getSysMessageAll();
|
|
},
|
|
methods:{
|
|
async GetEarlyWarning() {
|
|
//预警信息
|
|
let resp = await this.$indexApi.getFindEarlyWarning();
|
|
if (resp.code == 200) {
|
|
this.findEarlyWarningArr = resp.data; //赋值影响
|
|
}
|
|
},
|
|
async getSysMessageAll() {
|
|
let resp = await this.$indexApi.getSysMessageAll();
|
|
if (resp.code == 200) {
|
|
this.getSysMessageAllArr = resp.rows;
|
|
}
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
</style> |