tanyanfei 5 роки тому
батько
коміт
3b6ab03845
8 змінених файлів з 453 додано та 204 видалено
  1. 1 1
      package.json
  2. 18 0
      src/api.js
  3. 2 0
      src/main.js
  4. 0 4
      src/router.js
  5. 164 32
      src/views/Index.vue
  6. 60 24
      src/views/company/Department.vue
  7. 22 40
      src/views/task/Danger.vue
  8. 186 103
      src/views/task/DangerTask.vue

+ 1 - 1
package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "ali-oss": "^6.2.1",
     "cos-js-sdk-v5": "^0.5.20",
-    "echarts": "^4.6.0",
+    "echarts": "^4.8.0",
     "element-ui": "^2.7.2",
     "font-awesome": "^4.7.0",
     "js-base64": "^2.5.2",

+ 18 - 0
src/api.js

@@ -114,4 +114,22 @@ export default {
 	saveDepartment: params => {
 		return axios.post(`${baseURL}/api/admin/department`, params);
 	},
+	updateDepartment: params => {
+		return axios.put(`${baseURL}/api/admin/department`, params);
+	},
+	deleteDepartment: params => {
+		return axios.delete(`${baseURL}/api/admin/department`, {params:params});
+	},
+	//风险点
+	getRiskpointList: params => {
+		return axios.get(`${baseURL}/api/admin/riskpoint/list`,{params:params})
+	},
+	//任务
+	getMonittaskList: params => {
+		return axios.get(`${baseURL}/api/admin/monittask/list`,{params:params})
+	},
+	saveMonittask: params => {
+		return axios.post(`${baseURL}/api/admin/monittask`, params);
+	},
+
 }

+ 2 - 0
src/main.js

@@ -6,6 +6,7 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import 'font-awesome/css/font-awesome.css'
 import api from './api';
