up

src/api.js

@@ -123,6 +123,19 @@ export default {
 	deleteDepartment: params => {
 		return axios.delete(`${baseURL}/api/admin/department`, {params:params});
 	},
+	//员工
+	getStaffuserList: params => {
+		return axios.get(`${baseURL}/api/admin/staffuser/list`,{params:params})
+	},
+	saveStaffuser: params => {
+		return axios.post(`${baseURL}/api/admin/staffuser`, params);
+	},
+	updateStaffuser: params => {
+		return axios.put(`${baseURL}/api/admin/staffuser`, params);
+	},
+	deleteStaffuser: params => {
+		return axios.delete(`${baseURL}/api/admin/staffuser`, {params:params});
+	},
 	//风险点
 	getRiskpointList: params => {
 		return axios.get(`${baseURL}/api/admin/riskpoint/list`,{params:params})

src/router.js

@@ -11,14 +11,14 @@ export default new Router({
       show: 0
     },
     {
-      path: '/data',
+      path: '/',
       name: '概览',
       icon: 'el-icon-s-data',
       component: () => import('./views/Home.vue'),
       show: 1,
       isLeaf: 1,
       children: [{
-        path: '/data',
+        path: '/',
         component: () => import('./views/Data.vue'),
         name: '概览'
       }, ]
@@ -32,7 +32,7 @@ export default new Router({
       isLeaf: 1,
       children: [{
         path: '/govermentData',
-        component: () => import('./views/Index.vue'),
+        component: () => import('./views/GovermentData.vue'),
         name: '政府概览'
       }, ]
     },
@@ -45,7 +45,7 @@ export default new Router({
       isLeaf: 1,
       children: [{
         path: '/companyData',
-        component: () => import('./views/Index1.vue'),
+        component: () => import('./views/CompanyData.vue'),
         name: '企业概览'
       }, ]
     },
@@ -84,6 +84,10 @@ export default new Router({
         path: '/department',
         component: () => import('./views/company/Department.vue'),
         name: '部门管理'
+      },{
+        path: '/staff',
+        component: () => import('./views/company/Staff.vue'),
+        name: '员工管理'
       }]
     },
     {
@@ -127,18 +131,28 @@ export default new Router({
       }]
     },
     {
-      path: '/',
+      path: '/merterial',
       name: '资料管理',
       change:1,
       icon: 'el-icon-document-copy',
       component: () => import('./views/Home.vue'),
       show: 1,
-      isLeaf: 0,
+      isLeaf: 1,
       children: [{
         path: '/merterial',
         component: () => import('./views/material/Index.vue'),
         name: '资料管理'
-      },{
+      }]
+    },
+    {
+      path: '/frendlink',
+      name: '友情链接',
+      change:1,
+      icon: 'el-icon-paperclip',
+      component: () => import('./views/Home.vue'),
+      show: 1,
+      isLeaf: 1,
+      children: [{
         path: '/frendlink',
         component: () => import('./views/material/Frendlink.vue'),
         name: '友情链接'

src/views/Index1.vue

@@ -54,7 +54,7 @@
       .datas{
         // margin-bottom: 60px;
         display: flex;     
-        li{
+        &>li{
           list-style: none;
           padding-right: 20px;
           vertical-align: top;

src/views/Data.vue

@@ -1,97 +1,672 @@
 <style lang="scss">
-    .all_data{
+  .index{
+      .content{
+        background: #151932;
+        color:#fff;
+        padding:0 20px;
+        position:  relative;
+        .max,.min{
+          position: absolute;
+          top: 40px;
+          right: 20px;
+          cursor: pointer;
+          z-index: 999;
+        }
+        .min{
+          display: none;
+        }
+      }
+      #fixed{
+        position: fixed;
+        width: 100%;
+        height: 100vh;
+        left: 0;
+        top: 0;
+        z-index: 99999;
+        overflow: auto;
+        .all{
+          top: 80px!important;
+        }
+        .max{
+          display: none;
+        }
+        .min{
+          display: inline-block;
+        }
+      }
+      .title{
+        text-align: center;
+        margin-bottom: 30px;
+        position: relative;
+        span{
+          position: absolute;
+          top: 10px;
+          width: 100%;
+          text-align: center;
+          left: 0;
+          left: 0;
+          right: 0;
+          margin: auto;
+          font-size: 25px;
+          line-height: 70px;
+          font-weight:300;
+        }
+      }
+      .datas{
+        // margin-bottom: 60px;
+        display: flex;     
+        &>li{
+          list-style: none;
+          padding-right: 30px;
+          vertical-align: top;
+          .li{
+            background: rgba(39, 51, 76, 0.64);
+            margin-bottom: 30px;
+            padding: 20px;
+            position: relative;
+            &::before{
+              content: url(../images/bk.png);
+              position: absolute;
+              right:0;
+              top:-5px;
+              transform: rotate(90deg);
+            }
+            &::after{
+              content: url(../images/bk.png);
+              position: absolute;
+              right:0;
+              bottom:-5px;
+              transform: rotate(180deg);
+            }
+            .top{
+              position: absolute;
+              left:0;
+              top:0;
+            }
+            .bottom{
+              position: absolute;
+              left:0;
+              bottom:0;
+              transform: rotate(-90deg);
+            }
+            .all{
+              font-size: 48px;
+              color: #fff;
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 75px;
+              margin: auto;
+              width: 100px;
+              text-align: center;
+              z-index: 999;
+              span{
+                color: #D2D9E3;
+                font-size: 12px;
+                display: block;
+              }
+            }
+          }
+          h4{
+            margin-bottom: 20px;
+            color:#fff;
+          }
+          .count{
+            margin-bottom: 50px;
+            margin-top: 27px;
+            span{
+              padding: 0 10px;
+              display: inline-block;
+              width: 160px;
+              height: 28px;
+              font-size: 14px;
+              line-height: 28px;
+              padding-left: 40px;
+              margin-bottom: 20px;
+              margin-right: 60px;
+            }
+            .span1{
+              background: url(../images/hy.png);
+            }
+            .span2{
+              background: url(../images/qy.png);
+              margin-right: 0;
+            }
+            .span3{
+              background: url(../images/fxd.png);
+            }
+            .span4{
+              background: url(../images/gkrw.png);
+              margin-right: 0;
+            }
+          }
+          table{
+            width: 100%;
+            thead td{
+              font-size: 16px;
+            }
+            td{
+              font-size: 14px;
+              padding: 5px;
+              color:#D2D9E3;
+              line-height: 25px;
+            }
+          }
+        }
+      }
+      .company_top{
         li{
-            display: inline-block;
-            padding: 50px;
-            border: 1px solid #d9d9d9;
-            list-style: none;
-            margin-right: 20px;
+          list-style: none;
+          color: #D2D9E3;
+          line-height: 25px;
+          font-size: 14px;
+          display: flex;
+          vertical-align: middle;
+          span{
+            display: block;
+            // width: 8%;
             text-align: center;
-            font-size: 14px;
+            min-width: 34px;
+            line-height: 38px;
+            img{
+              position: relative;
+              top:5px;
+              // left:3px;
+            }
+          }
+          .second{
+            width: 58%;
+            padding:0 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            // text-align: left;
+            // padding-left: 10px;
+          }
         }
-        h4{
-            margin: 20px 0;
+        .thead{
+          font-size: 16px;
         }
-        .table thead th{
-            background: #fff;
+        .outer_div{
+          height: 190px;
+          overflow: hidden;
+          .inner_div{
+            position: relative;
+            animation:move 15s infinite linear;
+          }
         }
-    }
+        @keyframes move {
+           0%{
+              transform: translateY(0);
+          }
+          100%{
+              transform: translateY(-228px);
+          }
+        }
+      }
+  }
 </style>
 <template>
-    <section>
-        <p>概览</p>
-        <div class="content all_data">
-            <ul>
-                <li>
-                    <img src="../images/zf.png" width="50" alt=""><br>
-                    政府数量 100
-                </li>
-                <li>
-                    <img src="../images/fz.png" width="50" alt=""><br>
-                    企业数量 100
-                </li>
-                <li>
-                    <img src="../images/dp.png" width="50" alt=""><br>
-                    风险点 100
-                </li>
-            </ul>
-            <h4>最新告警</h4>
-            <el-table
-                class="table"
-                :data="list" 
-                 v-loading="loading" 
-                style="width: 100%">
-                <el-table-column
-                prop="name"  width="300"
-                label="管辖单位">
-                </el-table-column>
-                <el-table-column
-                prop="area" 
-                label="企业名称">
-                </el-table-column>
-                <el-table-column
-                prop="parent_name" 
-                label="风险点">
-                </el-table-column>
-                <el-table-column
-                prop="category" 
-                label="告警详情">
-                </el-table-column>
-                <el-table-column
-                prop="ctime"  width="200"
-                label="告警时间">
-                </el-table-column>
-        </el-table>
-        </div>
-
-
-     
-    </section>
+  <section class="index">
+    <div class="content" :id="fullscreen">
+        <img @click="max" class="max" src="../images/max.png" alt="">
+        <img @click="min" class="min" src="../images/min.png" alt="">
+        <h1 class="title">
+          <img height="90px" width="100%" src="../images/bg_1.jpg" alt="">
+          <span>{{info.realname}}可视化系统</span>
+        </h1>
+        <ul class="datas">
+          <li style="width:30%;">
+              <div class="li">
+                <img class="top" src="../images/bk.png" alt="">
+                <h4>安全风险实时统计</h4>
+                <div style="position:relative;">
+                  <p class="all">
+                    32   <span>总风险(起)</span>
+                  </p>
+                  <div id="chart1" style="width: 100%;height:250px;"></div>
+                </div>
+                <div id="chart2" style="width: 100%;height:300px;"></div>
+                <img class="bottom" src="../images/bk.png" alt="">
+              </div>
+              <div class="li">
+                <img class="top" src="../images/bk.png" alt="">
+                <h4>安全隐患实时统计</h4>
+                <div style="position:relative;">
+                  <p class="all" style="top:75px;">
+                    24   <span>总隐患数(起)</span>
+                  </p>
+                  <div id="chart3" style="width: 100%;height:250px;"></div>
+                </div>
+                <img class="bottom" src="../images/bk.png" alt="">
+              </div>
+          </li>
+          <li  style="width:45%">
+            <div class="li">
+                <img class="top" src="../images/bk.png" alt="">
+                <h4>实时监测</h4>
+                <p class="count">
+                  
+                  <span class="span1">政府5个</span>
+                  <span class="span2">企业5个</span><br>
+                  <span class="span3">风险点5个</span>
+                  <span class="span4">管控任务5个</span>
+                </p>
+                <h4>行业风险统计</h4>
+                <div id="chart4" style="width: 100%;height:315px;"></div>
+                <br><br>
+                <h4>企业风险统计</h4>
+                <div id="chart5" style="width: 100%;height:315px;"></div>
+                <img class="bottom" src="../images/bk.png" alt="">
+            </div>
+          </li>
+          <li style="width:25%;padding:0;">
+            <div class="li">
+              <img class="top" src="../images/bk.png" alt="">
+              <h4>企业告警TOP5</h4>
+              <ol class="company_top">
+                <li class="thead"><span>序号</span><span class="second">企业名称</span><span>告警次数</span></li>
+                <div class="outer_div">
+                  <div class="inner_div">
+                    <li>
+                      <span><img src="../images/1.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/2.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/3.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>4</span>
+                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>5</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>6</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/1.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/2.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/3.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>4</span>
+                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>5</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>6</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                  </div>
+                </div>
+              </ol>
+             
+              <img class="bottom" src="../images/bk.png" alt="">
+            </div>
+            <div class="li">
+              <img class="top" src="../images/bk.png" alt="">
+              <h4>风险企业TOP5</h4>
+              <div id="chart6" style="width: 100%;height:230px;"></div>
+              <img class="bottom" src="../images/bk.png" alt="">
+            </div>
+            <div class="li">
+              <img class="top" src="../images/bk.png" alt="">
+              <h4>隐患企业TOP5</h4>
+              <div id="chart7" style="width: 100%;height:230px;"></div>
+              <img class="bottom" src="../images/bk.png" alt="">
+            </div>
+          </li>
+        </ul>
+    </div>
+  </section>
 </template>
 <script>
+import echarts from 'echarts';
 export default {
   data(){
     return{
-      form:{name:'',page:1,page_size:20},
-      activeName:"1",
-      total:1,
-      list:[{name:'2333'}],
-      loading:false
+      fullscreen:'',
+      info:{}
     }
   },
   methods:{
-        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
-            // })
-        }
+    getData(){   
+      // 基于准备好的dom，初始化echarts实例
+      var myChart1 = this.$echarts.init(document.getElementById('chart1'),'dark');
+      var myChart2 = this.$echarts.init(document.getElementById('chart2'),'dark');
+      var myChart3 = this.$echarts.init(document.getElementById('chart3'),'dark');
+      var myChart4 = this.$echarts.init(document.getElementById('chart4'),'dark');
+      var myChart5 = this.$echarts.init(document.getElementById('chart5'),'dark');
+      var myChart6 = this.$echarts.init(document.getElementById('chart6'),'dark');
+      var myChart7 = this.$echarts.init(document.getElementById('chart7'),'dark');
+      this.myChart1=myChart1;
+      this.myChart2=myChart2;
+      this.myChart3=myChart3;
+      this.myChart4=myChart4;
+      this.myChart5=myChart5;
+      this.myChart6=myChart6;
+      this.myChart7=myChart7;
+      // 指定图表的配置项和数据
+      let color=['#dc402c','#ee5930','#fcd865','#3074b5']
+		  var option1 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:color,
+			  tooltip: {formatter: '{b}: {c} ({d}%)'},
+			  legend: {
+          y:'bottom',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  data:['重大风险', '较大风险','一般风险','低风险']
+			  },
+			  series: [{
+          type: 'pie',
+          radius: ['55%', '60%'],
+          label: {
+              normal: {
+                  show: false
+              },
+          },
+				  data: [
+                            {value: 100,name:'重大风险'},
+                            {value: 200,name:'较大风险'},
+                            {value: 50,name:'一般风险'},
+                            {value: 200,name:'低风险'},
+                        ]
+			  }]
+      };
+      var option2 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:color,
+        tooltip: {formatter: '{b}: {c}'},
+        grid: {
+            left: '1%',
+            right: '1%',
+            bottom: '30px',
+            // top:'50px',
+            containLabel: true
+        },
+        xAxis: {
+          data: ['重大风险', '较大风险','一般风险','低风险'],
+			  },
+			  yAxis: {
+          axisLine:{
+            show:false
+          },
+          splitLine:{
+              show:true,
+              lineStyle:{
+                type:'solid',
+                color:'#414B66'
+              }
+          },
+        },
+			  series: [{
+          type: 'bar',
+          barWidth: 20,
+          data:  [
+            {
+              value:20,
+              itemStyle:{
+                color:color[0]
+              }
+            },{
+              value:60,
+              itemStyle:{
+                color:color[1]
+              }
+            },{
+              value:120,
+              itemStyle:{
+                color:color[2]
+              }
+            },{
+              value:204,
+              itemStyle:{
+                color:color[3]
+              }
+            },
+          ],
+        }]
+      };
+      var option3 = {
+        backgroundColor:'rgba(0,0,0,0)',
+			  title: {
+				  text: ''
+        },
+        color:['#dc402c','#fcd865'],
+			  tooltip: {formatter: '{b}: {c} ({d}%)'},
+			  legend: {
+          y:'bottom',
+          itemWidth:8,
+          itemHeight:8,
+				  data:['重大隐患','一般隐患']
+			  },
+			  series: [{
+          type: 'pie',
+          radius: ['55%', '60%'],
+          label: {
+              normal: {
+                  show: false
+              },
+          },
+				  data: [
+                            {value: 3,name:'重大隐患'},
+                            {value: 10,name:'一般隐患'},
+                ]
+			  }]
+      };
+      var option4 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        title: {
+				  text: ''
+        },
+        legend: {
+          y:'bottom',
+          x:'left',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  data:['重大风险', '较大风险','一般风险','低风险']
+			  },
+        color:color,
+        tooltip: {formatter: '{b}: {c}'},
+        grid: {
+            left: '1%',
+            right: '1%',
+            top: '10px',
+            bottom:'40px',
+            containLabel: true
+        },
+        xAxis: {
+				  data: ['危险化学品', '煤矿','非煤矿山','工贸行业']
+			  },
+			  yAxis: {
+          axisLine:{
+            show:false
+          },
+          splitLine:{
+              show:true,
+              lineStyle:{
+                type:'solid',
+                color:'#414B66'
+              }
+          },
+        },
+			  series: [
+           {
+                name: '重大风险',
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: [320, 332, 301, 334]
+            },
+            {
+                name: '较大风险',
+                type: 'bar',
+                stack:'风险',
+                data: [310, 32, 31, 334]
+            },
+            {
+                name: '一般风险',
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: [390, 320, 31, 140]
+            },
+            {
+                name: '低风险',
+                type: 'bar',
+                stack:'风险',
+                barWidth:20,
+                data: [90, 20, 31, 40]
+            },
+        ]
+      };
+      var option6 = {
+        backgroundColor:'rgba(0,0,0,0)',
+        color:['#3398dc'],
+        tooltip: {formatter: '{b}: {c}'},
+        legend: {
+          y:'bottom',
+          x:'left',
+          itemWidth:8,
+          itemHeight:8,
+          textStyle:{
+            color:'#8C8C8C',
+          },
+				  data:['风险点', '管控任务']
+			  },
+        grid: {
+            left: '1%',
+            right: '1%',
+            bottom: '10px',
+            top:'10px',
+            containLabel: true
+        },
+        yAxis: {
+          data: ['巴中达芙妮', '巴中达芙妮2','巴中达芙妮3','巴中达芙妮4'], 
+			  },
+			  xAxis: {
+          show:false
+        },
+			  series: [
+          {
+                name: '风险点',
+                type: 'bar',
+                barWidth:10,
+                data: [320, 332, 301, 334],
+                itemStyle: {
+                      color: new echarts.graphic.LinearGradient(
+                          0, 0, 0, 1,
+                          [
+                              {offset: 0, color: '#FFEE7F'},
+                              {offset: 1, color: '#E8B35F'}
+                          ]
+                      )
+                },
+          },
+          {
+                name: '管控任务',
+                type: 'bar',
+                barWidth:10,
+                data: [30, 132, 201, 34],
+                itemStyle: {
+                      color: new echarts.graphic.LinearGradient(
+                          0, 0, 0, 1,
+                          [
+                              {offset: 0, color: '#7AF7FF'},
+                              {offset: 1, color: '#3687FF'}
+                          ]
+                      )
+                },
+          },
+        ]
+      };
+		  // 使用刚指定的配置项和数据显示图表。
+		  myChart1.setOption(option1);
+      myChart2.setOption(option2);  
+      myChart3.setOption(option3);  
+      myChart4.setOption(option4);  
+      myChart5.setOption(option4);  
+      myChart6.setOption(option6);  
+      myChart7.setOption(option6);  
+      window.addEventListener("resize", () => {
+        myChart1.resize();
+        myChart2.resize();
+        myChart3.resize();
+        myChart4.resize();
+        myChart5.resize();
+        myChart6.resize();
+        myChart7.resize();
+      })
+    },
+    reload(){
+        this.myChart1.resize();
+        this.myChart2.resize();
+        this.myChart3.resize();
+        this.myChart4.resize();
+        this.myChart5.resize();
+        this.myChart6.resize();
+        this.myChart7.resize();
+    },
+    max(){
+     this.fullscreen='fixed';
+     let _this=this;
+     setTimeout(() => {
+        _this.reload()
+      }, 200)
+    },
+    min(){
+     this.fullscreen='';
+     let _this=this;
+     setTimeout(() => {
+        _this.reload()
+      }, 200)
+    }
+  },
+  mounted(){
+     this.getData()
   },
   created(){
-    //   this.getData()
+    this.$api.getInfo().then(res=>{
+				this.info=res.data.data
+		})
   }
 }
-</script>
+</script>

src/views/Index.vue

@@ -55,7 +55,7 @@
       .datas{
         // margin-bottom: 60px;
         display: flex;     
-        li{
+        &>li{
           list-style: none;
           padding-right: 30px;
           vertical-align: top;
@@ -154,6 +154,56 @@
           }
         }
       }
+      .company_top{
+        li{
+          list-style: none;
+          color: #D2D9E3;
+          line-height: 25px;
+          font-size: 14px;
+          display: flex;
+          vertical-align: middle;
+          span{
+            display: block;
+            // width: 8%;
+            text-align: center;
+            min-width: 34px;
+            line-height: 38px;
+            img{
+              position: relative;
+              top:5px;
+              // left:3px;
+            }
+          }
+          .second{
+            width: 58%;
+            padding:0 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            // text-align: left;
+            // padding-left: 10px;
+          }
+        }
+        .thead{
+          font-size: 16px;
+        }
+        .outer_div{
+          height: 190px;
+          overflow: hidden;
+          .inner_div{
+            position: relative;
+            animation:move 15s infinite linear;
+          }
+        }
+        @keyframes move {
+           0%{
+              transform: translateY(0);
+          }
+          100%{
+              transform: translateY(-228px);
+          }
+        }
+      }
   }
 </style>
 <template>
@@ -197,7 +247,7 @@
                 <h4>实时监测</h4>
                 <p class="count">
                   <span class="span1">行业5个</span>
-                  <span class="span2">企业5个</span>
+                  <span class="span2">企业5个</span><br>
                   <span class="span3">风险点5个</span>
                   <span class="span4">管控任务5个</span>
                 </p>
@@ -213,14 +263,74 @@
             <div class="li">
               <img class="top" src="../images/bk.png" alt="">
               <h4>企业告警TOP5</h4>
-              <table cellpadding='0' cellspacing='0'>
-                <thead><td>序号</td><td>企业名称</td><td>告警次数</td></thead>
-                <tr><td><img src="../images/1.png" alt=""></td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
-                <tr><td><img src="../images/2.png" alt=""></td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
-                <tr><td><img src="../images/3.png" alt=""></td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
-                <tr><td>&nbsp;4</td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
-                <tr><td>&nbsp;5</td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
-              </table>
+              <ol class="company_top">
+                <li class="thead"><span>序号</span><span class="second">企业名称</span><span>告警次数</span></li>
+                <div class="outer_div">
+                  <div class="inner_div">
+                    <li>
+                      <span><img src="../images/1.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/2.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/3.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>4</span>
+                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>5</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>6</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/1.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/2.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span><img src="../images/3.png" alt=""></span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>4</span>
+                      <span class="second">巴中达芙妮巴中达芙妮巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>5</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                    <li>
+                      <span>6</span>
+                      <span class="second">巴中达芙妮</span>
+                      <span>20</span>
+                    </li>
+                  </div>
+                </div>
+              </ol>
+             
               <img class="bottom" src="../images/bk.png" alt="">
             </div>
             <div class="li">

src/views/company/Department.vue

@@ -46,7 +46,7 @@
 </style>
 <template>
   <section>
-    <p>公司管理 > 部门列表</p>
+    <p>公司管理 > 部门管理</p>
     <div class="content">
         <ul class="staff">
             <li class="companies">
@@ -96,7 +96,7 @@
                         prop="zip"  width="230"
                         label="操作">
                         <template slot-scope="scope">
-                            <el-button  @click="viewStaff(scope.row.staffusers)" size="mini" type="warning">查看员工</el-button>
+                            <el-button  @click="viewStaff(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>
@@ -148,6 +148,7 @@
             </el-form-item>
             <el-form-item label="账号类型">
                 <el-select clearable v-model="staff.utype" placeholder="请选择">
+                    <el-option label="公司级" value="公司级"></el-option>
                     <el-option label="部门级" value="部门级"></el-option>
                     <el-option label="岗位级" value="岗位级"></el-option>
                 </el-select>
@@ -159,7 +160,7 @@
         </div>
     </el-dialog>
 
-    <el-dialog title="员工列表" :visible.sync="dialogFormVisible2" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
+    <el-dialog title="员工列表" :visible.sync="dialogFormVisible2"  :close-on-click-modal='false' :close-on-press-escape='false'>
         <el-table
                         class="table"
                         :data="staffList"  height="300px"
@@ -181,6 +182,13 @@
                         prop="utype" 
                         label="账号类型">
                         </el-table-column>
+                        <el-table-column   width="150"
+                        label="操作">
+                        <template slot-scope="scope">
+                            <el-button icon="el-icon-edit" @click="editStaff(scope.row)" size="mini" type="warning">编辑</el-button>
+                            <el-button icon="el-icon-delete" @click="delStaff(scope.row.id,scope.$index)" size="mini"  type="danger">删除</el-button>
+                        </template>
+                        </el-table-column>
                 </el-table>
         <!-- <div slot="footer" class="dialog-footer">
             <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
@@ -260,6 +268,20 @@ export default {
                     })
                 })
         },
+        delStaff(id,index){
+                this.$confirm('确定删除吗', '提示', {
+                        type: 'warning'
+                    }).then(() => {
+                    this.$api.deleteStaffuser({id:id}).then((res)=>{
+                            this.$message({
+                                message: '删除成功',
+                                type: 'success'
+                            })
+                            this.staffList.splice(index,1)
+                            this.getDpt()
+                    })
+                })
+        },
         add(){
             let parm=this.dpt;
             if(!parm.name){
@@ -299,7 +321,7 @@ export default {
         },
         addStaff(){
             let parm=this.staff;
-            parm.id=0;
+            
             if(!parm.name){
                 this.$message.error('请输入员工名称');
                 return;
@@ -316,13 +338,29 @@ export default {
                 this.$message.error('请选择账号类型');
                 return;
             }
-            this.dpt.staffusers.push(parm);
-            this.staff={}
-            this.dialogFormVisible1=false
+            if(parm.id){
+                this.$api.updateStaffuser(parm).then(res=>{
+                    if(res.data.code==0){
+                        // this.getDpt()
+                        this.viewStaff(parm.department_id)
+                        this.staff={}
+                        this.dialogFormVisible1=false
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }else{
+                parm.id=0;
+                this.dpt.staffusers.push(parm);
+                this.staff={}
+                this.dialogFormVisible1=false
+            }
         },
-        viewStaff(data){
-            this.dialogFormVisible2=true;
-            this.staffList=data
+        viewStaff(id){
+            this.$api.getStaffuserList({department_id:id}).then(res=>{
+                this.staffList=res.data.data.list
+                this.dialogFormVisible2=true;
+            })
         },
         handleClose(index){
             this.dpt.staffusers.splice(index,1);
@@ -330,7 +368,11 @@ export default {
         edit(data){
             this.dialogFormVisible=true
             this.dpt={...data}
-        }
+        },
+        editStaff(data){
+            this.dialogFormVisible1=true
+            this.staff={...data}
+        },
     },
 	created(){
         this.getData()

src/views/company/Staff.vue

@@ -2,6 +2,12 @@
     .staff{
         display: flex;
         justify-content: space-between;
+        .companies{
+                height: 75vh;
+                overflow: auto;
+                margin-right: 10px;
+                overflow-x: hidden;
+        }
         &>li{
             width: 30%;
             list-style: none;
@@ -18,6 +24,9 @@
                     .label_name{
                         font-size: 14px;
                     }
+                    .active{
+                        color:#1989FA;
+                    }
                     .edit{
                         float: right;
                         i{
@@ -29,6 +38,10 @@
         .staff_list{
             width: 68%;
         }
+        
+    }
+    .staffs{
+        margin-right: 10px;
     }
 </style>
 <template>
@@ -36,29 +49,30 @@
     <p>公司管理 > 员工管理</p>
     <div class="content">
         <ul class="staff">
-            <li>
+            <li class="companies">
                 <el-form  size="small">
                     <el-form-item>
-                        <el-input suffix-icon="el-icon-search" v-model="input1" 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" 
+                    node-key="id"   :props='props'
                     :expand-on-click-node="false">
-                    <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="() => edit(data)" >
-                        <span class="label_name">{{ node.label }}</span>
+                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="change(data)" >
+                        <span v-if='id==data.id' class="label_name active">{{ node.label }}</span>
+                        <span v-else class="label_name">{{ node.label }}</span>
                     </span>
                 </el-tree>
             </li>
             <li class="staff_list">
                     <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 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 icon="el-icon-plus" @click="$router.push({path:'/company/add'})"  type="primary">新增员工</el-button>
+                            <!-- <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button> -->
+                            <el-button icon="el-icon-plus" @click="dialogFormVisible1=true,staff={}"  type="primary">新增员工</el-button>
                         </el-form-item>
                     </el-form>
                 <el-table
@@ -67,34 +81,30 @@
                         border  v-loading="loading"
                         style="width: 100%">
                         <el-table-column
-                        type="selection" fixed="left"
-                        width="40">
-                        </el-table-column>
-                        <el-table-column
                         prop="name" 
-                        label="员工名称">
+                        label="员工姓名">
                         </el-table-column>
                         <el-table-column
-                        prop="subject_item" 
-                        label="联系电话">
+                        prop="username" 
+                        label="账号">
                         </el-table-column>
                         <el-table-column
-                        prop="subject_item" 
-                        label="公司名称">
+                        prop="department_name" 
+                        label="部门">
                         </el-table-column>
                         <el-table-column
-                        prop="subject_item" 
-                        label="部门">
+                        prop="phone" 
+                        label="联系电话">
                         </el-table-column>
                         <el-table-column
-                        prop="ctime"  width="200"
+                        prop="ctime" 
                         label="时间">
                         </el-table-column>
                         <el-table-column fixed="right"
-                        prop="zip"  width="170"
+                        prop="zip"  width="150"
                         label="操作">
                         <template slot-scope="scope">
-                            <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,6 +113,43 @@
             </li>
         </ul>
     </div>
+
+ 
+
+    <el-dialog title="新增员工" :visible.sync="dialogFormVisible1" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
+        <el-form size="small" label-width="80px">
+            <el-form-item label="姓名">
+                <el-input clearable  v-model="staff.name"></el-input>
+            </el-form-item>
+            <el-form-item label="账号">
+                <el-input clearable  v-model="staff.username"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+                <el-input clearable type="password" v-model="staff.password"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话">
+                <el-input clearable  v-model="staff.phone"></el-input>
+            </el-form-item>
+            <el-form-item label="账号类型">
+                <el-select clearable v-model="staff.utype" placeholder="请选择">
+                    <el-option label="公司级" value="公司级"></el-option>
+                    <el-option label="部门级" value="部门级"></el-option>
+                    <el-option label="岗位级" value="岗位级"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="部门" v-if='staff.utype!="公司级"'>
+                <el-select  v-model="staff.department_id"  clearable  placeholder="请选择">
+                        <el-option v-for="(item,index) in dptList" :key="index" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
+            <el-button size="small" type="primary" @click="addStaff">确 定</el-button>
+        </div>
+    </el-dialog>
+
+  
   </section>
 </template>
 <script>
@@ -113,22 +160,23 @@ export default {
     },
 	data() {
 		return {
-            input1:'',
-            data:[{
-                id: 3,
-                label: '一级 3',
-                children: [{
-                    id: 7,
-                    label: '二级 3-1'
-                }, {
-                    id: 8,
-                    label: '二级 3-2'
-                }]
-            }],
-            form:{name:'',page:1,page_size:20},
-            list:[{name:'2333'}],
+            dialogFormVisible:false,
+            dialogFormVisible1:false,
+            dialogFormVisible2:false,
+            data:[],
+            form:{page:1,page_size:20},
+            list:[],
             total:1,
-            loading:false
+            loading:false,
+            props:{
+                label:'name'
+            },
+            id:'',
+            dpt:{enterprise_name:'',enterprise_id:'',staffusers:[]},
+            enterprise_name:'',
+            name:'',
+            staff:{},
+            dptList:[]
 		};
 	},
 	methods: {
@@ -139,31 +187,111 @@ export default {
             this.form.page=this.$refs.pageButton.page
             this.getData()
         },
+        change(data){
+                this.id=data.id;
+                this.enterprise_name=data.name;
+                this.getDpt();
+                this.$api.getDepartmentList({enterprise_id:data.id}).then(res=>{
+                    this.dptList=res.data.data.list;
+                })
+        },
         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
-            // })
+            this.$api.getEnterpriseList({name:this.name}).then(res=>{
+                this.data=res.data.data.list;
+                // this.id=this.data[0].id;
+                // this.enterprise_name=this.data[0].name;
+                this.change(this.data[0])
+            })
+        },
+        //获取员工列表
+        getDpt(){
+            var parm=this.form;
+            parm.enterprise_id=this.id
+            this.$api.getStaffuserList(parm).then(res=>{
+                this.loading=false;
+                this.list=res.data.data.list;
+                this.total=res.data.data.total
+            })
         },
         del(id){
                 this.$confirm('确定删除吗', '提示', {
                         type: 'warning'
                     }).then(() => {
-                    this.$api.deleteClass({id:id}).then((res)=>{
+                    this.$api.deleteStaffuser({id:id}).then((res)=>{
                             this.$message({
                                 message: '删除成功',
                                 type: 'success'
                             })
-                            this.getData()
+                            this.getDpt()
                     })
                 })
         },
+        addStaff(){
+            let parm=this.staff;
+            
+            if(!parm.name){
+                this.$message.error('请输入员工名称');
+                return;
+            }
+            if(!parm.username){
+                this.$message.error('请输入账号');
+                return;
+            }
+            if(!parm.password){
+                this.$message.error('请输入密码');
+                return;
+            }
+            if(!parm.utype){
+                this.$message.error('请选择账号类型');
+                return;
+            }
+            if(parm.utype!='公司级' && !parm.department_id){
+                this.$message.error('请选择部门');
+                return;
+            }
+            if(parm.id){
+                this.$api.updateStaffuser(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.getDpt()
+                        this.staff={}
+                        this.$message({
+                                message: '修改成功',
+                                type: 'success'
+                        })
+                        this.dialogFormVisible1=false
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }else{
+                parm.id=0;
+                parm.enterprise_id=this.id
+                this.$api.saveStaffuser(parm).then(res=>{
+                    if(res.data.code==0){
+                        this.getDpt()
+                        this.staff={}
+                        this.$message({
+                                message: '新增成功',
+                                type: 'success'
+                        })
+                        this.dialogFormVisible1=false
+                    }else{
+                        this.$message.error(res.data.message);
+                    }
+                })
+            }
+        },
+        handleClose(index){
+            this.dpt.staffusers.splice(index,1);
+        },
+        edit(data){
+            this.dialogFormVisible1=true
+            this.staff={...data}
+        },
     },
 	created(){
-        
+        this.getData()
 	}
 };
 </script>

src/views/material/Frendlink.vue

@@ -45,7 +45,7 @@
         </el-table>
         <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
         <el-dialog
-            title="新增资料" center
+            title="新增友链" center
             :visible.sync="dialogVisible"
             width="500px">
             <el-form label-width="60px">