From 9cde23e66306cbb4f7137653ffda2984814ddb6f Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 08 Apr 2021 15:52:25 +0800
Subject: [PATCH] 详情页基本布置
---
src/views/dataL/dataL.vue | 313 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 242 insertions(+), 71 deletions(-)
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 1b6a15d..459f0c3 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -67,6 +67,74 @@
</span>
</div>
<div class="l-m-2-main">
+ <div class="l-m-2-m-not" v-show="eventDetails.length == 0">
+ <img src="https://city.sensoro.com/assets/img/no-history.png" alt="">
+ <div>无事件记录</div>
+ </div>
+
+
+ <div v-for="(value,index) in eventDetails" :key="index" v-show="eventDetails.length != 0" class="l-m-2-m-table">
+ <p class="l-m-2-m-tableheard">{{value.year}}年</p>
+ <div class="l-m-2-m-tablemain">
+ <el-table
+ :data="value.data"
+ style="width: 100%">
+ <el-table-column type="expand">
+ <template slot-scope="props">
+ <el-form label-position="left" inline class="demo-table-expand">
+ <el-table
+ :data="props.row.childs"
+ style="width: 100%;"
+ class="l-m-2-m-tm-int"
+ >
+ <!-- <el-table-column type="expand">
+ <template slot-scope="propss">
+ <el-form label-position="top" inline class="demo-table-expand">
+ {{propss.row.open}}
+ </el-form>
+ </template>
+ </el-table-column> -->
+ <el-table-column
+ label="时间"
+ prop="time"
+ width="100px"
+ >
+ </el-table-column>
+ <el-table-column
+ label="事件"
+ prop="events">
+ </el-table-column>
+ <el-table-column
+ label="详情"
+ prop="open">
+ </el-table-column>
+ </el-table>
+ </el-form>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="日期"
+ prop="day">
+ </el-table-column>
+ <el-table-column
+ label="时间"
+ prop="time">
+ </el-table-column>
+ <el-table-column
+ label="事件"
+ prop="events">
+ </el-table-column>
+ <el-table-column
+ label="类型"
+ prop="type"
+ >
+ <template slot-scope="props">
+ <el-tag>{{ props.row.type }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
<!-- 时间轴历史记录 待选-->
@@ -387,12 +455,10 @@
</div>
</template>
<script>
+import axios from 'axios'
import echarts from 'echarts'
const cityOptions = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
export default {
- created() {
- this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
- },
data(){
return{
name: '婴滋诚红谷滩凤凰花园东区',
@@ -419,68 +485,85 @@
checkedCities: [], //选择的
cities: cityOptions,
isIndeterminate: true,
- eventDetails: [
+
+ //列表数据：
+ obj: [],//选中
+ option2:{//抬头
+ menuType:'text',
+ page:false,
+ align:'center',
+ dateBtn:true,
+ dateDefault:true,
+ menuAlign:'center',
+ column:[
+ {
+ label:'姓名',
+ prop:'name'
+ },
+ {
+ label:'性别',
+ prop:'sex'
+ },{
+ label: "日期",
+ prop: "date",
+ type: "date",
+ format: "yyyy-MM-dd hh:mm:ss",
+ valueFormat: "yyyy-MM-dd hh:mm:ss",
+ }
+ ]
+ },
+ eventDetails: [],//真实数据
+ eventDetaill: [//原始数据
{
year: '2020',
- '06月13日': {
- time: '02:22:06',
- events: '烟雾 监测到烟雾',
- type: '测试/巡检',
- showl: true,
- childs: [
- {
- time: '07:30:46',
- events: '系统发送恢复短信至：刘仁花 ',
- open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
- },
- {
- time: '07:30:46',
- events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
- open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
- }
- ],
- },
- '06月12日': {
- time: '02:22:06',
- events: '烟雾 监测到烟雾',
- type: '真实火警',
- showl: true,
- childs: [
- {
- time: '07:30:46',
- events: '系统发送恢复短信至：刘仁花 ',
- open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
- },
- {
- time: '07:30:46',
- events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
- open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
- }
- ],
- },
+ data: [
+ {
+ day: '06月17日',
+ time: '02:22:06',
+ events: '烟雾 监测到烟雾',
+ type: '测试/巡检',
+ childs: [
+ {
+ time: '07:30:46',
+ events: '系统发送恢复短信至：刘仁花 ',
+ open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
+ },
+ {
+ time: '07:30:46',
+ events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
+ open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
+ }
+ ],
+ },
+ ]
},
{
year: '2019',
- '06月13日': {
- time: '02:22:06',
- events: '烟雾 监测到烟雾',
- type: '安全隐患',
- showl: true,
- childs: [
- {
- time: '07:30:46',
- events: '系统发送恢复短信至：刘仁花 ',
- open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
- },
- {
- time: '07:30:46',
- events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
- open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
- }
- ],
- },
+ data: [
+ {
+ day: '06月3日',
+ time: '02:22:06',
+ events: '烟雾 监测到烟雾',
+ type: '安全隐患',
+ childs: [
+ {
+ time: '07:30:46',
+ events: '系统发送恢复短信至：刘仁花 ',
+ open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
+ },
+ {
+ time: '07:30:46',
+ events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
+ open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
+ }
+ ],
+ },
+ ],
}
],
+
+
+ //详情数据
detailsData: {
machineName: '测试设备8',// 设备名称
machineNumber: '000000000008', //
@@ -554,30 +637,88 @@
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
},
- modifyl(){
+ modifyl(){//right 修改按钮
console.log(`top --修改`)
},
- handleCheckAllChange(val) {
+ handleCheckAllChange(val) {//事件类型全选
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
- handleCheckedCitiesChange(value) {
+ handleCheckedCitiesChange(value) {//事件类型
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
- resetl(){
+ resetl(){//事件类型重置
this.screens = false;
this.checkedCities = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
- console.log(`按钮重置`);
+ // console.log(`按钮重置`);
+ this.doEvents(this.checkedCities);
},
- determine(){
+ determine(){//事件类型确定
this.screens = false;
console.log(this.checkedCities);
+ if(this.checkedCities.length == 0){
+ // console.log(`未选择`);
+ this.eventDetails = [];
+ }else{
+ this.doEvents(this.checkedCities);//筛选数据
+ }
+
+ },
+ doEvents(ends){//事件类型数据、
+ var uA = this.eventDetaill;//输入数据
+ var useD = [];//创建缓存
+ for(var key in uA){ //循环数据{year ， data}
+ var uB = uA[key].data,
+ udd = [];
+ // console.log(uB);
+ for(var val in uB){ //循环data
+ var i = 0;
+ // console.log('uB--type:--' + uB[val].type,val);
+ for(var uE in ends){ //循环选中
+ // console.log('uE' + ends[uE])
+ if(uB[val].type == ends[uE]){ //判断数据是否选中
+ i ++;
+ }
+ }
+ // console.log(i);
+ if(i == 1){ //选中推入
+ udd.push(uB[val]);
+ }
+ }
+ // console.log(udd);
+ if(udd.length != 0){//若data中没有符合的选项，则整个过滤
+ useD.push({
+ year: uA[key].year,
+ data: udd
+ })
+ }
+ }
+ // console.log(useD)
+ this.eventDetails = useD;
+ },
+ getdata(){
+ const url = 'http://localhost:1888/api/blade-jfpts/equipment/equipment/pageDept?deviceName=000000000001¤t=1&size=10&pid='
+ axios.get(url)
+ .then((res)=>{
+ var data = res.data.data.records;
+ this.stetDetails(data);
+ console.log(data);
+ })
+ },
+ stetDetails(d){
+ // this.name = 1;
}
},
+ created() {
+ this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
+ this.getdata();
+ },
mounted(){
- this.startEcharts01();
+ this.startEcharts01();//载入折线图
+ this.eventDetails = this.eventDetaill;//载入历史事件数据
+ // this.doEvents();//cc
}
}
</script>
@@ -585,6 +726,9 @@
#Lour{
width: 100%;
height: 100%;
+ // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
+ // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
+ font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
// border: 1px solid #000;
display: flex;
// align-items: center;
@@ -639,7 +783,7 @@
.l-main-3{
border: 1px solid rgba(14, 14, 14,0);
width: 99%;
- height: 653px;
+ height: 654px;
padding: 2px;
.l-m-3-heard{
margin-left: 20px;
@@ -713,9 +857,9 @@
}
.l-m-2-main{
width: 100%;
- height: 300px;
+ height: 370px;
overflow: scroll;
- border: 1px solid rgb(23, 66, 209);
+ // border: 1px solid rg b(23, 66, 209);
.l-m-2-m-not{
display: flex;
align-items: center;
@@ -730,6 +874,14 @@
div{
font-size: 12px;
color: rgba($color: #000000, $alpha: .3);
+ }
+ }
+ .l-m-2-m-table{
+ .l-m-2-m-tablemain{
+ .l-m-2-m-tm-int{
+ position: relative;
+ top: -10px;
+ }
}
}
.l-m-2-m-dat{
@@ -836,7 +988,11 @@
}
.r-b-map{
height: 400px;
- border: 1px solid rgb(23, 201, 62);
+ border: 1px solid rgba(109, 109, 109,0.2);
+ #supervisoryMap{
+ width: 100%;
+ height: 400px;
+ }
}
}
}
@@ -845,10 +1001,25 @@
.backc{
background-color: #29c093;
}
-
-
.grid-content {
border-radius: 4px;
min-height: 36px;
}
+
+
+
+
+//表格cc
+ .demo-table-expand {
+ font-size: 0;
+ }
+ .demo-table-expand label {
+ width: 90px;
+ color: #99a9bf;
+ }
+ .demo-table-expand .el-form-item {
+ margin-right: 0;
+ margin-bottom: 0;
+ width: 50%;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3