AMR/src/pages/Common/home.vue

<template>
	<div class="body EditCMBox">
		<!-- <div class="left_body panel">
			<div class="inner">
				<el-menu default-active="首页" class="el-menu-vertical-demo" background-color="#00122d" text-color="#5BB7FF"
				 active-text-color="#FFFFFF">
					<template v-for="(item, indexw) in menuList">
						<el-menu-item :index="item.title" :key="indexw" @click='goPage(item)'>
							<i :class="item.icon"></i>
							<span slot="title" :style="{ 'padding-left': item.icon ? '' : '20px' }">{{ item.title }}</span>
						</el-menu-item>
					</template>
				</el-menu>
			</div>
		</div> -->
		<div class="right_body">
			<div class="right_upper">
				<div class="right_upper_left">
					<top-title title="地图信息"></top-title>
					<div class="right_upper_title">
						<!-- <div class="right_uppertitle_left">
							<el-select class="Report order_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="right_uppertitle_right">
							<!-- <el-button class="custom_btn Colorbutton_blue" @click="pathOnlock">路径解锁</el-button> -->
							<el-select class="maskright_select" v-model="addOrdersB" @change="addOrders(addOrdersB)" placeholder="">
								<el-option v-for="item in tempalteMode" :key="item.template_name" :label="item.template_name" :value="item.template_name">
								</el-option>
							</el-select>
							<el-select style="margin-left:24px" class="maskright_select" v-model="addOrdersC" @change="addOrders(addOrdersC)" placeholder="">
								<el-option v-for="item in tempalteMode" :key="item.template_name" :label="item.template_name" :value="item.template_name">
								</el-option>
							</el-select>
							<!-- <el-button class="custom_btn Colorbutton_blue" @click="showModels">模板总览</el-button> -->
							<!-- <el-button class="custom_btn Colorbutton_blue" @click="goMap">全屏显示</el-button> -->
							<div class="all_pul"  @click="goMap"></div>
						</div>
					</div>
					<div class="right_map">
						<iframe width="100%" frameborder="0" scrolling="yes" height="100%" id="map_iframe" src="http://localhost:8088/page/map_export"></iframe>
					</div>
					<div class="right_mapMax" v-show="ifRe">
						<div class="right_mapMax_Top">
							<el-select  class="maskright_select" v-model="addOrdersB" @change="addOrders(addOrdersB)" placeholder="">
								<el-option v-for="item in tempalteMode" :key="item.template_name" :label="item.template_name" :value="item.template_name">
								</el-option>
							</el-select>
							<el-select class="maskright_select" v-model="addOrdersB" @change="addOrders(addOrdersB)" placeholder="">
								<el-option v-for="item in tempalteMode" :key="item.template_name" :label="item.template_name" :value="item.template_name">
								</el-option>
							</el-select>
							<!-- <el-button class="custom_btn Colorbutton_blue" @click="showModels">模板总览</el-button> -->
							<el-button class="custom_btn exitRe Colorbutton_blue" @click="goMap">退出全屏</el-button>
						</div>
						<div class="right_mapMax_Bottom">
							<iframe frameborder="0" scrolling="no" width="100%" height="100%" id="map_iframe" src="http://localhost:8088/page/map_export"></iframe>
						</div>
					</div>
					<!-- <top-title title="报警统计" style="margin-top:20px"></top-title>
					<div class="alarm_statistics"></div> -->

				</div>
				<div class="right_upper_right">
					<div class="right_upper_top">
						<div class="right_upper_top_left">
                            <top-title title="车辆信息">
							</top-title>
							<div class="cars_infor_body">
								<el-scrollbar style="width:100%;height:100%">
                                    <ul v-for="(item, index) in carsinfordata" :key="index">
										<li>
											{{ item.title }}
										</li>
										<li>
											{{item.statues}}
										</li>
										<li>
											电量：{{ item.elect }}
										</li>
										<li>
											调度上线：<i @click="changestatus(item, index)" :class="item.dispatchstatues == '1' ? 'IconStart' : 'IconClose'"></i>
										</li>
									</ul>
								</el-scrollbar>
								<!-- <div class="cars_item" :class="carsindex == index ? 'cars_item_active' : ''" @click="activeCar(index),carsindex=index"
								v-for="(item, index) in carsinfordata" :key="index">
									<div class="cars_item_body">
										<div class="cars_item_title">
											{{ item.title }}
										</div>
										<div class="cars_item_status">
											<div class="status_tips_body">
												<div class="status_tips_text">
													{{item.statues}}
												</div>
											</div>
										</div>
										<div class="elect_body">SOC：{{ item.elect }}</div>
										<div class="elect_body dispatch_body">
											调度上线：<i @click="changestatus(item, index)" :class="item.dispatchstatues == '1' ? 'IconStart' : 'IconClose'"></i>
										</div>
									</div>
								</div> -->
							</div>
						</div>
						<div class="right_upper_top_right">
							<div style="width: 100%;height: 110px;position: relative;top: 0px;float:left">
								<top-title title="任务控制"></top-title>
								<div class="carbtn_box" style="width: 100%;height: 70%;">
									<div v-if="showCar.ifshow" class="carbtn_item" style="width: 100%;height: 120px;margin-bottom:13px;
						background-color: #092754;display: flex;align-items: center;justify-content: space-around;"
									v-for="(item,index) in carbtn">
									<label style="color: #FFFFFF;font-size: 20px;">{{item.btn_title}}</label>
											<i class="IconFont" style="font-size: 20px;"
											@click="changeCarbtn(item, index)" :class="item.btn_icon == '1' ? 'IconStart' : 'IconClose'"></i>
										
									</div>
									<!-- <p v-if="Offline" style="float: left;font-size: 28px;color: #606266b0;letter-spacing: 3px;line-height: 10px;padding-left: 40px;">车辆已下线</p> -->
								</div>
								<div class="moreOrder" style="float: right;position: relative;top: -5px; width: 100px;height: 50px;right: 30px;"
								@click="">
									<!-- <el-button class="Colorbutton_blue">更多订单</el-button> -->
								</div>
							</div>
						</div>
					</div>
                     
					<div class="alarm_up" style="width: 100%;height:120px;position: relative;top: 0px;float:left">
						<top-title title="告警信息"></top-title>
						<div style="width: 100%;height: 80%;overflow: hidden;">
							<vue-seamless-scroll :data="agreepersonlist"  :class-option="optionSetting" ref="myScoll">
								<div class="givealarm_child" v-for="(item, index) in agreepersonlist" :key="index">
									<!-- <div class="top">
										<div  :class="{'logcomplete':item.start2 == 1,'logwarning':item.start2 == 2,'logalarm':item.start2 == 3,}"></div>
										<div class="content">{{item.name}}</div>
										<div class="start" :class="item.start == 1 ? 'start': 'starter'">{{item.start == 1 ? '已处理': '未处理'}}</div>
									</div> -->
									<p>{{item.alarm_date}}</p>
									<span>{{item.error_content}}</span>
								</div>
							</vue-seamless-scroll>
							<!-- <p v-if="Offline" style="float: left;font-size: 28px;color: #606266b0;letter-spacing: 3px;line-height: 10px;padding-left: 40px;">车辆已下线</p> -->
						</div>
					</div>
					<top-title title="订单信息" style="margin-top: 30px;"></top-title>
					<div class="right_lower">
						<div class="filter_by_state">
							<el-select v-model="filter_by_state" placeholder="全部" clearable class="filter_by_state_select" @change="filterChange">
								<el-option
								v-for="item in typeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-table :data="tableData" height="267px" width="100%">
							<el-table-column :label="item.label"  :align="item.label=='完成进度'?'left':'center'"
							v-for="(item, index) in tableprop" :key="index">
								<template slot-scope="scope">
									<div v-if="item.label == '操作'">
										<!-- <el-button class="Colorbutton_blue" @click="showDetial(scope.row.Id)">详情信息</el-button> -->
										<el-button class="Colorbutton"  @click="thisOrderStop(scope.row.Id)">暂停</el-button>
										<el-button class="Colorbutton"  @click="thisOrderRun(scope.row.Id)">继续</el-button>
										<el-button class="Colorbutton_blue"  @click="thisOrderClres(scope.row.Id)">取消</el-button>
									</div>
									<div v-else-if="item.label == '完成进度'">
										<div class="progress_body">
											<span class="progress_span">{{ scope.row[item.prop] }}</span>
											<div :style="{
												width: scope.row[item.prop],
												background: '#20CEA0',
												height: '100%',
												}"
											class="progress_item"></div>
										</div>
									</div>
									<div v-else>
										<div v-if="item.render" :style="{color: item.rendercolor ? item.rendercolor(scope.row) : '',}">
											{{ item.render(scope.row) }}
										</div>
										<div v-else>
											{{ scope.row[item.prop] }}
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
		                v-show="typeOptions.length<= 1"
						@current-change="changePage"
						@prev-click = "changePage"
						@next-click = "changePage"
						layout="prev, pager, next"
						:total="pageCount">
						</el-pagination>
					</div>
				</div>
			</div>
			<!-- <top-title title="具体订单状态" style="margin-top: 10px;"></top-title>
			<div class="right_lower">
				<div class="filter_by_state">
					<el-select v-model="filter_by_state" placeholder="全部" clearable class="filter_by_state_select" @change="filterChange">
					    <el-option
					      v-for="item in typeOptions"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
				</div>
				<el-table :data="tableData" height="240px" width="100%">
					<el-table-column :label="item.label" :width="item.width" :align="item.label=='完成进度'?'left':'center'"
					 v-for="(item, index) in tableprop" :key="index">
						<template slot-scope="scope">
							<div v-if="item.label == '操作'">
								<el-button class="Colorbutton_blue" @click="showDetial(scope.row.Id)">详情信息</el-button>
								<el-button class="Colorbutton" v-if="scope.row.order_state == 'EXECUTING'" @click="thisOrderStop(scope.row.Id)">暂停</el-button>
								<el-button class="Colorbutton" v-if="scope.row.order_state == 'HELD'" @click="thisOrderRun(scope.row.Id)">继续</el-button>
								<el-button class="Colorbutton_blue" v-if="scope.row.order_state != 'CANCELLED'&&scope.row.order_state != 'FAILED'&&scope.row.order_state != 'DELETED'&&scope.row.order_state != 'SUCCESS'" @click="thisOrderClres(scope.row.Id)">取消</el-button>
							</div>
							<div v-else-if="item.label == '完成进度'">
								<div class="progress_body">
									<span class="progress_span">{{ scope.row[item.prop] }}</span>
									<div :style="{
										width: scope.row[item.prop],
										background: '#20CEA0',
										height: '100%',
										}"
									 class="progress_item"></div>
								</div>
							</div>
							<div v-else>
								<div v-if="item.render" :style="{color: item.rendercolor ? item.rendercolor(scope.row) : '',}">
									{{ item.render(scope.row) }}
								</div>
								<div v-else>
									{{ scope.row[item.prop] }}
								</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
				  @current-change="changePage"
				  @prev-click = "changePage"
				  @next-click = "changePage"
				  layout="prev, pager, next"
				  :total="pageCount">
				</el-pagination>
			</div> -->
		</div>
		<el-dialog title="模板总览" :visible.sync="dialogVisible" width="800px" @close="closeDialog" id="addUserDialog">
			<el-table :data="ModeList" height="590" style="width: 100%;color: #2DAFF5;background-color: #103366;">
				<el-table-column prop="modeName" align="center" label="模板名称">
				</el-table-column>
				<el-table-column prop="btnName" align="center" label="对应按钮">
				</el-table-column>
				<el-table-column prop="carName" align="center" label="对应车辆">
				</el-table-column>
				<el-table-column prop="" align="center" label="操作">
					<template slot-scope="{row}">
						<el-button class="Colorbutton_blue" @click="bindOrder(row)">下单</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<OrdersInfo ref="OrdersInfo"></OrdersInfo>
	</div>
