~xingchuan/SewerAndRainNetwork.git

			@@ -1,45 +1,160 @@
			<template>
			<el-dialog class="emergency" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag >
			<!-- 基础信息 -->
			<div class="basicInformation">
			<div>
			<h3 class="panel-title">演练信息</h3>
			<ul>
			<li>事件类型：</li>
			<li>事件位置：</li>
			<li>位置描述：</li>
			<li>事件时间：</li>
			<li>附件：<a href="javascript:;">附件1</a><a href="javascript:;">附件1</a></li>
			</ul>
			<h3 class="panel-title">预案匹配</h3>
			<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="name" label="预案名称"></el-table-column>
			<el-table-column prop="define" label="预案定义"></el-table-column>
			<el-table-column prop="hierarchy" label="预案层级"></el-table-column>
			<el-table-column prop="classification" label="预案分类"></el-table-column>
			<el-table-column label="附件">
			<template>
			<a href="javascript:;">预案</a>
			</template>
			</el-table-column>
			</el-table>
			</div>
			<div>
			<div class="panel-title">搜索</div>
			<div class="emergency">
			<el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag >
			<!-- 基础信息 -->
			<div class="basicInformation" v-if="CZFX">
			<div>
			<h3 class="panel-title">演练信息</h3>
			<ul>
			<li>事件类型：</li>
			<li>事件位置：</li>
			<li>位置描述：</li>
			<li>事件时间：</li>
			<li>附件：<a href="javascript:;">附件1</a><a href="javascript:;">附件1</a></li>
			</ul>
			<h3 class="panel-title">预案匹配</h3>
			<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="name" label="预案名称"></el-table-column>
			<el-table-column prop="define" label="预案定义"></el-table-column>
			<el-table-column prop="hierarchy" label="预案层级"></el-table-column>
			<el-table-column prop="classification" label="预案分类"></el-table-column>
			<el-table-column label="附件">
			<template>
			<a href="javascript:;">预案</a>
			</template>
			</el-table-column>
			</el-table>
			<el-button type="primary" size="mini" @click="isShowFenXi=!isShowFenXi">分析</el-button>
			</div>
			<!-- 分析界面 -->
			<div v-if="isShowFenXi">
			<div class="panel-title">处置分析</div>
			<div class="area-selected">
			<el-button type="primary" class="el-icon-location" size="mini"></el-button>
			<el-button type="primary" class="el-icon-location" size="mini"></el-button>
			<el-select v-model="value" filterable placeholder="请选择" size="mini">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<el-button type="primary" class="el-icon-search" size="mini"></el-button>
			</div>
			<div>
			<div class="analysis-btn">
			<div>
			<el-button type="primary" size="mini" >重置分析条件</el-button>
			<el-button type="primary" size="mini" @click="CZFX=!CZFX" >开始分析</el-button>
			</div>
			</div>
			</div>
			</div>
			</div>
			<!-- 开始分析界面 -->
			<div v-else class="fenXiChuZhi">
			<div>
			<div class="panel-title">事件基本信息</div>
			<ul>
			<li>
			<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
			<div style="margin: 15px 0;"></div>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
			<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>
			<p>事件管线</p>
			<span>生产一区管线A</span>
			<span>含油污水</span>
			<span>直埋</span><span>无缝钢管</span><span>拦截设施：<i>a阀门</i></span>
			</li>
			<li>
			<p>事件上游管线</p>
			<span>生产一区管线A</span>
			<span>含油污水</span>
			<span>直埋</span><span>无缝钢管</span><span>拦截设施：<i>a阀门</i></span>
			</li>
			</ul>
			</div>
			<div>
			<div class="panel-title">建议处置措施</div>
			<div class="footer">
			<el-button type="primary" size="mini">横纵断面</el-button>
			<el-button type="primary" size="mini" @click="showCalculate=!showCalculate">事故水计算</el-button>
			</div>
			<table>
			<tr>
			<th>建议处置措施</th>
			<th>预览</th>
			</tr>
			<tr>
			<td> 1.关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流</td>
			<td></td>
			</tr>
			<tr>
			<td> 1.关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流</td>
			<td></td>
			</tr>
			</table>
			</div>
			<div class="filteringInformation">
			<div class="header">
			<div>
			<ul>
			<li>内排口 <span>共1条</span></li>
			<li>外排口<span>共2条</span></li>
			<li>内排口 <span>共1条</span></li>
			<li>外排口<span>共2条</span></li>
			<li>内排口 <span>共1条</span></li>
			<li>外排口<span>共2条</span></li>
			</ul>
			</div>
			<div class="area-selected" style="justify-items: center">
			<el-button type="primary" class="el-icon-location" size="mini"></el-button>
			<el-button type="primary" class="el-icon-location" size="mini"></el-button>
			<el-select v-model="value" filterable placeholder="请选择" size="mini">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<el-button type="primary" class="el-icon-search" size="mini"></el-button>
			<el-input placeholder="审批人" size="mini" style="width: 60px"></el-input>
			<el-button type="primary" size="mini">查询</el-button>
			</div>
			</div>
			<div class="content">
			<ul>
			<li><el-button type="primary" size="mini">应急基础</el-button></li>
			<li><el-button type="primary" size="mini">应急基础</el-button></li>
			<li><el-button type="primary" size="mini">应急基础</el-button></li>
			<li><el-button type="primary" size="mini">应急基础</el-button></li>
			</ul>
			<el-table :data="tableData2" style="width: 80%">
			<el-table-column prop="date" label="日期" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			<el-table-column prop="address" label="地址"></el-table-column>
			</el-table>
			</div>
			<div class="footer">
			<el-button type="primary" size="mini">生成报告</el-button>
			<el-button type="primary" size="mini" @click="CZFX=!CZFX">返回</el-button>
			</div>
			</div>
			</div>
			</div>
			</el-dialog>
			<!-- -->
			</el-dialog>
			<el-dialog class="calculate" :visible.sync="showCalculate" title="事故水有效容积计算" :modal="false" v-dialogDrag>
			<ul>
			<li>事故水流量：<el-input size="mini" style="width: 60px"></el-input>m3/h</li>
			<li>事故时间：<el-input size="mini" style="width: 60px"></el-input>h</li>
			<li>事故物料量：<el-input size="mini" style="width: 60px"></el-input>m3</li>
			<li>转存量：<el-input size="mini" style="width: 60px"></el-input>m3</li>
			<li>消防水流量：<el-input size="mini" style="width: 60px"></el-input>h</li>
			<li>消防时间：<el-input size="mini" style="width: 60px"></el-input>h</li>
			<li>降雨量：<el-input size="mini" style="width: 60px"></el-input>mm</li>
			<li>汇水面积：<el-input size="mini" style="width: 60px"></el-input>m2</li>
			<li>生产废水量：<el-input size="mini" style="width: 60px"></el-input>m3</li>
			<li>收集池余量：<el-input size="mini" style="width: 60px"></el-input>m3</li>
			</ul>
			<ul>
			<li>事故水容积：<el-input size="mini" style="width: 60px"></el-input>m3</li>
			<li>是否大于收集池余量：<el-input size="mini" style="width: 60px"></el-input></li>
			</ul>
			<div class="footer">
			<el-button type="primary" size="mini">计算</el-button>
			<el-button type="primary" size="mini">确认</el-button>
			<el-button type="primary" size="mini">重置</el-button>
			</div>
			</el-dialog>
			</div>
			</template>

			<script>
			@@ -60,19 +175,36 @@
			checkAll: false,
			checkedCities: ['上海', '北京'],
			cities: cityOptions,
			isIndeterminate: true
			isIndeterminate: true,
			value: '',
			options: [{ value: '500', label: '500m' }, { value: '1000', label: '1km' }, { value: '2000', label: '2km' }, { value: '5000', label: '5km' }, { value: '10000', label: '10km' }],
			isShowFenXi: false,
			CZFX: true,
			tableData2: [{
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1518 弄'
			}, {
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1517 弄'
			}, {
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1519 弄'
			}, {
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1516 弄'
			}],
			showCalculate: false
			}
			},
			methods: {
			handleCheckAllChange (val) {
			this.checkedCities = val ? cityOptions : []
			this.isIndeterminate = false
			},
			handleCheckedCitiesChange (value) {
			const checkedCount = value.length
			this.checkAll = checkedCount === this.cities.length
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
			}

			},
			mounted () {

			}
			}
			</script>
			@@ -80,10 +212,70 @@
			<style scoped lang="less">
			.emergency{
			/deep/ .el-dialog{
			width: 750px;
			width: 450px;
			}
			/deep/ .el-dialog__body{
			padding: 5px;
			}
			.panel-title{
			text-align: left;
			padding: 5px 0 0 0;
			}
			.basicInformation{
			.area-selected{
			display: flex;
			justify-content:flex-end;
			align-items : center;
			}
			.analysis-btn{
			display: flex;
			justify-content:space-between;
			align-items : center;
			}
			}
			.fenXiChuZhi{
			display: flex;
			flex-wrap: wrap;
			>div{width: 50%}
			.filteringInformation{
			width: 100%;
			.header{
			display: flex;
			justify-content: space-between;
			ul{
			display: flex;
			li{
			span{
			display: block;
			}
			}
			}
			}
			.content{
			display: flex;
			}
			}
			}
			.footer{
			display: flex;
			justify-content:flex-end
			}
			.calculate{
			ul{
			display: flex;
			flex-wrap: wrap;
			li{
			width: 50%;
			}
			}
			/deep/ .el-dialog{
			left: 810px;
			}
			}
			}
			.emergency .widt800{
			/deep/ .el-dialog{
			width: 800px;
			}
			}
			</style>