<template>
	<div class="home">
		<div class="home-left">
			<!-- 告警内容 -->
			<Box title="告警内容统计" count='17'>
				<div class="boxbg bga mb33">
					<div class="flexc boxbga">
						<div class="imgs"><img src="@/assets/images/ltaba.png" class="imga"/></div>
						<div class="contnum">
							<div class="f14 cof">越线告警</div>
							<div class="num">08</div>
						</div>
					</div>
					<div class="flexc boxbga">
						<div class="imgs"><img src="@/assets/images/ltabb.png" class="imgb"/></div>
						<div class="contnum">
							<div class="f14 cof">徘徊告警</div>
							<div class="num">06</div>
						</div>
					</div>
					<div class="flexc boxbga">
						<div class="imgs"><img src="@/assets/images/ltabc.png" class="imgc"/></div>
						<div class="contnum">
							<div class="f14 cof">陌生人告警</div>
							<div class="num">02</div>
						</div>
					</div>
					<div class="flexc boxbga">
						<div class="imgs"><img src="@/assets/images/ltabd.png" class="imgd"/></div>
						<div class="contnum">
							<div class="f14 cof">火焰/烟雾告警</div>
							<div class="num">01</div>
						</div>
					</div>
				</div>
			</Box>
			<!-- 年度告警 -->
			<div class="inbox">
				<img src="@/assets/images/line.png" class="line"/>
				<div class="flexc tits">
					<img src="@/assets/images/tip.png" class="tip"/>
					<span class="tit">年度告警统计</span>
					<el-select v-model="value" placeholder="请选择">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
				</div>
				<div class="bgc mb33 h171">
					<line-chart :chart-data="rllineconut"></line-chart>
				</div>
			</div>
			<!-- 年度告警 -->
			<div class="inbox">
				<img src="@/assets/images/line.png" class="line"/>
				<div class="flexc tits">
					<img src="@/assets/images/tip.png" class="tip"/>
					<span class="tit">告警严重程度分析</span>
					<el-date-picker
					      v-model="value1"
					      type="year"
						  :picker-options="pickerOptions"
					      placeholder="选择年">

					 </el-date-picker>
				</div>
				<!-- <i class="el-icon-caret-bottom"></i>
				<i class="el-icon-caret-top"></i> -->
				<div class="bgc h193 mb33" style="padding-left: 18px;padding-top: 13px;padding-right: 15px;display: flex;">
					<div>
						<morering-chart :chart-data="ringconut"></morering-chart>
					</div>
					<div class="fxbox flex1">
						<div class="fxlist flext">
							<span class="cir"></span>
							<div class=" flex1">
								<div class="flexc"><span class="fxtit">徘徊告警</span><span class="fxnum">44</span></div>
							</div>
						</div>
						<div class="fxlist flext ca">
							<span class="cir"></span>
							<div class=" flex1">
								<div class="flexc mb5"><span class="fxtit">陌生人告警</span><span class="fxnum">42</span></div>
								<div class="flexc"><span class="fxtit">越线告警</span><span class="fxnum">26</span></div>
							</div>
						</div>
						<div class="fxlist flext cb">
							<span class="cir"></span>
							<div class=" flex1">
								<div class="flexc mb5"><span class="fxtit">火焰告警</span><span class="fxnum">13</span></div>
								<div class="flexc"><span class="fxtit">烟雾告警</span><span class="fxnum">21</span></div>
							</div>
						</div>
					</div>
					<!-- <line-chart :chart-data="rllineconut"></line-chart> -->
				</div>
			</div>
		</div>
		<div class="home-mid">
			<div class="bgd" style="height: 421px;width: 711px;margin-bottom: 33px;">
				<!-- 建筑 -->
				<!-- 地图 -->
				<box-center :annexList="annexList" :mapoptiops="mapoptiops"></box-center>
			</div>
			<Box title="通道告警比重分析">
				<!-- /柱状图 -->
				<div class="flext bgc">
					<div class="barbox">
						<ltbar-chart :chart-data="ltbarconut"></ltbar-chart>
						<!-- <img src="@/assets/images/barbg.png" class="barbg"/> -->
					</div>
					<!-- 仪表盘 -->
					<!-- <div style="height: 193px;flex: 1;">
						<morepie-chart :chart-data="looppieData"></morepie-chart>
					</div> -->
					<div class="morepie">
						<div class="pieboxs">
							<div class="piebox">
								<pie-charts :chart-data="pieDataa"  width="60px" height='60px'></pie-charts>
							</div>
							<div class="tit">{{pieDataa.name}}</div>
						</div>
						<div class="pieboxs">
							<div class="piebox">
								<pie-charts :chart-data="pieDatab"  width="60px" height='60px'></pie-charts>
							</div>
							<div class="tit">{{pieDatab.name}}</div>
						</div>
						<div class="pieboxs">
							<div class="piebox">
								<pie-charts :chart-data="pieDatac"  width="60px" height='60px'></pie-charts>
							</div>
							<div class="tit">{{pieDatac.name}}</div>
						</div>
						<div class="pieboxs">
							<div class="piebox">
								<pie-charts :chart-data="pieDatad"  width="60px" height='60px'></pie-charts>
							</div>
							<div class="tit">{{pieDatad.name}}</div>
						</div>
						<div class="pieboxs">
							<div class="piebox">
								<pie-charts :chart-data="pieDatae"  width="60px" height='60px'></pie-charts>
							</div>
							<div class="tit">{{pieDatae.name}}</div>
						</div>
						<div class="pieboxs">
							<div class="piebox">
								<pie-charts :chart-data="pieDataf"  width="60px" height='60px'></pie-charts>
							</div>
							<div class="tit">{{pieDataf.name}}</div>
						</div>
					</div>
				</div>
			</Box>
		</div>
		<div class="home-right">
			<Box title="较上月告警数对比">
				<div class="bgc mb33 h171" >
					<jbbar-chart :chart-data="jbbarconut"></jbbar-chart>
				</div>
			</Box>
			<!-- 图表 -->
			<Box title="告警记录">
				<div class="bgc mb33 scrollable-data-container h171">
					<!-- <box-table :data="dataList" :statusOptions="statusOptions"  @refresh-data="fetchData"></box-table> -->
					<box-table :data="dataList" :columns="columna" tableHeight='170px' :statusOptions="statusOptions"></box-table>
					<!-- <box-table :data="dataList"   @refresh-data="fetchData"></box-table> -->
				</div>
			</Box>
			<!-- 年度告警 -->
			<div class="inbox">
				<img src="@/assets/images/line.png" class="line"/>
				<div class="flexc tits">
					<img src="@/assets/images/tip.png" class="tip"/>
					<span class="tit">年度告警统计</span>
					<el-select v-model="value" placeholder="请选择">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
				</div>
				<div class="bgc mb33 h193">
					<radar-chart :chart-data="radarData"></radar-chart>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {getCameraList} from '@/api/order.js'