</template>

<script>
	import {
		GetUsers,
		getVehicles,
		Getorders,
		GetTemplates,
		GetTemplateslist,
		getVehicleByIds,
		ordersTemplate,
		setVehicleStatus,
		setVehicleFace,
		Deblock,
		SetOrders,
		Changestat,
		getOrdersByIds,
		Changestat2,
		keepCarOnline,
		Changestat3,
		Dbalarm,
		getbuttonstat,
		alarmInformation
	} from '@/api/request.js'
	import OrdersInfo from '../../components/OrdersInfo.vue'
	export default {
		data() {
			return {
				// heighter: '100%',
				mapURL:"",
				pageCount:0,
				isopen1:false,
				isopen2:false,
				isopen3:false,
				ifRe: false,
				Offline: false,
				agreepersonlist: [],
				showCar: {
					ifshow: true,
					num: '#'
				},
				addOrdersC: '地图切换',
				modeList3: [{
						modeName: 'P1-Car1'
					},
					{
						modeName: 'P1-Car2'
					},
					{
						modeName: 'P1-Car3'
					},
					{
						modeName: 'P1-Car4'
					},
					{
						modeName: 'P1-Car5'
					},
					{
						modeName: 'P1-Car6'
					},
					{
						modeName: 'P1-Car7'
					},
					{
						modeName: 'P1-Car8'
					}
				],
				addOrdersB: '选择模板下单',
				modeList2: [{
						modeName: 'P1-Car1'
					},
					{
						modeName: 'P1-Car2'
					},
					{
						modeName: 'P1-Car3'
					},
					{
						modeName: 'P1-Car4'
					},
					{
						modeName: 'P1-Car5'
					},
					{
						modeName: 'P1-Car6'
					},
					{
						modeName: 'P1-Car7'
					},
					{
						modeName: 'P1-Car8'
					}
				],
				ModeList: [ //模板总览数据
					{
						modeName: 'P1-Car1',
						btnName: '开包任务',
						carName: 'AMR01'
					},
					{
						modeName: 'P1-Car2',
						btnName: '开包任务',
						carName: 'AMR02'
					},
					{
						modeName: 'P1-Car3',
						btnName: '开包任务',
						carName: 'AMR03'
					},
					{
						modeName: 'P1-Car4',
						btnName: '开包任务',
						carName: 'AMR04'
					},
					{
						modeName: 'P2-Car1',
						btnName: '备用任务',
						carName: 'AMR01'
					},
					{
						modeName: 'P2-Car2',
						btnName: '备用任务',
						carName: 'AMR02'
					},
					{
						modeName: 'P2-Car3',
						btnName: '备用任务',
						carName: 'AMR03'
					},
					{
						modeName: 'P2-Car4',
						btnName: '备用任务',
						carName: 'AMR04'
					},
					{
						modeName: '充电桩1充电-Car1',
						btnName: '充电桩1充电',
						carName: 'AMR01'
					},
					{
						modeName: '充电桩1充电-Car2',
						btnName: '充电桩1充电',
						carName: 'AMR02'
					},
					{
						modeName: '充电桩1充电-Car3',
						btnName: '充电桩1充电',
						carName: 'AMR03'
					},
					{
						modeName: '充电桩1充电-Car4',
						btnName: '充电桩1充电',
						carName: 'AMR04'
					},
					{
						modeName: '充电桩2充电-Car1',
						btnName: '充电桩2充电',
						carName: 'AMR01'
					},
					{
						modeName: '充电桩2充电-Car2',
						btnName: '充电桩2充电',
						carName: 'AMR02'
					},
					{
						modeName: '充电桩2充电-Car3',
						btnName: '充电桩2充电',
						carName: 'AMR03'
					},
					{
						modeName: '充电桩2充电-Car4',
						btnName: '充电桩2充电',
						carName: 'AMR04'
					},
					{
						modeName: 'Lock_Car1',
						btnName: '前往站点1',
						carName: 'AMR01'
					},
					{
						modeName: 'Lock_Car2',
						btnName: '前往站点1',
						carName: 'AMR02'
					},
					{
						modeName: 'Lock_Car3',
						btnName: '前往站点1',
						carName: 'AMR03'
					},
					{
						modeName: 'Lock_Car4',
						btnName: '前往站点1',
						carName: 'AMR04'
					}
				],
				carbtn: [{
						type:"kbrw",
						btn_icon: 0,
						btn_title: '任务状态'
					},
					{
						type:"byrw",
						btn_icon: 0,
						btn_title: '在线控制'
					}
				],
				singleVehicle: {
					nickname: "cccc",
				},
				tempalteMode: '',
				tempalteModes: '',
				statusCarInfo: false, //正在执行车辆下方看板显示隐藏
				CarInfoData: {
					nickname: 'sss',
					renwuname: '当前任务',
					systemstatus: '系统任务',
					datastatus: '数据状态',
					movestatus: '移动状态',
					dostatus: '动作状态',
					elect: '电量',
				},
				templateDatas: [],
				vehiclesDatas: [],
				usersData: [],
				dialogVisible: false,
				value: '',
				valuemap: '请选择',
				valuemap1: '请选择',
				carsindex: -1,
				map_center: '',
				my_scroll_wheel_zoom: '',
				my_zoom: '',
				carsinfordata: [
				],
				broderoptions: [{
					value: '1',
					label: '边组合'
				}],
				mapoptions: [{
					value: '1',
					label: '地图元素'
				}],
				coordinateoptions: [],
				tableprop: [{
						"prop": 'Id',
						"label": 'ID',
						"width": '116',
					},
					{
						"prop": 'Status',
						"label": '状态',
						"width": '186',
					},
					{
						"prop": 'ChildStatus',
						"label": '子任务状态',
						"width": '186',
					},
					{
						"prop": 'template_name',
						"label": '模版名称',
						"width": '216',
					},
					{
						"prop": 'StartEnd',
						"label": '起点>终点',
						"width": '166',
					},
					{
						"prop": 'Type',
						"label": '类型',
						"width": '156',
					},
					{
						"prop": 'create_time',
						"label": '接收时间',
						"width": '286',
					},
					// {
					// 	"prop": 'Progress',
					// 	"label": '完成进度',
					// 	"width": '180',
					// },
					{
						"prop": 'Cars',
						"label": '执行车辆',
						"width": '156',
					},
					// {
					// 	"prop": 'OptionUser',
					// 	"label": '操作用户',
					// 	"width": '80',
					// },
					{
						"prop": 'Option',
						"label": '操作',
						"width": '',
					},
				],
				tableData: [],
				menuList: [{
						title: '车辆管理',
						path: '/CarAdministration',
						icon: 'Icon-cars IconFont',
					},
					{
						title: '订单管理',
						path: '/OrderAdministration',
						icon: 'Icon-order IconFont',
					},
					{
						title: '异常与日志',
						path: '/',
						icon: 'Icon-nomore IconFont',
					},
					{
						title: '系统管理',
						path: '/',
						icon: 'Icon-system IconFont',
					}
				],
				ifonline: 0,
				pageSize:1,
				pageSizes:1,
				sj:null,
				typeOptions:[
					{
					  value: '1',
					  label: '队列中'
					},
					{
					  value: '2',
					  label: '已取消'
					},
					{
					  value: '3',
					  label: '执行中'
					},
					{
					  value: '4',
					  label: '已失败'
					},
					{
					  value: '5',
					  label: '已成功'
					},
					{
					  value: '6',
					  label: '已删除'
					},
					{
					  value: '7',
					  label: '手动暂停'
					},
					{
					  value: '8',
					  label: '暂停执行'
					},
					{
					  value: '9',
					  label: '已挂起'
					},
					{
					  value: '10',
					  label: '队列外'
					}
				],
				filter_by_state:null
			}
		},
		computed:{
			optionSetting () {
				return{
					step: 0.3,
					limitMoveNum:5,
					hoverStop:true,//是否悬停
					openWatch: true, // 开启数据实时监控刷新dom
					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 10000 // 单步运动停止的时间(默认值1000ms)
				}
			}
		},
		components: {
			OrdersInfo
		},
		mounted() {
			clearInterval(this.sj)
			let that = this;
			this.js = setInterval(()=>{//实时更新数据
				that.getVehicle();
				that.GetTemplate();
				that.gettempalteMode()
				that.Getorder();
				that.getbuttonstats();
				that.alarmList()
			 },3000)
		},
		beforeRouteLeave(to, from, next){
			next();
			if (this.sj) {
			  clearInterval(this.sj)
			  this.sj = null;
			}
		},
		methods: {
			//告警信息
			alarmList() {
				alarmInformation().then(res => {
					this.agreepersonlist = res.resultData.result
					this.agreepersonlist.push()
					this.$refs.myScoll.reset();
				})
			},
			getbuttonstats(){
				getbuttonstat().then(res => {
					// console.log(res)
					if (res.resultData) {
						if(res.resultData[0].mission_boutton==1){
							this.isopen1==true
							this.carbtn[0].btn_icon=1;
						}
						else{
							this.isopen1==false
							this.carbtn[0].btn_icon=0;
						}
						
						if(res.resultData[1].mission_boutton==1){
							this.isopen2==true
							this.carbtn[1].btn_icon=1;
						}
						else{
							this.isopen2==false
							this.carbtn[1].btn_icon=0;
						}
						
						if(res.resultData[2].mission_boutton==1){
							this.isopen3==true
							this.carbtn[2].btn_icon=1;
						}
						else{
							this.isopen3==false
							this.carbtn[2].btn_icon=0;
						}
					}
				})
			},
			filterChange(){
				if(this.filter_by_state){
					this.pageSize = 1;
					this.Getorder();
				}
			},
			changePage(e){
				this.pageSize = e;
				this.Getorder();
			},
			setVehicleStatusTo(data) { //控制车辆状态公用接口
				setVehicleStatus(data).then(res => {
					console.log(res)
					if (res) {
						this.ifonline = 1;
					}
				})
			},
			pathOnlock() { //路径解锁
				this.$confirm('是否解锁路径？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Deblock().then(res => {
						if(res){
							this.$message({
								type: 'info',
								duration: 800,
								message: res.Message
							});
						}
					})
				}).catch(() => {
				});
			},
			goMap() { //地图全屏
				this.ifRe = !this.ifRe;
			},
			showDetial(Id){
				// let data = {
				// 	order_id:Id
				// }
				getOrdersByIds(Id).then(res => {
					if(res){
						this.$refs.OrdersInfo.modelData=res;
						this.$refs.OrdersInfo.dialogVisible = true;
					}
				})
			},
			thisOrderStop(Id) { //当前订单暂停
				let data = {
					order_id:Id,
					command_type:"CMD_ORDER_HELD"
				}
				this.$confirm('是否暂停该任务？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					SetOrders(data).then(res => {
						if(res){
							this.$message({
								type: 'info',
								duration: 800,
								message: "操作成功"
							});
						}
					})
				}).catch(() => {
				});
			},
			thisOrderRun(Id){
				let data = {
					order_id:Id,
					command_type:"CMD_ORDER_CONTINUE_FROM_HELD"
				}
				this.$confirm('是否继续该任务？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					SetOrders(data).then(res => {
						if(res){
							this.$message({
								type: 'info',
								duration: 800,
								message: "操作成功"
							});
						}
					})
				}).catch(() => {
				});
			},
			thisOrderClres(Id) { //当前订单取消
				let data = {
					order_id:Id,
					command_type:"CMD_ORDER_CANCEL"
				}
				this.$confirm('是否取消该任务？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					SetOrders(data).then(res => {
						if(res){
							this.$message({
								type: 'info',
								duration: 800,
								message: "操作成功"
							});
						}
					})
				}).catch(() => {
				});
			},
			addOrders(name) { //下拉模板下单
				this.$confirm('将添加'+name+'为新的任务订单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						template_name: name
					}
					ordersTemplate(data).then(res => {
						console.log(res)
						this.Getorder();
						this.$message({
							type: 'success',
							duration: 800,
							message: '下单成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						duration: 800,
						message: '已取消操作'
					});
				});
			},
			bindOrder(row) { //模板总览-绑定订单
				console.log(row)
				this.$confirm('将添加'+row.modeName+'为新的任务订单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						template_name: row.modeName
					}
					ordersTemplate(data).then(res => {
						console.log(res)
						this.Getorder();
						this.$message({
							type: 'success',
							duration: 800,
							message: '下单成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						duration: 800,
						message: '已取消操作'
					});
				});

			},
			activeCar(index) { //切换车辆信息
				this.showCar.num = index + 1
			},
			map_handler(e) {
			},
			serchCarStatus(valuemap) {
				this.statusCarInfo = true
			},
			changestatus(item, index) { //车辆调度上线
				
				this.carsindex = index;
				if (item.dispatchstatues == '1') {
					let data = {
							command_type: 'CMD_VEHICLE_UPDATE_ONLINE',
							param1:0,
							vehicle_id: item.id
						};
					item.dispatchstatues = '0'
					this.setVehicleStatusTo(data)
					if (this.ifonline) {
						this.$message({
							type: 'success',
							duration: 800,
							message: '下线成功!'
						});
					} else {
					}
				} else {
					let data = {
							command_type: 'CMD_VEHICLE_UPDATE_ONLINE',
							param1:1,
							vehicle_id: item.id
						};
					item.dispatchstatues = '1'
					this.setVehicleStatusTo(data)
					if (this.ifonline) {
						this.$message({
							type: 'success',
							duration: 800,
							message: '上线成功!'
						});
					} else {
					}
				}
				
			},
			changeCarbtn(item, index) {
				if (item.btn_icon == '1') {
					let data = {
						state:"0"
					}
					if(index == 0){
						Changestat(data).then(res => {				
							item.btn_icon = '0';
							sessionStorage.setItem("isopen1",false);
							this.isopen1 = false;
							this.$message({
								type: 'success',
								duration: 800,
								message: '关闭开包任务成功!'
							});
						}).catch(() =>{
							this.$message({
								type: 'error',
								duration: 800,
								message: '执行失败!'
							});
						})
					}
					else if(index == 1){
						Changestat2(data).then(res => {
							item.btn_icon = '0';
							this.isopen2 = false;
							sessionStorage.setItem("isopen2",false);
							this.$message({
								type: 'success',
								duration: 800,
								message: '关闭备用任务成功!'
							});
						}).catch(() =>{
							this.$message({
								type: 'error',
								duration: 800,
								message: '执行失败!'
							});
						})
					}
					else{
						keepCarOnline(data).then(res => {
							item.btn_icon = '0';
							this.isopen3 = false;
							sessionStorage.setItem("isopen3",false);
							this.$message({
								type: 'success',
								duration: 800,
								message: '关闭小车在线控制成功!'
							});
						}).catch(() =>{
							this.$message({
								type: 'error',
								duration: 800,
								message: '执行失败!'
							});
						})
					}
				} else {
					let data = {
						state:"1"
					}
					if(index == 0){
						Changestat(data).then(res => {
							item.btn_icon = '1'
							this.isopen1 = true;
							sessionStorage.setItem("isopen1",true);
							this.$message({
								type: 'success',
								duration: 800,
								message: '执行开包任务成功!'
							});
						}).catch(() =>{
							this.$message({
								type: 'error',
								duration: 800,
								message: '执行失败!'
							});
						})
					}
					else if(index == 1){
						Changestat2(data).then(res => {
							item.btn_icon = '1'
							this.isopen2 = true;
							sessionStorage.setItem("isopen2",true);
							this.$message({
								type: 'success',
								duration: 800,
								message: '执行备用任务成功!'
							});
						}).catch(() =>{
							this.$message({
								type: 'error',
								duration: 800,
								message: '执行失败!'
							});
						})
					}
					else if(index == 2){
						keepCarOnline(data).then(res => {
							item.btn_icon = '1'
							this.isopen3 = true;
							sessionStorage.setItem("isopen3",true);
							this.$message({
								type: 'success',
								duration: 800,
								message: '执行小车在线控制成功!'
							});
						}).catch(() =>{
							this.$message({
								type: 'error',
								duration: 800,
								message: '执行失败!'
							});
						})
					}
				}
			},
			goPage(item) { //路由跳转
				this.$router.push(item.path);
			},
			closeDialog() {
				this.dialogVisible = false;
			},
			showModels() {
				this.dialogVisible = true;
			},

			getVehicle() {
				let json = {
					page:this.pageSizes,
					pagie:99
				}
				//获取全部车辆
				getVehicles(json)
					.then(res => {
						// console.log(res, '车辆信息')
						let vehiclesData = JSON.parse(JSON.stringify(res.vehicles));
						this.vehiclesDatas = vehiclesData;
						this.carsinfordata = [];
						for (let index in vehiclesData) {
							let item = {
								id:vehiclesData[index].id,
								title: vehiclesData[index].nickname,
								elect: vehiclesData[index].battery + "%",
							}
							let coordinateoptions = {
								value: '',
								label: ''
							}
							if(vehiclesData[index].is_online == 0){
								item['dispatchstatues'] = 0;
							}
							else{
								item['dispatchstatues'] = 1;
							}
							if (vehiclesData[index].sys_state == "UNKNOWN") {
								item["statues"] = "离线";
								coordinateoptions['value'] = index + 1;
								coordinateoptions['label'] = vehiclesData[index].nickname
								this.coordinateoptions.push(coordinateoptions)
								console.log(this.coordinateoptions)
							} else if (vehiclesData[index].sys_state == "UNAVAILABLE") {
								item["statues"] = "不可执行";
							} else if (vehiclesData[index].sys_state == "IDLE") {
								item["statues"] = "空闲中";
							} else if (vehiclesData[index].sys_state == "EXECUTING") {
								item["statues"] = "执行中";
							} else if (vehiclesData[index].sys_state == "ERROR") {
								item["statues"] = "状态出错";
							} else if (vehiclesData[index].sys_state == "CHARGING") {
								item["statues"] = "充电中";
							} else {
								item["statues"] = "避障中";
							}
							this.carsinfordata.push(item);
						}
					})
			},
			gettempalteMode() {
				GetTemplateslist().then(res => {
					// alert(JSON.stringify(res))
					this.tempalteMode = res.templates
				})
			},

			//获取全部订单
			Getorder() {
				let json = {
					page:this.pageSize,
					filter_by_state:this.filter_by_state
				}
				Getorders(json)
					.then(res => {
						let orderData = JSON.parse(JSON.stringify(res.orders));
						this.tableData = [];
						this.pageCount = res.total;
						for (let index in orderData) {
							let item = {
								"template_name": orderData[index].template_id,
								"Id": orderData[index].id,
								"Status": orderData[index].order_state,
								"ChildStatus": '1',
								"ModelName": orderData[index].template_id,
								"StartEnd": orderData[index].start_station_name + "/" + orderData[index].end_station_name,
								"Type": orderData[index].order_type,
								"Time": orderData[index].create_time,
								"Progress": (Number(orderData[index].total_distance)-Number(orderData[index].distance))/Number(orderData[index].total_distance)*100 + "%",
								"Cars": orderData[index].execute_vehicle_id,
								"OptionUser": orderData[index].user_id,
								"order_state":orderData[index].order_state,
								"create_time":orderData[index].create_time
							}
							
							if(orderData[index].total_distance==0){
								item.Progress = 0;
							}
							if (orderData[index].order_state == "QUEUEING") {
								item.Status = "正在排队";
							} else if (orderData[index].order_state == "CANCELLED") {
								item.Status = "订单被取消";
							} else if (orderData[index].order_state == "EXECUTING") {
								item.Status = "正在执行";
								this.singleVehicle.orderName = orderData[index].battery
								this.getVehicleById(orderData[index].execute_vehicle_id);
							} else if (orderData[index].order_state == "FAILED") {
								item.Status = "订单未能成功执行完";
							} else if (orderData[index].order_state == "DELETED") {
								item.Status = "订单被删除";
							} else if (orderData[index].order_state == "SUCCESS") {
								item.Status = "订单被成功执行完";
							} else if (orderData[index].order_state == "HELD") {
								item.Status = "在执行中手动暂停任务";
							} else if (orderData[index].order_state == "REJECTED") {
								item.Status = "暂停执行";
							} else if (orderData[index].order_state == "HANG") {
								item.Status = "因为错误导致暂停执行 ";
							} else if (orderData[index].order_state == "QUEUED") {
								item.Status = "正在排队 ";
							} else {
								item.Status = "未知 ";
							}

							if (orderData[index].order_type == "NORMAL") {
								item.Type = "工作任务";
							} else if (orderData[index].order_type == "CHARGE") {
								item.Type = "调度任务 ";
							} else {
								item.Type = "其他任务";
							}
							for (let key1 in this.usersData) {
								if (this.usersData[key1].id == orderData[index].user_id) {
									item.OptionUser = this.usersData[key1].username;
								}
							}
							for (let key in this.vehiclesDatas) {
								if (this.vehiclesDatas[key].id == orderData[index].execute_vehicle_id) {
									item.Cars = this.vehiclesDatas[key].nickname;
								}
							}
							for (let te in this.tempalteMode) {
								if (this.tempalteMode[te].id == orderData[index].template_id) {
									item.ModelName = this.tempalteMode[te].template_name;
									item.template_name = this.tempalteMode[te].template_name
								}
							}
							let num = orderData[index].executing_index;
							let missions =  orderData[index].mission;
							let result_strs=""
							if(missions[num]&&missions[num].result_str){
								result_strs = missions[num].result_str;
							}
							result_strs=result_strs.substr(0,result_strs.length-1);
							item.ChildStatus = result_strs;
							this.tableData.push(item);
						}
					})
			},
			//获取全部用户
			GetUser() {
				GetUsers()
					.then(res => {
						this.usersData = JSON.parse(JSON.stringify(res.UsersManagement));
					})
			},
			//获取全部订单模板
			GetTemplate() {
				// GetTemplates()
				// 	.then(res => {
				// 		console.log(res.templates);
				// 		this.templateDatas = JSON.parse(JSON.stringify(res.templates));
				// 	})
			},
			getVehicleById(id) {
				getVehicleByIds()
					.then(res => {
						this.singleVehicle = JSON.parse(JSON.stringify(res));
					})
			}
		},
		async created() {
			if(sessionStorage.getItem("isopen1")){
				this.isopen1 =  sessionStorage.getItem("isopen1");
				if(this.isopen1==true){
					this.carbtn[0].btn_icon=1
				}
				else{
					this.carbtn[0].btn_icon=0
				}
			}
			if(sessionStorage.getItem("isopen2")){
				this.isopen2 =  sessionStorage.getItem("isopen2");
				if(this.isopen2==true){
					this.carbtn[1].btn_icon=1
				}
				else{
					this.carbtn[1].btn_icon=0
				}
			}
			this.GetUser();
			this.getVehicle();
			this.GetTemplate();
			this.gettempalteMode()
			this.Getorder();
		}
	}
