<template>
	<div>
		<div class="surveillance_top">
			<el-form ref="form" :model="form" :inline="true">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" placeholder="布控任务名称" style="width:130px" clearable></el-input>
				</el-form-item>
				<el-form-item label="创建人" prop="founder">
					<el-input v-model="form.founder" placeholder="创建人" style="width:120px" clearable></el-input>
				</el-form-item>
				<el-form-item label="处置类型" prop="disposalType">
					<el-radio-group v-model="form.disposalType" size="small">
						<el-radio-button :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio-button>
						<!-- <el-radio-button label="1">抓捕类</el-radio-button>
						<el-radio-button label="2">监控类</el-radio-button>
						<el-radio-button label="3">提示类</el-radio-button> -->
					</el-radio-group>
				</el-form-item>
				<el-form-item label="布控状态" prop="controlState">
					<el-radio-group v-model="form.controlState" size="small">
						<el-radio-button label="0">运行中</el-radio-button>
						<el-radio-button label="1">已暂停</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item style="float:right">
					<el-button type="primary" @click="clickSearch()">搜索</el-button>
					<el-button @click="clickReset('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="surveillance_add">
			<el-button type="primary" @click="clickNews()">新建布控任务</el-button>
		</div>

		<el-dialog title="新建布控任务" :visible.sync="addDialogVisible" width="30%" class="surveillance_addimg"
		 :close-on-click-modal='false' center>

			<el-form :model="addForm" :rules="rules" ref="addForm" label-width="150px" class="demo-ruleForm">
				<el-form-item label="布控任务名称" prop="name">
					<el-input v-model="addForm.name" placeholder="请输入布控任务名称"></el-input>
				</el-form-item>
				<el-form-item label="布控对象" prop="object" style="margin:0px">
					<el-radio v-model="addForm.object" label="1">人像库</el-radio>
					<el-radio v-model="addForm.object" label="2">上传目标照片</el-radio>
				</el-form-item>
				<el-form-item prop="library" v-if="addForm.object == '1'">
					<el-select v-model="addForm.library" filterable multiple collapse-tags placeholder="请选择人像库">
						<el-option v-for="item in options1" :key="item.idFactory" :label="item.factoryName" :value="item.idFactory">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="targetImg" v-if="addForm.object == '2'">
					<span class="surveillance_add_gs">上传头像图片只能是 JPG 、PNG、JPEG格式!</span>
					<div class="surveillance_box">
						<div class="surveillance_img">
							<img v-if='addForm.targetImg' :src="addForm.targetImg" class="pre-img">
							<div v-else class="avatar-uploader-icon">人物图像</div>
						</div>
						<div class="crop-demo-btn">
							上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
						</div>
						<el-dialog title="裁剪图片" :visible.sync="dialogVisible9" width="30%" :close-on-click-modal='false' append-to-body>
							<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;">
							</vue-cropper>
							<span slot="footer" class="dialog-footer">
								<el-button @click="cancelCrop">取 消</el-button>
								<el-button type="primary" @click="clickOK()">确 定</el-button>
							</span>
						</el-dialog>
					</div>
				</el-form-item>
				<el-form-item style="margin-bottom:0px" label="处置类型" prop="disposalType">
					<el-radio v-model="addForm.disposalType" :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio>
					<!-- <el-radio v-model="addForm.disposalType" label="1">抓捕类</el-radio>
					<el-radio v-model="addForm.disposalType" label="2">监控类</el-radio>
					<el-radio v-model="addForm.disposalType" label="3">提示类</el-radio> -->
					<p v-if="addForm.disposalType == '1'" class="add_p">严重告警结果,针对需要立即处理的对象</p>
					<p v-else-if="addForm.disposalType == '2'" class="add_p">普通告警结果，针对需要关注的对象</p>
					<p v-else class="add_p">结果通知，可用于演示或测试使用</p>
				</el-form-item>
				<el-form-item label="布控区域" prop="monitorArea">
					<el-cascader :options="options2" v-model="addForm.monitorArea" clearable placeholder="请选择布控区域" @change="handleChange"
					 :props="{checkStrictly: true }">
					</el-cascader>
				</el-form-item>
				<el-form-item v-if="addForm.monitorArea" label="摄像头列表" prop="cameraList">
					<el-select v-model="addForm.cameraList" multiple filterable collapse-tags placeholder="请选择摄像头">
						<el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="布控阈值(%)" prop="monitorThreshold">
					<el-slider v-model="addForm.monitorThreshold" :step="10" show-input>
					</el-slider>
				</el-form-item>

				<el-form-item label="备注信息" prop="note">
					<el-input v-model="addForm.note" placeholder="请输入备注信息"></el-input>
				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="clickConfirm()" :disabled="addState">确定</el-button>
				<el-button @click="clickCancel('addForm')">取消</el-button>
			</span>
		</el-dialog>

		<el-table :data="tableData" stripe :header-cell-style="{background:'#fff'}" style="width: 100%">
			<el-table-column prop="taskName" label="布控任务名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="controlRegion" label="布控区域" show-overflow-tooltip></el-table-column>
			<el-table-column prop="cameraNames" label="摄像头列表" show-overflow-tooltip>
				<template slot-scope="scope">
					{{handleCamera(scope.row.listfacecamera)}}
				</template>
			</el-table-column>
			<el-table-column prop="disposalType" label="处置类型" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<span>{{scope.row.disposalType == '1' ? '抓捕类' : scope.row.disposalType == '2' ? '监控类' :'提示类'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="isValid" label="布控状态" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<span v-if="scope.row.isValid == '0'" class="s_green"></span>
					<span v-else-if="scope.row.isValid == '1'" class="s_red"></span>
					<span v-if="scope.row.isValid == '0'">运行中</span>
					<span v-else-if="scope.row.isValid == '1'">已暂停</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<div class="s_operation">
						<img class="cz_img" src="../../../assets/img/surveillance_bg.png" alt="" @click="clickEditor(scope.row.idControlTask)">

						<img class="cz_img" v-if="scope.row.isValid == '0' " src="../../../assets/img/surveillance_zt.png" alt="" @click="clickSuspend(scope.row.idControlTask)">
						<img class="cz_img" v-else-if="scope.row.isValid == '1' " src="../../../assets/img/surveillance_bf.png" alt=""
						 @click="clickStart(scope.row.idControlTask)">
						<img class="cz_img" src="../../../assets/img/surveillance_sc.png" alt="" @click="clickDel(scope.row.idControlTask)">
					</div>
				</template>
			</el-table-column>
			<el-table-column label="预警结果" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<el-button type="text" @click="clickCheck(scope.row.taskNo)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="编辑布控任务" :visible.sync="addDialogVisible2" width="30%" class="surveillance_addimg"
		 :close-on-click-modal='false' center>

			<el-form :model="addForm2" :rules="rules2" ref="addForm2" label-width="150px" class="demo-ruleForm">
				<el-form-item label="布控任务名称" prop="taskName">
					<el-input v-model="addForm2.taskName" placeholder="请输入布控任务名称"></el-input>
				</el-form-item>
				<el-form-item label="布控对象" prop="controlObject" style="margin:0px">
					<el-radio disabled v-model="addForm2.controlObject" label="1">人脸库</el-radio>
					<el-radio disabled v-model="addForm2.controlObject" label="2">上传目标照片</el-radio>
				</el-form-item>
				<el-form-item prop="libIds" v-if="addForm2.controlObject == '1'">
					<el-select disabled v-model="addForm2.libIds" multiple placeholder="请选择人脸库">
						<el-option v-for="item in options1" :key="item.idFactory" :label="item.factoryName" :value="item.idFactory">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="targetImg" v-if="addForm2.controlObject == '2'">
					<img :src="addForm2.imgurl" class="avatar">
				</el-form-item>
				<el-form-item style="margin-bottom:0px" label="处置类型" prop="disposalType">
					<el-radio v-model="addForm2.disposalType" :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio>
					<!-- <el-radio v-model="addForm2.disposalType" label="1">抓捕类</el-radio>
					<el-radio v-model="addForm2.disposalType" label="2">监控类型</el-radio>
					<el-radio v-model="addForm2.disposalType" label="3">提示类</el-radio> -->
					<p v-if="addForm2.disposalType == '1'" style="margin:0px">严重告警结果,针对需要立即处理的对象</p>
					<p v-else-if="addForm2.disposalType == '2'" style="margin:0px">普通告警结果，针对需要关注的对象</p>
					<p v-else style="margin:0px">结果通知，可用于演示或测试使用</p>
				</el-form-item><!--  prop="monitorArea" -->
				<el-form-item label="布控区域">
					<el-input disabled v-model="addForm2.controlRegion"></el-input>
				</el-form-item>
				<el-form-item v-if="addForm2.controlRegion" label="摄像头列表" prop="cameraList">
					<el-input disabled v-model="addForm2.listfacecamera"></el-input>
				</el-form-item>
				<el-form-item label="布控阈值(%)" prop="controlThreshold">
					<el-slider v-model="addForm2.controlThreshold" show-input :step="10" disabled>
					</el-slider>
				</el-form-item>
				<el-form-item label="备注信息" prop="remarks">
					<el-input v-model="addForm2.remarks" placeholder="请输入备注信息"></el-input>
				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="clickConfirm2('addForm2')">确定</el-button>
				<el-button @click="clickCancel2('addForm2')">取消</el-button>
			</span>
		</el-dialog>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.pageNo"
		 :page-sizes="[10, 20, 30, 40]" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

	</div>
</template>
<script>
	import {
		log
	} from 'util';
	import debounce from 'lodash/debounce'
	import VueCropper from 'vue-cropperjs';
	export default {
		data() {
			return {
				// 预警类型码表
				warningTypeList: [],
				//新建 按钮
				addState: false,
				state: true,
				//搜索
				form: {
					name: '',
					founder: '',
					starttime: '',
					disposalType: '',
					controlType: [],
					controlState: ''
				},
				//分页查询
				tableData: [],
				//新建
				addDialogVisible: false,
				addDialogVisible2: false,
				addForm: {
					name: '',
					object: '1',
					library: '',
					targetImg: '',
					disposalType: '3',
					monitorType: '1',
					time: '',
					monitorArea: '',
					cameraList: '',
					monitorThreshold: 20,
					police: '1',
					polices: '',
					note: '',
					imageUrl: ''
				},
				uploadAction: '',
				addForm2: {},
				//布控对象
				options1: [],
				props: {
					multiple: true
				},
				//布控区域
				options2: [],
				//摄像头
				options4: [],
				rules: {
					name: [{
						required: true,
						message: '请输入布控任务名称',
						trigger: 'change'
					}],
					object: [{
						required: true,
						message: '请选择布控对象',
						trigger: 'change'
					}],
					library: [{
						required: true,
						message: '请选择人脸库',
						trigger: 'blur'
					}],
					targetImg: [{
						required: true,
						message: '请上传目标图片',
						trigger: 'change'
					}],
					disposalType: [{
						required: true,
						message: '请选择处置类型',
						trigger: 'change'
					}],
					monitorType: [{
						required: true,
						message: '请选择布控类型',
						trigger: 'change'
					}],
					monitorArea: [{
						required: true,
						message: '请选择布控区域',
						trigger: 'change'
					}],
					cameraList: [{
						required: true,
						message: '请选择摄像头(如果没有数据可选，请移至资源-摄像头匹配)',
						trigger: 'change'
					}],
					monitorThreshold: [{
						required: true,
						message: '请选择布控阈值',
						trigger: 'change'
					}],
					police: [{
						required: true,
						message: '请选择报警接收',
						trigger: 'change'
					}],

				},
				rules2: {
					taskName: [{
						required: true,
						message: '请输入布控任务名称',
						trigger: 'change'
					}],
					controlObject: [{
						required: true,
						message: '请选择布控对象',
						trigger: 'change'
					}],
					libIds: [{
						required: true,
						message: '请选择人脸库',
						trigger: 'change'
					}],
					targetImg: [{
						required: true,
						message: '请上传目标图片',
						trigger: 'change'
					}],
					disposalType: [{
						required: true,
						message: '请选择处置类型',
						trigger: 'change'
					}],
					monitorType: [{
						required: true,
						message: '请选择布控类型',
						trigger: 'change'
					}],
					monitorArea: [{
						required: true,
						message: '请选择布控区域',
						trigger: 'change'
					}],
					controlThreshold: [{
						required: true,
						message: '请选择布控阈值',
						trigger: 'change'
					}],
					police: [{
						required: true,
						message: '请选择报警接收',
						trigger: 'change'
					}],

				},
				//分页
				total: 0,
				pages: {
					pageNo: 1,
					pageSize: 10,
					note: {}
				},
				surveillanceCheck: false,
				targetImg: '',
				//修改 id
				editorId: '',
				imgSrc: '',
				imgBase64: '',
				dialogVisible9: false
			}
		},
		computed: {
			handleCamera() {
				return function(val) {
					let cameraNames = ""
					val.forEach((item, index, arr) => {
						if (arr.length == 1) {
							cameraNames = item.cameraName
						} else if (index < arr.length - 1) {
							cameraNames = cameraNames + item.cameraName + "，"
						} else {
							cameraNames = cameraNames + item.cameraName
						}
					})
					return cameraNames
				}
			}
		},
		components: {
			VueCropper
		},
		methods: {
			data(pageObj) {
				this.$http.post("/control/tasklist", this.pages)
					.then(res => {
						if (res.data.code == 0) {
							this.tableData = res.data.data.records
							this.total = parseInt(res.data.data.total)
						}
					})
					.catch(err => {
						console.log(err);

					})
			},
			//搜索
			clickSearch() {
				this.pages.note = {
					taskName: this.form.name,
					createBy: this.form.founder,
					disposalType: this.form.disposalType,
					isValid: this.form.controlState
				}
				this.data(this.pages)
			},
			//重置
			clickReset(formName) {
				this.$refs[formName].resetFields();
				this.pages.note = {
					taskName: '',
					createBy: '',
					disposalType: '',
					isValid: ''
				}
				this.data(this.pages)
			},
			//新建
			clickNews() {
				this.addDialogVisible = true
				this.addState = false
			},
			//新建 确认
			clickConfirm: debounce(function() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.addState = true
						let monitorArea = ''
						if (this.addForm.monitorArea) {
							monitorArea = this.addForm.monitorArea.join(',')
						}
						let data = []
						if (this.addForm.object == '1') {
							data = {
								taskName: this.addForm.name,
								controlObject: this.addForm.object,
								libIds: this.addForm.library,
								controlThreshold: this.addForm.monitorThreshold / 100,
								remarks: this.addForm.note,
								disposalType: this.addForm.disposalType,
								controlType: 0,
								controlRegion: monitorArea,
								listcamera: this.addForm.cameraList,
								imgurl: this.addForm.targetImg
							}
						} else if (this.addForm.object == '2') {
							data = {
								taskName: this.addForm.name,
								controlObject: this.addForm.object,
								libIds: this.targetImg.split(','),
								controlThreshold: this.addForm.monitorThreshold / 100,
								remarks: this.addForm.note,
								disposalType: this.addForm.disposalType,
								controlType: 0,
								controlRegion: monitorArea,
								listcamera: this.addForm.cameraList,
								imgurl: this.addForm.targetImg
							}
						}
						this.$http.post("/control/inserttask", data)
							.then(res => {
								if (res.data.code == 0) {
									this.addState = true
									this.addDialogVisible = false
									this.$refs.addForm.resetFields();
									this.addForm.targetImg = ''
									this.data(this.pages)
								} else if (res.data.code == 60001) {
									this.$message.warning(res.data.message);
								}

							})
							.catch(err => {
								console.log(err);

							})
					} else {
						return false;
					}
				});
			}),
			//新建 取消
			clickCancel(formName) {
				this.addDialogVisible = false
				this.$refs[formName].resetFields();
				this.addForm.targetImg = ''
			},
			//编辑
			clickEditor(id) {
				this.addDialogVisible2 = true
				this.editorId = id
				this.$http.get(`/control/viewcontrol/${id}`)
					.then(res => {
						if (res.data.code == 0) {
							this.addForm2 = res.data.data
							this.addForm2.controlThreshold = res.data.data.controlThreshold * 100
							this.addForm2.controlRegion = res.data.data.controlRegion.split(',')
							let a = ''
							for (let i of this.addForm2.listfacecamera) {
								a += i.cameraName + '、'
							}
							this.addForm2.listfacecamera = a
						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			//确认 编辑
			clickConfirm2() {
				let data = {
					taskName: this.addForm2.taskName,
					disposalType: this.addForm2.disposalType,
					remarks: this.addForm2.remarks,
					idControlTask: this.editorId
				}
				this.$http.put('/control/updatetask', data)
					.then(res => {
						if (res.data.code == 0) {
							this.addDialogVisible2 = false
							this.data(this.pages)
						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			//开始
			clickStart(id) {
				this.$http.post(`/control/resumecontrol/${id}`)
					.then(res => {
						if (res.data.code == 0) {
							this.data(this.pages)
							this.$message({
								type: "success",
								message: "开始"
							});
						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			//暂停
			clickSuspend(id) {
				this.$http.post(`/control/suspendcontrol/${id}`)
					.then(res => {
						if (res.data.code == 0) {
							this.data(this.pages)
							this.$message({
								type: "success",
								message: "暂停"
							});
						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			//恢复
			clickRestore(id) {
				this.$http.post(`/control/suspendcontrol/${id}`)
					.then(res => {
						if (res.data.code == 0) {
							this.data(this.pages)
							this.$message({
								type: "success",
								message: "运行中"
							});
						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			clickCancel2() {
				this.addDialogVisible2 = false
			},
			//删除
			clickDel(id) {
				this.$confirm("此操作将确认删除该条信息, 是否继续?", "提示", {
						confirmButtonText: "确 定",
						cancelButtonText: "取 消",
						type: "warning"
					})
					.then(() => {
						this.$http.delete(`/control/deletetask/${id}`)
							.then(res => {
								if (res.data.code == 0) {
									this.$message({
										type: "success",
										message: "删除成功!"
									});
									this.data(this.pages)
								} else {
									this.$message.warning(res.data.message);
								}

							})
							.catch(err => {
								console.log(err);

							})
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			//查看啊
			clickCheck(id) {
				this.$router.push({
					name: 'monitoring-warning',
					params: {
						taskId: id
					}
				})
			},
			//分页
			handleSizeChange(val) {
				this.pages.pageSize = val
				this.handleCurrentChange(this.pages.pageNo)
			},
			handleCurrentChange(val) {
				this.pages.pageNo = val
				this.pages.note = {
					taskName: this.form.name,
					createBy: this.form.founder,
					disposalType: this.form.disposalType,
					isValid: this.form.controlState
				}

				this.data(this.pages)
			},
			//新建 上传图片
			setImage(e) {
				const file = e.target.files[0];
				if (!file.type.includes('image/')) {
					return;
				}
				//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
				const reader = new FileReader();
				reader.onload = (event) => {
					this.dialogVisible9 = true;
					this.imgSrc = event.target.result;
					this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
				};
				reader.readAsDataURL(file);
			},
			cropImage() {
				this.imgBase64 = this.$refs.cropper.getCroppedCanvas().toDataURL();
			},
			cancelCrop() {
				this.dialogVisible9 = false;
				this.addForm.targetImg = ''
			},
			clickOK() {
				if (this.imgBase64) {
					let compareRequestVo = {
						urlList: []
					}
					compareRequestVo.urlList.push(this.imgBase64)
					this.$http.post("/control/getImage", compareRequestVo)
						.then(res => {
							if (res.data.code == 0) {
								this.dialogVisible9 = false
								this.addForm.targetImg = res.data.data.data.url
							} else if (res.data.code == 60001) {
								this.$message.warning(res.data.message);
							}
						})
						.catch(err => {
							console.log(err);
						})
				}
				//this.dialogVisible = false
			},
			myUpload(content) {
				let file = new FormData();
				file.append("file", content.file);
				this.$http.post("/control/addtaskfaceFile", file)
					.then(res => {
						if (res.data.code == 0) {
							this.targetImg = res.data.data.libid
							this.addForm.targetImg = res.data.data.url

						} else if (res.data.code == 60001) {
							this.$message.error(res.data.message)
						}

					})
					.catch(err => {
						console.log(err);
					})
			},
			beforeAvatarUpload(file) {
				const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type)

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 、PNG、JPEG格式!');
				}
				return isJPG;
			},
			//编辑 上传图片
			handleAvatarSuccess2(res, file) {
				this.imageUrl2 = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload2(file) {
				const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type)

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 、PNG、JPEG格式!');
				}
				return isJPG;
			},
			//码表
			getCode() {
				//人像库 码表
				let pages = {
					pageNo: 1,
					pageSize: 99999,
					note: {}
				}
				this.$http.post("/Resources/libraryPage", pages)
					.then(res => {
						this.options1 = res.data.data.records
					})
					.catch(err => {
						console.log(err);
					})
				//布控区域 码表
				this.$http.get("/camera/getRegion").then(res => {
					if (res.data.code === 0) {
						this.options2 = res.data.data
					}
				})
			},
			//选择 布控区域
			handleChange(value) {
				let ids = JSON.parse(JSON.stringify(value))
				let regionId = ids[ids.length - 1]

				this.$http.get(`/camera/getRegion/unControl/${regionId}`)
					.then(res => {
						if (res.data.code == 0) {
							this.options4 = res.data.data
						}
					})
					.catch(err => {
						console.log(err);
					})
			}
		},
		created() {
			this.data(this.pages)
			this.getCode()

			this.$http.get("sys/dict/data/findByType/warningType").then(res => {
				if (res.data.code === 0) {
					let positionType = res.data.data
					this.warningTypeList = []
					positionType.forEach(item => {
						this.warningTypeList.push({
							label: item.dictLabel,
							value: item.dictValue
						})
					})
				} else {
					this.$message.error(res.data.msg)
				}
			})
		}
	}
</script>

<style scoped>
	/* 新建 图片 样式 */
	.surveillance_box {
		width: 300px;
		height: 150px;
		display: flex
	}

	.crop-demo-btn {
		position: relative;
		width: 70px;
		height: 40px;
		line-height: 40px;
		margin-top: 55px;
		margin-left: 30px;
		background-color: #ECF5FF;
		color: #409eff;
		border: 1px solid #409eff;
		font-size: 14px;
		border-radius: 4px;
		box-sizing: border-box;
		cursor: pointer;
		text-align: center
	}

	.crop-input {
		position: absolute;
		width: 100px;
		height: 40px;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: pointer;
	}

	.pre-img {
		width: 150px;
		height: 150px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}

	.surveillance_top {
		height: 100%;
		background: rgba(255, 255, 255, 1);
		border-radius: 4px;
	}

	.surveillance_top>>>.el-form-item {
		margin: 10px;
	}

	.surveillance_add {
		margin: 10px 0px 10px 0px;
	}

	.s_green {
		width: 10px;
		height: 10px;
		background: rgba(69, 255, 170, 1);
		display: inline-block;
		border-radius: 50%;
		margin-right: 10px;
		box-shadow: 0px 0px 4px 0px rgba(69, 255, 170, 1);
	}

	.s_red {
		display: inline-block;
		width: 10px;
		height: 10px;
		background: rgba(255, 52, 62, 1);
		border-radius: 50%;
		margin-right: 10px;
		box-shadow: 0px 0px 4px 0px rgba(255, 52, 62, 1);
	}

	.s_gray {
		display: inline-block;
		width: 10px;
		height: 10px;
		background: rgba(165, 175, 193, 1);
		border-radius: 50%;
		margin-right: 10px;
		box-shadow: 0px 0px 4px 0px rgba(165, 175, 193, 1);
	}

	.el-icon-edit,
	.el-icon-caret-right,
	.el-icon-delete-solid {
		cursor: pointer;
	}

	.cz_img {
		width: 16px;
		height: 16px;
		cursor: pointer;
		margin-right: 20px;
	}

	.cz_imgs {
		width: 16px;
		height: 16px;
		margin-right: 20px;
	}

	.el-dialog__title {
		font-weight: bold
	}

	/* 新建 上传图片 */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
		background-color: #FBFDFF;
		font-size: 18px
	}

	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}

	.add_p {
		margin-top: -16px;
		margin-bottom: 0px;
		color: rgba(153, 153, 153, 1);
	}

	.returnback {
		cursor: pointer;
		margin-top: 0px;
	}

	.clearfix {
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.surveillance_add .surveillance_add_gs {
		display: block;
		font-size: 10px
	}
</style>