import Box from './components/box'
import lineChart from "./components/lineChart.vue"
import moreringChart from "./components/moreringChart.vue"
import ltbarChart from "./components/ltbgbarChart.vue"
import pieCharts from "./components/morepieChart.vue"
import jbbarChart from "./components/jbbarChart.vue"
import radarChart from "./components/radarChart.vue"
import boxTable from "./components/table.vue"
import boxCenter from "./components/center.vue"
export default {
	components:{Box,lineChart,moreringChart,ltbarChart,pieCharts,jbbarChart,radarChart,boxTable,boxCenter
	},
  data(){
    return {
		 pickerOptions: {},
		rllineconut:{date:['3.7','3.12','3.24','3.26','4.11','4.18','4.23',],
	  gjzs: [10, 20, 30, 11, 4, 9, 30],
	  yxgj: [40, 61, 18, 70, 1, 43, 32]},//年度告警统计
	  ringconut:{ddj:44,zdj:68,gdj:34},//年度告警统计
	  ltbarconut:{date:['通道1','通道2','通道3','通道4','通道5','通道6'],gjzs: [81, 26,72,38, 26, 38],bfb: [25, 25,25,25, 25, 25],},//通道告警比重分析
	  jbbarconut:{date:['徘徊告警','越线告警','陌生人告警','火焰告警','烟雾告警',],gjzs: [81, 26,72,38, 26,],bfb: [25, 25,25,25, 25,],},//较上月告警数对比
	  looppieData: [{name: "通道1",value: 100,},{name: "通道2",value: 60,},{name: "通道3",value: 60,},{name: "通道4",value: 60,},{name: "通道5",value: 60,},{name: "通道6",value: 60},],
	  radarData: {date:['烟雾告警','火焰告警','陌生人告警','徘徊告警','越线告警',],gjzs: [0, 20,18, 26, 60],},
	  options: [{
	            value: '选项1',
	            label: '黄金糕'
	          }, {
	            value: '选项2',
	            label: '双皮奶'
	          }, {
	            value: '选项3',
	            label: '蚵仔煎'
	          }, {
	            value: '选项4',
	            label: '龙须面'
	          }, {
	            value: '选项5',
	            label: '北京烤鸭'
	          }],
	          value: '',
			  value1:'',
			  mapoptiops:[{value: '1',label: '建筑'}, {value: '2',label: '地图'}],
			  dataList: [{date: '告警任务04',name: '1',createTime: '25-04-27  09:35:42'}, 
			  {date: '告警任务01',name: '2',createTime: '25-04-27  09:35:42'}, 
			  {date: '告警任务02',name: '3',createTime: '25-04-27  09:35:42'}, 
			  {date: '告警任务01',name: '4',createTime: '25-04-27  09:35:42'}, 
			  {date: '告警任务01',name: '5',createTime: '25-04-27  09:35:42'}, 
			  ],
			  statusOptions:[{dictValue:"1",dictLabel:'烟雾告警'},{dictValue:"2",dictLabel:'徘徊告警'},{dictValue:"3",dictLabel:'陌生人告警'},{dictValue:"4",dictLabel:'越线告警'},{dictValue:"5",dictLabel:'火焰告警'},],
			allData:[],// 所有数据
			columna: [
			        { prop: 'date', label: '告警任务', width: '30%' },
			        { prop: 'name', label: '告警内容', width: '25%',type:'katype'},
			        { prop: 'createTime', label: '告警时间',width: '45%', }
			      ],
			currentIndex: 0, // 当前显示数据的起始索引
			refreshInterval: null, // 刷新数据的定时器
			scrollInterval: null, // 滚动数据的定时器
			isScrolling: false ,// 是否正在滚动
			annexList:[[{tit:'全部',id:0,},{tit:'办公区',id:1,}],[{tit:'车位',id:2,},{tit:'大厅',id:3,}]],
			pieDataa:{data:[{value:'25',name:'运行'}],name:"通道1",num:25,color:['#06C770']},
			pieDatab:{data:[{value:'25',name:'运行'}],name:"通道2",num:25,color:['#FFAB2B']},
			pieDatac:{data:[{value:'25',name:'运行'}],name:"通道3",num:25,color:['#F59FBC']},
			pieDatad:{data:[{value:'25',name:'运行'}],name:"通道4",num:25,color:['#3FBCEF']},
			pieDatae:{data:[{value:'25',name:'运行'}],name:"通道5",num:25,color:['#7CC623']},
			pieDataf:{data:[{value:'25',name:'运行'}],name:"通道6",num:25,color:['#FF6969']},
	}
  },
  mounted(){
   // this.getCameraList()
// this.fetchData()
  },
 
  created() {
    // this.getCurrentTime()
    // this.getDicts("sys_normal_disable").then(response => {
    //   this.statusOptions = response.data;
    // });
  },

  methods:{
	  statusFormat(row, list) {
	    return this.selectDictLabel(list, row);
	  },
	  fetchData() {
	        // 模拟API请求获取数据
	        setTimeout(() => {
	          const mockData = []
	          // const count = Math.floor(Math.random() * 10) + 5 // 5-15条随机数据
	          const count = Math.floor(Math.random() * 10) // 5-15条随机数据
	          
	          for (let i = 0; i < count; i++) {
	            mockData.push({
	              date: `告警任务${i + 1}`,
	              name: `${i >4 ? 2 : i + 1}`,
	              createTime: `2023-06-${i < 9 ? '0' + (i + 1) : i + 1}`
	            })
	          }
	          
	          this.dataList = mockData
	        }, 500)
	      },
		getannexListFn(){
				 getannexListFn().then(res=>{
				 	if(res.code==200){
						let newList = [];
						for (var i = 0; i < res.rows.length; i += 4) {
							newList.push(res.rows.slice(i, i + 4));
						}
						this.annexList=newList
						// this.annexList=res.rows;
				 	} 
				 }) 
		},
    // 摄像头列表
    getCameraList(){
    		  var params={
    			  type:1,
    			  isPage:'N'
    		  }
    		getCameraList(params).then(res=>{
    			if(res.code==200){
    				let newList = [];
    				for (var i = 0; i < res.rows.length; i += 4) {
    					newList.push(res.rows.slice(i, i + 4));
    				}
    				this.cameraList=newList
    				this.addressList=res.rows;
    			} 
    		})   
    },
  }
}
</script>
<style lang="scss" scoped>
.coa{color: #FFBB37;}
.cob{color: #0096FF;}
.coc{color: #00FFFF;}


/* 自定义滚动条样式 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}
.h171{width: 328px;height: 171px;}
.h193{width: 328px;height: 193px;}
.flexc{display: flex;align-items: center;}
.flex1{flex: 1;}
.flext{display: flex;align-items: flex-start;}
.flexcw{display: flex;flex-wrap: wrap;}
.f14{font-size: 14px;}
.mb5{margin-bottom: 5px;}
.cof{color: #fff;}
.mb33{margin-bottom: 33px;}
.home{height: 100vh;
	display: flex;padding: 37px 20px 44px;
	.home-left,.home-right{width:330px;}
	.home-mid{flex: 1;margin-left: 16px;}
	.home-left{
		.boxbg{width: 328px;height: 171px;display: flex;flex-wrap: wrap;box-sizing: border-box;
			&.bga{background: url('~@/assets/images/boxbg.png') no-repeat;background-size: 100% 100%;padding: 25px 12px 1px 12px;}
			&.bgb{background: linear-gradient(0deg, rgba(9,59,151,0.2) 0%, rgba(4,24,84,0.2) 100%);}
			.boxbga{width: 50%;margin-bottom: 19px;}
			.imgs{width: 46px;height: 54px;display: flex;align-items: center;justify-content: center;margin-right: 9px;
				.imga{width: 46px;height: 54px;}
				.imgb{width: 45px;height: 54px;}
				.imgc{width: 46px;height: 53px;}
				.imgd{width: 45px;height: 53px;}
			}
			.contnum{
				.num{font-weight: bold;font-size: 18px;color: #00D2FF;line-height: 32px;background: linear-gradient(0deg, #48BBF0 0%, #FFFFFF 86.4501953125%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent}
			}
			
		}
		.fxbox{margin-left: 18px;
			.fxlist{border-bottom: 1px dashed #C9CDD6;padding: 8px 0 12px;
				&.ca{
					.cir{border-color: #00FFFF;}
					.fxnum{color: #00FFFF;}
				}
				&.cb{
					.cir{border-color: #FFBB37;}
					.fxnum{color: #FFBB37;}
				}
			}
			.cir{width: 12px;height: 12px;border-radius: 50%;border: 2px solid #0096FF;margin-right: 8px;flex: 0 0 auto;;margin-top: 4px;	}
			.fxtit{font-size: 14px;color: #FFFFFF;flex: 0 0 auto;}
			.fxnum{font-weight: bold;font-size: 14px;color: #0096FF;flex: 1;text-align: right;padding-right: 10px;}
		}
	}
	.home-right{margin-left: 16px;}
	.bgc{background: url('~@/assets/images/boxbg.png') no-repeat;background-size: 100% 100%;}
	.bgd{background: url('~@/assets/images/cenbg.png') no-repeat;background-size: 100% 100%;}
	.bgb{background: linear-gradient(0deg, rgba(9,59,151,0.2) 0%, rgba(4,24,84,0.2) 100%);}
}

.inbox {
	
  .line{width: 100%;height: 2px;display: block;}
  .tits{padding: 0 14px;color: #FFFFFF;
	  .tip{width:14px;height: 11px;margin-right: 9px;flex: 0 0 auto;}
	  .tit{font-weight: 500;font-size: 16px;color: #FFFFFF;flex: 1;}
	  .cont{font-size: 14px;flex: 0 0 auto;
		span{ont-weight: bold;font-size: 14px;color: #00FFFF;}
	  }
  }
}
.barbox{
	width: 390px;height: 193px;flex:0 0 auto;
	.barbg{width: 389px;height: 26px;}
}
.morepie{display: flex;flex-wrap: wrap;align-items: center;
	.pieboxs{
		margin-left: 27px;padding-top: 3px;
		.piebox{width: 74px;height: 74px;background: url("~@/assets/images/piebg.png") no-repeat;position: relative;display: flex;align-items: center;justify-content: center;background-size: 100% 100%;
				
		}
		.tit{font-weight: bold;font-size: 12px;color: #FFFFFF;text-align: center;}
	}
}


::v-deep .el-select .el-icon-arrow-up::before {
  content: "\e78f"; /* 这里使用 Element UI 的 iconfont 图标，例如一个自定义的 iconfont 图标 */

}
::v-deep .el-input__icon{line-height: 21px;}
::v-deep .el-input--suffix{width: 100px;border: none;}
::v-deep .el-input__inner{background-color: transparent;color: #FFFFFF;font-size: 14px;border: none;text-align: right;height: 21px;
		// &::placeholder{color: #445055;}
	}

// ::v-deep .el-input__prefix{display: none;}

::v-deep .el-select .el-select__caret{color: #077A7E;}
</style>