</script>

<style lang="less" scoped>
	.right_mapMax {
		position: fixed;
		z-index: 99;
		width: 98%;
		height: 100%;
		background-color: #00122D;
		left: 20px;
		top:0;
		.right_mapMax_Top {
			height: 5%;
			width: 100%;
			background-color: #00122D;

			.exitRe {
				float: right;
			}
		}

		.right_mapMax_Bottom {
			width: 100%;
			height: 95%;
		}
	}

	.IconStart {
		display: inline-block;
		width: 35px;
		height: 20px;
		background: url(../../assets/img/icon／开启@2x.png) no-repeat;
		background-size: 100% 100%;
		// position: relative;
		// top: 5px;
	}

	.IconClose {
		display: inline-block;
		width: 48px;
		height: 24px;
		background: url(../../assets/img/icon／关闭@2x.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: 5px;
	}

	.el-menu-item:hover {
		background: linear-gradient(201deg, #0194E4 0%, #002497 100%) !important;
	}

	.progress_item {
		background: rgba(1, 148, 228, 0.19);
		display: inline-block;
		height: 100%;
		border-radius: 1px;
		position: relative;
		top: 0;
		left: 0;
	}

	.progress_span {
		position: absolute;
		padding-left: 10px;
		line-height: 19px;
		color: #fff;
		top: 0px;
		left: 0px;
		z-index: 10;
	}

	.progress_body {
		border-radius: 1px;
		background: rgba(1, 148, 228, 0.19);
		height: 19px;
		position: relative;
	}

	.cars_item_active {
		background: #00122d;
		box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4);
		border-radius: 2px 2px 0px 0px;
		border: 2px solid #0194e4 !important;
	}

	.dispatch_body {
		margin-top: 10px;
	}

	.elect_body {
		font-weight: 400;
		color: #ffffff;
	}

	.cars_item_status {
		padding-bottom: 6px;
		margin-bottom: 6px;
		border-bottom: 1px solid rgba(1, 148, 228, 0.25);
	}

	.status_tips_body {
		display: inline-block;
		// width: 48px;
		height: 18px;
		background: rgba(249, 185, 14, 0.2);
		border-radius: 0px 100px 100px 0px;

		// opacity: 0.13;
		.status_tips_text {
			display: flex;
			align-items: center;
			padding:0 5px;
			font-size: 12px;
			font-weight: 500;
			line-height: 18px;
			color: #ffdf89;
		}
	}

	.infor_progeress_body {
		display: inline-block;
		width: 31px;
		height: 6px;
		border-radius: 6px;
		position: relative;
		background: rgba(27, 27, 27, 0.37);

		.infor_progeress {
			position: absolute;
			top: 0px;
			left: 0px;
			display: inline-block;
			height: 6px;
			border-radius: 6px;
			background: rgba(255, 223, 137, 1);
		}
	}

	.infor_statues {
		display: inline-block;
		width: 6px;
		border-radius: 6px;
		background: #ffdf89;
		height: 6px;
	}

	.mask_right_infor {
		width: 100%;
		margin-top: 10px;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #1f5eb7;

		.infor_title {
			width: 100%;
			height: 43px;

			font-weight: 500;
			color: #ffffff;
			line-height: 43px;
			text-align: center;
		}

		.infor_item {
			flex: 1;
			display: flex;
			justify-items: center;
			align-items: center;
			padding: 0px 10px;

			.infor_item_title {
				width: 80px;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.41);
			}

			.infor_item_body {
				flex: 1;
				text-align: right;

				font-weight: 400;
				color: #ffffff;
			}
		}
	}

	.mask_icon_img {
		margin-left: 10px;
	}

	.mask_right_bottom {
		height: 30px;
		width: 100%;
		display: flex;
		margin-top: 10px;
		justify-content: flex-end;
		align-items: center;
	}

	.mask_left {
		flex: 3;
	}

	.mask_right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.right_uppermap_mask {
		width: calc(100% - 20px);
		position: absolute;
		padding: 10px;
		top: 0px;
		left: 0px;
		display: flex;
		flex-direction: row;
		pointer-events: none;
		height: calc(100% - 20px);
		background: rgba(0, 1, 7, 0);
	}

	.right_map {
		// background-color: #FFFFFF;
		width: 100%;
		position: relative;
		margin-top: 10px;
		flex: 1;
		min-height: 347px;
	}

	.panel {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: 2px solid;
		border-image: url("../../assets/img/border_two_upper.png") 142 38 128 134 !important;
		border-width: 4.125rem 1.583rem 3.875rem 5.5rem;
		position: relative;
		margin-bottom: 0.833rem;
	}

	.inner {
		position: absolute;
		top: -2.125rem;
		right: -1.583rem;
		bottom: -0.875rem;
		left: -5.5rem;
		padding: 2rem 0.59rem 1rem 0.5rem;
	}

	.body {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;

		.left_body {
			width: 216px;
			height: 100%;
		}

		.right_body {
			margin-left: 15px;
			flex: 1;
			display: flex;
			flex-direction: column;
			width: 80%;

			.right_upper {
				flex: 2;
				display: flex;
				flex-direction: row;

				.right_upper_left {
					width: 40%;
					display: flex;
					flex-direction: column;
                    .alarm_statistics{
						width: 100%;
						height: 300px;
					}
					.right_upper_title {
						height: 35px;
						margin-top: 8px;
						display: flex;
						flex-direction: row;

						.right_uppertitle_left {
							flex: 1;
						}

						.right_uppertitle_right {
							flex: 1;
							text-align: right;
							.all_pul{
								width: 40px;
								height: 40px;
								background: url('../../assets/img/ic_fullscreen_map@2x.png') no-repeat;
								background-size: 100% 100%;
								cursor: pointer;
								float: right;
								margin-left: 24px;
							}
						}
					}

					// background: sienna;
				}

				.right_upper_right {
					flex: 1;
					margin-left: 50px;
					display: flex;
					flex-direction: column;
					.givealarm_child{
						width: 100%;
                        height: 30px;
						display: flex;
						align-items: center;
						>p{
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #F27A7A;
							margin-left: 27px;
							// margin-top: 0;
						}
						>span{
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #F27A7A;
							margin-left: 45px;
						}
						>.top{
							width: 100%;
							height: 15px;
							display: flex;
							align-items: center;
							position: relative;
							>.logcomplete{
								width: 14px;
								height: 14px;
								// background: url('../../../../assets/givealarm/ic_clear_hint_alarm.png') no-repeat;
								background-size: 100%;
								border-radius: 50%;
								margin-right: 12px;
							}
							>.logwarning{
								width: 14px;
								height: 14px;
								// background: url('../../../../assets/givealarm/ic_warning_hint_alarm.png') no-repeat;
								background-size: 100%;
								border-radius: 50%;
								margin-right: 12px;
							}
							>.logalarm{
								width: 14px;
								height: 14px;
								// background: url('../../../../assets/givealarm/ic_hint_alarm.png') no-repeat;
								background-size: 100%;
								border-radius: 50%;
								margin-right: 12px;
							}
							>.content{
								width: 80%;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								font-size: 14px;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #303133;
								line-height: 22px;
								
							}
							>.start{
								font-size: 14px;
								font-family: Microsoft YaHei;
								font-weight: bold;
								color: #5BC267;
								line-height: 22px;
								position: absolute;
								right: 0;
							}
							>.starter{
								font-size: 14px;
								font-family: Microsoft YaHei;
								font-weight: bold;
								color: #EE6666;
								line-height: 22px;
							}
						}
					}
                    .right_upper_top{
						width: 100%;
						height: 295px;
						display: flex;
						justify-content: space-between;
						.right_upper_top_left{
							width: 65%;
							height: 100%;
						}
						.right_upper_top_right{
							width: 30%;
							height: 100%;
							
						}
					}
					.cars_infor_body {
						margin-top: 10px;
						width: 100%;
						height: 80%;
						flex: 1;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						flex-wrap: wrap;
						align-content: space-between;
                        .el-scrollbar{
							.el-scrollbar__wrap{
								overflow-x: hidden;
								ul{
									width: 100%;
									height: 42px;
									background: #092754;
									display: flex;
									align-items: center;
									margin-bottom: 16px;
									>li{
										width: 23%;
										height: 100%;
										display: flex;
										align-items: center;
										justify-content: flex-start;
										font-size: 14px;
										font-family: Microsoft YaHei;
										font-weight: 400;
										color: #FFFFFF;
										>i{
											margin-left: 16px;
										}
									}
								}
							}
						}
						// align-self: flex-end;
						// align-items: flex-end;
						// background: chartreuse;
						.cars_item:hover {
							background: #00122d;
							box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4);
							border-radius: 2px 2px 0px 0px;
							border: 2px solid #0194e4 !important;
						}

						.cars_item {
							width: 23%;
							height: 46%;
							cursor: pointer;
							display: flex;
							flex-direction: column;
							background: rgba(9, 39, 84, 1);
							border: 2px solid rgba(255, 255, 255, 0);
							font-size: 13px;
							.cars_item_body {
								padding: 10px 5px;

								.cars_item_title {
									color: rgba(255, 255, 255, 1);
									font-weight: 500;
								}
							}
						}
					}

					// background: yellow;
				}
			}

			.right_lower {
				width: 100%;
				margin-top: 10px;
				flex: 1;
				position: relative;
				.filter_by_state{
					// position: absolute;
					// right: 40px;
					// top: -55px;
					float: right;
					margin-bottom: 5px;
				}
			}
		}
	}
