jfpt-Vue.git - Gitblit

			@@ -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&current=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>