+import echarts from 'echarts';
 
 import BaiduMap from 'vue-baidu-map'
 Vue.use(BaiduMap, {
@@ -13,6 +14,7 @@ Vue.use(BaiduMap, {
 })
 
 Vue.use(ElementUI);
+Vue.prototype.$echarts = echarts
 Vue.prototype.$api = api;
 Vue.prototype.store = store;
 Vue.config.productionTip = false

+ 0 - 4
src/router.js

@@ -58,10 +58,6 @@ export default new Router({
         path: '/department',
         component: () => import('./views/company/Department.vue'),
         name: '部门管理'
-      },{
-        path: '/staff',
-        component: () => import('./views/company/Staff.vue'),
-        name: '员工管理'
       },{
         path: '/merterial',
         component: () => import('./views/company/Merterial.vue'),

+ 164 - 32
src/views/Index.vue

@@ -3,28 +3,25 @@
       .title{
         color: #222;
         font-size: 20px;
-        margin-bottom: 30px;
+        margin-bottom: 20px;
+        text-align: center;
       }
       .datas{
         margin-bottom: 60px;
         li{
           list-style: none;
           display: inline-block;
-          width: 20%;
-          margin-left: 20px;
-          margin-bottom: 20px;
-          padding: 32px;
+          // width: 30%;
+          margin-right: 10px;
+          vertical-align: top;
+          padding: 10px 20px;
           border-radius:6px;
           border:1px solid rgba(238,238,238,1);
-          text-align: center;
-          color:#222;
-          font-size: 16px;
-          img{
-            display: block;
-            margin: 10px auto;
+          h4{
+            margin-bottom: 20px;
           }
-          p{
-            font-size: 32px;
+          &>div{
+            margin-bottom: 20px;
           }
         }
       }
@@ -34,30 +31,165 @@
   <section class="index">
     <p>概览</p>
     <div class="content">
-        <h1 class="title">数据总揽</h1>
+        <h1 class="title">巴州区应急管理局风险管控可视化系统</h1>
         <ul class="datas">
           <li>
-            用户总数
-            <!-- <img width="40" src="../images/curstom.png" alt=""> -->
-            <p>123</p>
+              <div id="chart1" style="width: 350px;height:300px;"></div>
+              <div id="chart2" style="width: 350px;height:300px;"></div>
+              <div id="chart3" style="width: 350px;height:300px;"></div>
           </li>
           <li>
-            用户总数
-            <!-- <img width="40" src="../images/curstom.png" alt=""> -->
-            <p>123</p>
-          </li>
-          <li>
-            用户总数
-            <!-- <img width="40" src="../images/curstom.png" alt=""> -->
-            <p>123</p>
-          </li>
-          <li>
-            用户总数
-            <!-- <img width="40" src="../images/curstom.png" alt=""> -->
-            <p>123</p>
+              <h4>行业风险统计</h4>
+              <div id="chart4" style="width: 400px;height:300px;"></div>
+              <h4>企业风险统计</h4>
+              <div id="chart5" style="width: 400px;height:300px;"></div>
           </li>
         </ul>
-        <h1 class="title">最新告警</h1>
     </div>
   </section>
-</template>
+</template>
+<script>
+export default {
+  data(){
+    return{
+    }
+  },
+  methods:{
+    getData(){   
+      // 基于准备好的dom,初始化echarts实例
+      var myChart1 = this.$echarts.init(document.getElementById('chart1'));
+      var myChart2 = this.$echarts.init(document.getElementById('chart2'));
+      var myChart3 = this.$echarts.init(document.getElementById('chart3'));
+      var myChart4 = this.$echarts.init(document.getElementById('chart4'));
+      var myChart5 = this.$echarts.init(document.getElementById('chart5'));
+		  // 指定图表的配置项和数据
+		  var option1 = {
+			  title: {
+				  text: '安全风险实时统计'
+        },
+        color:['#ef686a','#f6b481','#fcd554','#2b94eb'],
+			  tooltip: {formatter: '{b}: {c} ({d}%)'},
+			  legend: {
+          y:'bottom',
+				  data:['重大风险', '较大风险','一般风险','低风险']
+			  },
+			  series: [{
+          type: 'pie',
+          radius: ['45%', '70%'],
+          label: {
+              normal: {
+                  show: false
+              },
+          },
+				  data: [
+                            {value: 100,name:'重大风险'},
+                            {value: 200,name:'较大风险'},
+                            {value: 50,name:'一般风险'},
+                            {value: 20,name:'低风险'},
+                        ]
+			  }]
+      };
+      var option2 = {
+        color:['#3398dc'],
+        tooltip: {formatter: '{b}: {c}'},
+        grid: {
+            left: '1%',
+            right: '1%',
+            bottom: '1%',
+            top:'10px',
+            containLabel: true
+        },
+        xAxis: {
+				  data: ['重大风险', '较大风险','一般风险','低风险']
+			  },
+			  yAxis: {},
+			  series: [{
+          type: 'bar',
+          barWidth: 50,
+          data:  [5, 20, 36, 10]
+        }]
+      };
+      var option3 = {
+			  title: {
+				  text: '安全隐患实时统计'
+        },
+        color:['#ef686a','#2b94eb'],
+			  tooltip: {formatter: '{b}: {c} ({d}%)'},
+			  legend: {
+          y:'bottom',
+				  data:['重大风险','一般风险']
+			  },
+			  series: [{
+          type: 'pie',
+          // radius: ['45%', '70%'],
+          label: {
+              normal: {
+                  show: false
+              },
+          },
+				  data: [
+                            {value: 3,name:'重大风险'},
+                            {value: 10,name:'一般风险'},
+                ]
+			  }]
+      };
+      var option4 = {
+        title: {
+				  text: ''
+        },
+        legend: {
+          // y:'bottom',
+				  data:['重大风险', '较大风险','一般风险','低风险']
+			  },
+        color:['#ef686a','#f6b481','#fcd554','#2b94eb'],
+        tooltip: {formatter: '{b}: {c}'},
+        grid: {
+            left: '1%',
+            right: '1%',
+            bottom: '1%',
+            containLabel: true
+        },
+        xAxis: {
+				  data: ['危险化学品', '煤矿','非煤矿山','工贸行业']
+			  },
+			  yAxis: {},
+			  series: [
+           {
+                name: '重大风险',
+                type: 'bar',
+                data: [320, 332, 301, 334]
+            },
+            {
+                name: '较大风险',
+                type: 'bar',
+                stack:'风险',
+                data: [310, 32, 31, 334]
+            },
+            {
+                name: '一般风险',
+                type: 'bar',
+                stack:'风险',
+                data: [390, 320, 31, 140]
+            },
+            {
+                name: '低风险',
+                type: 'bar',
+                stack:'风险',
+                data: [90, 20, 31, 40]
+            },
+        ]
+      };
+		  // 使用刚指定的配置项和数据显示图表。
+		  myChart1.setOption(option1);
+      myChart2.setOption(option2);  
+      myChart3.setOption(option3);  
+      myChart4.setOption(option4);  
+      myChart5.setOption(option4);  
+    },
+    
+  },
+  mounted(){
+     this.getData()
+  },
+}
+</script>

+ 60 - 24
src/views/company/Department.vue

@@ -32,6 +32,10 @@
         .staff_list{
             width: 68%;
         }
+        
+    }
+    .staffs{
+        margin-right: 10px;
     }
 </style>
 <template>
@@ -42,14 +46,14 @@
             <li>
                 <el-form  size="small">
                     <el-form-item>
-                        <el-input suffix-icon="el-icon-search" v-model="enterprise_name" @change="getData"  placeholder="公司名称"></el-input>
+                        <el-input suffix-icon="el-icon-search" v-model="name" @change="getData"  placeholder="公司名称"></el-input>
                     </el-form-item>
                 </el-form>
                 <el-tree  
                     :data="data"
                     node-key="id"   :props='props'
                     :expand-on-click-node="false">
-                    <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="id=data.id,getDpt()" >
+                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="change(data)" >
                         <span v-if='id==node.id' class="label_name active">{{ node.label }}</span>
                         <span v-else class="label_name">{{ node.label }}</span>
                     </span>
@@ -62,7 +66,7 @@
                         </el-form-item> -->
                         <el-form-item>
                             <!-- <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button> -->
-                            <el-button icon="el-icon-plus" @click="dialogFormVisible=true"  type="primary">新增部门</el-button>
+                            <el-button icon="el-icon-plus" @click="dialogFormVisible=true,dpt={enterprise_id:'',staffusers:[]}"  type="primary">新增部门</el-button>
                         </el-form-item>
                     </el-form>
                 <el-table
@@ -87,7 +91,7 @@
                         label="操作">
                         <template slot-scope="scope">
                             <el-button  @click="viewStaff(scope.row.staffusers)" size="mini" type="warning">查看员工</el-button>
-                            <el-button icon="el-icon-edit" @click="$router.push({path:'/company/add',query:{id:scope.row.id}})" size="mini" type="warning">编辑</el-button>
+                            <el-button icon="el-icon-edit" @click="edit(scope.row)" size="mini" type="warning">编辑</el-button>
                             <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
                         </template>
                         </el-table-column>
@@ -103,12 +107,12 @@
                         <el-input clearable placeholder="请输入部门名称" v-model="dpt.name"></el-input>
             </el-form-item>
             <el-form-item label="部门员工" >
-                <el-tag
+                <el-tag class="staffs"
                 :key="index"
                 v-for="(item,index) in dpt.staffusers"
                 closable  type="info"
                 :disable-transitions="false"
-                @close="handleClose(tag)">
+                @close="handleClose(index)">
                 {{item.name}}
                 </el-tag>
                 &nbsp;
@@ -152,7 +156,7 @@
     <el-dialog title="员工列表" :visible.sync="dialogFormVisible2" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
         <el-table
                         class="table"
-                        :data="staffList" 
+                        :data="staffList"  height="300px"
                         border 
                         style="width: 100%">
                         <el-table-column
@@ -199,8 +203,9 @@ export default {
                 label:'name'
             },
             id:'',
-            dpt:{enterprise_id:'',staffusers:[]},
+            dpt:{enterprise_name:'',enterprise_id:'',staffusers:[]},
             enterprise_name:'',
+            name:'',
             staff:{},
             staffList:[]
 		};
@@ -213,19 +218,22 @@ export default {
             this.form.page=this.$refs.pageButton.page
             this.getData()
         },
+        change(data){
+                this.id=data.id;
+                this.enterprise_name=data.name;
+                this.getDpt();
+        },
         getData(){
             this.loading=true
-            this.$api.getEnterpriseAll({name:this.enterprise_name}).then(res=>{
+            this.$api.getEnterpriseAll({name:this.name}).then(res=>{
                 this.data=res.data.data;
                 this.id=this.data[0].id;
-                this.dpt.enterprise_name=this.data[0].name;
-                this.dpt.enterprise_id=this.id;
+                this.enterprise_name=this.data[0].name;
                 this.getDpt()
             })
         },
         getDpt(){
             var parm=this.form;
-            
             parm.enterprise_id=this.id
             this.$api.getDepartmentList(parm).then(res=>{
                 this.loading=false;
@@ -237,12 +245,12 @@ export default {
                 this.$confirm('确定删除吗', '提示', {
                         type: 'warning'
                     }).then(() => {
-                    this.$api.deleteClass({id:id}).then((res)=>{
+                    this.$api.deleteDepartment({id:id}).then((res)=>{
                             this.$message({
                                 message: '删除成功',
                                 type: 'success'
                             })
-                            this.getData()
+                            this.getDpt()
                     })
                 })
         },
@@ -250,17 +258,38 @@ export default {
             let parm=this.dpt;
             if(!parm.name){
                 this.$message.error('请输入部门名称');
+                return;
             }
-            this.$api.saveDepartment(parm).then(res=>{
-                if(res.data.code==0){
-                      this.$message({message: '添加成功!',type: 'success'});
-                      this.getDpt()
-                      this.dpt.name=''
-                      this.dialogFormVisible=false
-                  }else{
-                      this.$message.error(res.data.message);
-                  }
-            })
+            if(parm.staffusers.length<1){
+                this.$message.error('请添加员工');
+                return;
+            }
+            if(parm.id){     
+                this.$api.updateDepartment(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.$message({message: '修改成功!',type: 'success'});
+                        this.getDpt()
+                        this.dpt={enterprise_id:'',staffusers:[]}
+                        this.dialogFormVisible=false
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }else{
+                parm.enterprise_id=this.id
+                parm.enterprise_name=this.enterprise_name
+                this.$api.saveDepartment(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.$message({message: '添加成功!',type: 'success'});
+                        this.getDpt()
+                        this.dpt={enterprise_id:'',staffusers:[]}
+                        this.dialogFormVisible=false
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }
+            
         },
         addStaff(){
             let parm=this.staff;
@@ -288,6 +317,13 @@ export default {
         viewStaff(data){
             this.dialogFormVisible2=true;
             this.staffList=data
+        },
+        handleClose(index){
+            this.dpt.staffusers.splice(index,1);
+        },
+        edit(data){
+            this.dialogFormVisible=true
+            this.dpt={...data}
         }
     },
 	created(){

+ 22 - 40
src/views/task/Danger.vue

@@ -71,32 +71,21 @@
                     </el-form-item>
                 </el-form>
                 <el-tree  
-                    :data="data"
-                    node-key="id" :default-expanded-keys="[7, 3]"
+                    :data="data" :props='props'
+                    node-key="id" 
                     :expand-on-click-node="false">
                     <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="() => edit(data)" >
                         <span class="label_name"><i class="el-icon-film"></i> {{ node.label }}</span>
                         <span class="edit">
-                        <el-button
-                            type="text"
-                            size="mini"
-                            @click.stop="() => append(data)">
-                            <i class="el-icon-plus"></i>
-                        </el-button>
-                        <el-button
-                            type="text"
-                            size="mini"
-                            @click="() => edit(data)">
-                            <i class="el-icon-edit"></i>
-                        </el-button>
-                        <el-button
-                            type="text"
-                            size="mini"
-                            @click="() => remove(data)">
-                            <i class="el-icon-delete"></i>
-                        </el-button>
+                            <el-button
+                                type="text"
+                                size="mini"
+                                @click.stop="() => append(data)">
+                                <i class="el-icon-plus"></i>
+                            </el-button>
                         </span>
                     </span>
+                        
                 </el-tree>
             </li>
             <li>
@@ -127,29 +116,22 @@ export default {
 	data() {
 		return {
             input1:'',
-            data:[{
-                id: 3,
-                label: '一级 3',
-                children: [{
-                    id: 7,
-                    label: '二级 3-1',
-                    children:[
-                        {
-                            id: 9,
-                            label: '三级 3-1',
-                        }
-                    ]
-                }, {
-                    id: 8,
-                    label: '二级 3-2'
-                }]
-            }],
-            form:{}
+            data:[],
+            form:{},
+            props:{
+                label:'name'
+            },
 		};
 	},
-	methods: {},
+	methods: {
+        getData(){
+            this.$api.getRiskpointList().then(res=>{
+                this.data=res.data.data
+            })
+        }
+    },
 	created(){
-	
+        this.getData();
 	}
 };
 </script>

+ 186 - 103
src/views/task/DangerTask.vue

@@ -1,15 +1,22 @@
 <style lang="scss">
-    .staff{
-        display: flex;
-        justify-content: space-between;
-        &>li{
-            width: 30%;
-            list-style: none;
-            min-height: 70vh;
-            background: #fff;
-            border: 1px solid #d9d9d9;
-            padding:20px 10px;
+    .task{
+        .danger{
+            display: flex;
+            &>li{
+                width: 25%;
+                list-style: none;
+                min-height: 70vh;
+                background: #fff;
+                border: 1px solid #d9d9d9;
+                padding:20px 10px;
+                margin-right: 20px;
+            }
+        }
+        .el-table th{
+            padding:   0;
         }
+        // justify-content: space-between;
+        
         .custom-tree-node{
                     width: 100%;
                     .el-tree-node__content{
@@ -26,104 +33,163 @@
                         }
                     }
         }
-        .staff_list{
-            width: 68%;
+        .form{
+            .el-input,.el-textarea{
+                width: 90%;
+            }
+            .el-select{
+                width: 100%;
+            }
+            .req{
+                color:red;
+                font-weight: 600;
+                margin-left: 5px;
+            }
+        }
+        .company{
+            h1{
+                font-size: 18px;
+                margin-bottom: 20px;
+                button{
+                    float: right;
+                }
+            }
+            p{
+                color: #409EFF;
+                padding: 10px 0;
+                border-bottom: 1px solid #d9d9d9;
+                font-size: 14px;
+                width: 90%;
+                margin: 0 auto;
+            }
         }
     }
 </style>
 <template>
   <section>
-    <p>公司管理 > 员工管理</p>
-    <div class="content">
-        <ul class="staff">
+    <p>任务管理 > 风险点任务</p>
+    <div class="content task">
+        <ul class="danger">
             <li>
-                <el-form  size="small">
+                <el-form size="small" >
                     <el-form-item>
                         <el-input suffix-icon="el-icon-search" v-model="input1" placeholder="公司名称"></el-input>
                     </el-form-item>
                 </el-form>
                 <el-tree  
-                    :data="data"
-                    node-key="id" :default-expanded-keys="[7, 3]"
+                    :data="data" :props='props'
+                    node-key="id" 
                     :expand-on-click-node="false">
                     <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="() => edit(data)" >
                         <span class="label_name"><i class="el-icon-film"></i> {{ node.label }}</span>
-                        <span class="edit">
-                        <el-button
-                            type="text"
-                            size="mini"
-                            @click.stop="() => append(data)">
-                            <i class="el-icon-plus"></i>
-                        </el-button>
-                        <el-button
-                            type="text"
-                            size="mini"
-                            @click="() => edit(data)">
-                            <i class="el-icon-edit"></i>
-                        </el-button>
-                        <el-button
-                            type="text"
-                            size="mini"
-                            @click="() => remove(data)">
-                            <i class="el-icon-delete"></i>
-                        </el-button>
-                        </span>
                     </span>
+                        
                 </el-tree>
             </li>
-            <li class="staff_list">
+            <li style="width:75%;">
                     <el-form label-width="70px" :inline="true" size="small" label-position="left">
                         <el-form-item label="公司名称">
                                 <el-input clearable placeholder="请输入企业名称" v-model="form.name"></el-input>
                         </el-form-item>
                         <el-form-item>
                             <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button>
-                            <el-button  @click="$router.push({path:'/company/add'})"  type="primary">创建任务</el-button>
+                            <el-button  @click="dialogFormVisible=true"  type="primary">创建任务</el-button>
                             <el-button  @click="$router.push({path:'/company/add'})"  type="primary">批量导入任务</el-button>
                         </el-form-item>
                     </el-form>
-                <el-table
-                        class="table"
-                        :data="list" height="54vh"
-                        border  v-loading="loading"
-                        style="width: 100%">
-                        <el-table-column
-                        prop="name" 
-                        label="风险点">
-                        </el-table-column>
-                        <el-table-column
-                        prop="subject_item" 
-                        label="风险描述">
-                        </el-table-column>
-                        <el-table-column
-                        prop="subject_item" 
-                        label="导致后果">
-                        </el-table-column>
-                        <el-table-column
-                        prop="subject_item" 
-                        label="风险级别">
-                        </el-table-column>
-                        <el-table-column
-                        prop="ctime" 
-                        label="工程技术">
-                        </el-table-column>
-                        <el-table-column
-                        prop="ctime" 
-                        label="管控措施">
-                        </el-table-column>
-                        <el-table-column 
-                        prop="zip" 
-                        label="培训教育">
-                        </el-table-column>
-                        <el-table-column 
-                        prop="zip" 
-                        label="个体防护">
-                        </el-table-column>
-                </el-table>
-                <!-- <Page  ref="pageButton"  :total='total' @pageChange='gopage'/> -->
+                    <el-table
+                            class="table"
+                            :data="list" height="60vh"
+                            border  v-loading="loading"
+                            style="width: 100%">
+                            <el-table-column   align="center" label="风险点划分">
+                                <el-table-column  label="编码及子项"  align="center">
+                                    <el-table-column  label="一级子项"></el-table-column>
+                                    <el-table-column  label="二级子项"></el-table-column>
+                                    <el-table-column  label="三级子项"></el-table-column>
+                                    <el-table-column width="200" align="center" prop="name" label="风险描述"></el-table-column>
+                                </el-table-column>
+                            </el-table-column>
+                            <el-table-column  label="安全检查辨识表"  align="center">
+                                <el-table-column width="300" align="center" prop="rec_stand" label="辨识评价标准"></el-table-column>
+                                <el-table-column prop="danger_result" label="导致后果"></el-table-column>
+                                <el-table-column  label="现有管控措施"  align="center">
+                                    <el-table-column prop="monit_tec" label="工程技术"></el-table-column>
+                                    <el-table-column prop="other_method" label="管控措施"></el-table-column>
+                                    <el-table-column prop="monit_edu" label="培训教育"></el-table-column>
+                                    <el-table-column prop="single_defense" label="个体防护"></el-table-column>
+                                    <el-table-column prop="emerg_handle" label="应急处理"></el-table-column>
+                                </el-table-column>
+                            </el-table-column>
+                            <el-table-column label="作用条件危险性评估表"  align="center">
+                                <el-table-column label="风险评估分级">
+                                    <el-table-column width="120" prop="risk_level" label="风险级别"></el-table-column>
+                                </el-table-column>
+                                <el-table-column width="200" prop="monit_method" label="新增风险管控措施或纳入隐患治理及期间的管控措施"></el-table-column>
+                            </el-table-column>
+                            <el-table-column label="风险管控要求"  align="center">
+                                <el-table-column prop="" label="部门"></el-table-column>
+                                <el-table-column prop="held_person" label="责任人"></el-table-column>
+                                <el-table-column prop="held_person_phone" label="电话"></el-table-column>
+                                <el-table-column prop="cycle" label="管控周期"></el-table-column>
+                            </el-table-column>
+                    </el-table>
+                    <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
             </li>
         </ul>
+                    
     </div>
+    <el-dialog title="创建任务" :visible.sync="dialogFormVisible" width="70vw" :close-on-click-modal='false' :close-on-press-escape='false'>
+        <el-form :model="form" label-width="100px" :inline="true">
+            <el-form-item label="责任人">
+                <el-input clearable   v-model="form.held_person_id"></el-input>
+            </el-form-item>
+            <el-form-item label="责任人电话">
+                <el-input clearable   v-model="form.held_person_phone"></el-input>
+            </el-form-item>
+            <el-form-item label="风险描述">
+                <el-input clearable  v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="导致后果">
+                <el-input clearable  v-model="form.danger_result"></el-input>
+            </el-form-item>
+            <el-form-item label="风险级别">
+                <el-input clearable  v-model="form.risk_level"></el-input>
+            </el-form-item>
+            <el-form-item label="工程技术">
+                <el-input clearable  v-model="form.monit_tec"></el-input>
+            </el-form-item>
+            <el-form-item label="管控措施">
+                <el-input clearable  v-model="form.monit_method"></el-input>
+            </el-form-item>
+            <el-form-item label="培训教育">
+                <el-input clearable  v-model="form.monit_edu"></el-input>
+            </el-form-item>
+            <el-form-item label="个体防护">
+                <el-input clearable  v-model="form.single_defense"></el-input>
+            </el-form-item>
+            <el-form-item label="应急处理">
+                <el-input clearable  v-model="form.emerg_handle"></el-input>
+            </el-form-item>
+            <el-form-item label="法律依据">
+                <el-input clearable  v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="新增管控措施">
+                <el-input clearable  v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="管控周期">
+                <el-input clearable  v-model="form.cycle"></el-input>
+            </el-form-item>
+            <el-form-item label="所属部门">
+                <el-input clearable  v-model="form.department_id"></el-input>
+            </el-form-item>
+            
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
+            <el-button size="small" type="primary" @click="add">确 定</el-button>
+        </div>
+    </el-dialog>
   </section>
 </template>
 <script>
@@ -135,25 +201,13 @@ export default {
 	data() {
 		return {
             input1:'',
-            data:[{
-                id: 3,
-                label: '一级 3',
-                children: [{
-                    id: 7,
-                    label: '二级 3-1',
-                    children:[
-                        {
-                            id: 9,
-                            label: '三级 3-1',
-                        }
-                    ]
-                }, {
-                    id: 8,
-                    label: '二级 3-2'
-                }]
-            }],
+            dialogFormVisible:false,
             form:{name:'',page:1,page_size:20},
             list:[{name:'2333'}],
+            data:[],
+            props:{
+                label:'name'
+            },
             total:1,
             loading:false
 		};
@@ -167,13 +221,13 @@ export default {
             this.getData()
         },
         getData(){
-            var parm=this.form;
             this.loading=true
-            // this.$api.getClass(parm).then(res=>{
-            //     this.list=res.data.data.list
-            //     this.total=res.data.data.total
-            //     this.loading=false
-            // })
+            var parm=this.form;
+            this.$api.getMonittaskList(parm).then(res=>{
+                this.list=res.data.data.list
+                this.total=res.data.data.total
+                this.loading=false
+            })
         },
         del(id){
                 this.$confirm('确定删除吗', '提示', {
@@ -188,9 +242,38 @@ export default {
                     })
                 })
         },
+        add(){
+            let parm=this.form;
+            // if(!parm.name){
+            //     this.$message.error('请输入部门名称');
+            //     return;
+            // }
+            if(parm.id){     
+                this.$api.updateDepartment(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.$message({message: '修改成功!',type: 'success'});
+                        this.getData();
+                        this.dialogFormVisible=false;
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }else{
+                this.$api.saveMonittask(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.$message({message: '添加成功!',type: 'success'});
+                        this.getData();
+                        this.dialogFormVisible=false;
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }
+            
+        },
     },
 	created(){
-	
+        this.getData()
 	}
 };
 </script>