</style>
<style scoped>
	#addUserDialog .el-dialog {
		background: none;
	}
	/deep/.filter_by_state_select .el-input__inner{
							box-shadow: 0px -1px -38px 0px rgba(0, 162, 253, 0.4);
							border-radius: 2px !important;
							font-weight: 400 !important;
							width: 100%;
							color: #0194E4 !important;
							border: 1px solid #0194E4 !important;
							background: rgba(0, 162, 253, 0) !important;
							height: 30px;
							line-height: 30px;
						}
						
	/deep/.filter_by_state_select .el-input__icon{
		line-height: 30px;
	}
	#addUserDialog .el-dialog .el-dialog__header {
		padding: 55px 60px 10px;
		color: #2DAFF5;
		position: absolute;
		width: 100%;
	}

	/deep/#addUserDialog .el-dialog .el-dialog__header .el-dialog__title {
		color: #2DAFF5;
		position: absolute;
		top: -15px;
		z-index: 99;
	}

	/deep/#addUserDialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
		position: absolute;
		top: 5rem !important;
		right: 11.5rem;
		top: 10px !important;
		z-index: 99;
	}

	/deep/#addUserDialog .el-dialog .el-dialog__body {
		background: url(../../assets/img/dialogBack.png) no-repeat center center;
		background-size: 100% 100%;
		padding: 130px 70px 110px 90px;
		color: #2DAFF5;
		height: 37rem;
		box-sizing: border-box;
		width: 800px !important;
		height: 830px;
		position: absolute;
		top: -100px;
		margin: 0 auto;
	}

	#addUserDialog .el-dialog .el-dialog__body .el-form-item__label {
		color: #red;
	}

	#addUserDialog .el-dialog .el-dialog__body input {
		color: #ddd;
		height: 32px !important;
		line-height: 32px !important;
		-webkit-box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
		box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
		border: 1px solid rgba(1, 148, 228, 0.34) !important;
		background: none !important;
		border-radius: 0 !important;
	}

	#addUserDialog .el-dialog .el-dialog__footer {
		padding: 10px 50px;
		position: absolute;
		right: 0;
		bottom: 50px;
	}
	.el-pagination{
		text-align: center;
	}
</style>