计划线路及首页介绍

src/components/map/index.vue

@@ -2,7 +2,7 @@
 <div style="width:100%;height:100%">
   <div style="width:100%;height:100%">
     <div id="map" ref="rootmap"><div id="popup"></div></div>
-     <div id="textInfo">我是text文本信息</div>
+     <!-- <div id="textInfo" style="display:none">我是text文本信息</div> -->
   </div>
 
   <div class="iconSelect" v-if="iconSelect == 1">
@@ -91,6 +91,7 @@ import { Feature } from "ol";
 // import {Vector as SourceVec} from "ol/source";
 // import {Feature} from "ol";
 import videodiv from "@/components/Videoplayer/index.vue"
+import { getResource } from "@/api/qdtl/data";
 import {LineString, Point} from "ol/geom";
 import { scale } from 'ol/coordinate';
 import { getLineData } from "@/api/qdtl/data";
@@ -102,13 +103,15 @@ import {toStringHDMS} from 'ol/coordinate';
 export default {
   props: {
       pointObj:{type:Object},
-      isEdit:false
+      isEdit:false,
+      isLine:false,
+      lineLocations:{type:Array,default:[]},
   },
   dicts: ['tl_static_type','tl_area_type','tl_dt_type'],
   data() {
     return {
       iconSelectArea:true,
-      iconSelect:1,
+      iconSelect:0,
       checkList:[],
       map: null,
       typeSelect:'Point',
@@ -164,11 +167,14 @@ export default {
   mounted() {
     this.initdev();
     this.initPoint();
-    this.getTrain(),
+    // this.getTrain(),
     this.getLineList();
     window.videosize = "1x1";
     // this.addpoint(point);
     var that = this
+    if(this.isLine){
+            this.getResource();
+    }
     this.map.on("click", function (e) {
           //  that.addMarker(e.coordinate,'专家站点.png',0.2);
             var pixel = that.map.getEventPixel(e.originalEvent);
@@ -190,6 +196,37 @@ export default {
                                   that.handleOpen()
                                 }, 1000);
                          }
+                         if(that.isLine){
+                           if(tadata.type == 'selected'){
+                                  var style =  new Style({
+                                    image: new Icon({
+                                        color: "#eee",
+                                        crossOrigin: "anonymous",
+                                        src: require("../../assets/images/icons/location.png"), //本地的样式
+                                        scale:0.6
+          
+                                })
+                              })
+                              tadata.type = 'location'
+                              feature.setStyle(style);
+                              that.locationDelete(tadata.data);
+                           }else{
+                              var style =  new Style({
+                                    image: new Icon({
+                                        color: "#eee",
+                                        crossOrigin: "anonymous",
+                                        src: require("../../assets/images/icons/location2.png"), //本地的样式
+                                        scale:0.6
+          
+                                })
+                              })
+                              tadata.data.sortNo = that.lineLocations.length + 1
+                              tadata.data.locationId =  tadata.data.id
+                              that.lineLocations.push(tadata.data);
+                              tadata.type = 'selected'
+                              feature.setStyle(style);
+                           }
+                         }
                     }
                     //含有lnglat 参数的点标记触发事件
                 }
@@ -224,7 +261,7 @@ export default {
                     }
                     if (tadata.sectionId == "point") {
                         //  that.addText(evt.coordinate);
-                      console.log(tadata);
+                      // console.log(tadata);
                            that.popup.setPosition(evt.coordinate);
                           $(that.element).popover({
                             placement: 'top',
@@ -252,6 +289,46 @@ export default {
     })
   },
   methods: {
+     locationDelete(data){
+        for(var index in this.lineLocations){
+             if(this.lineLocations[index].locationId == data.locationId){
+                     this.lineLocations.splice(index,1);
+             }else if(this.lineLocations[index].sortNo > data.sortNo){
+                    this.lineLocations[index].sortNo = this.lineLocations[index].sortNo-1
+             }
+        }   
+     },
+     getResource(){
+               getResource({date:'2022-03-12'}).then(response =>{
+                    var selectLocation = [];
+                    var stationLocation = [];
+                    if(this.lineLocations != null){
+                                for(var index in this.lineLocations){
+                                    var obj = this.lineLocations[index]
+                                    obj.fence = obj.lnglat
+                                    obj.name = obj.locationName
+                                    selectLocation.push(obj)
+                              }        
+                    }
+                     for(var i in response.data.staticLocation){
+                          var obj = response.data.staticLocation[i]
+                          obj.fence = obj.lnglat
+                          obj.name = obj.locationName
+                          obj.locationId = obj.id
+                          var isSelected = 0;
+                          for(var j in selectLocation){
+                                  if(obj.id == selectLocation[j].locationId){
+                                           isSelected = 1
+                                  }
+                          }
+                          if(isSelected == 0){
+                                 stationLocation.push(obj)
+                          }
+                     }                  
+                    this.addPoints(stationLocation,'location.png',0.6,'location');
+                    this.addPoints(selectLocation,'location2.png',0.6,'selected');
+               })
+         },
        addText(location) {
             var textInfo = new Overlay({
                 position: fromLonLat(location),
@@ -490,6 +567,9 @@ export default {
             }else{
                  this.mapHashMap[type]=markerta;
             }
+            if(this.isLine){
+                  markerta.setVisible(true);
+            }
             // markerta.setVisible(true)
 
       },

src/router/index.js

@@ -81,6 +81,12 @@ export const constantRoutes = [{
         hidden: true,
     },
     {
+        path: "/introduction",
+        component: () =>
+            import ("@/views/introduction"),
+        hidden: true,
+    },
+    {
         path: "/user",
         component: Layout,
         hidden: true,

src/views/bigscreen/index.vue

@@ -1,17 +1,18 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
-      <mapdiv ref="mapdiv"></mapdiv>
+      <mapdiv ref="mapdiv" style="display:none"></mapdiv>
       <!-- <zhgl></zhgl> -->
+      <introduction></introduction>
     </div>
    <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
 
-    <div class="bottombg">
+    <!-- <div class="bottombg">
       <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
       <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
       <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
       <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
-    </div>
+    </div> -->
 
     <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
 
@@ -24,6 +25,7 @@
 <script>
 import moment from "moment";
 import mapdiv from "../../components/map/index.vue"
+import introduction from './introduction.vue'
 import zhgl from "../../components/zhgl/index.vue"
 import headerdiv from '@/components/HeaderDiv/index.vue'
 import { httpRequest } from "@/api/data/http";
@@ -48,7 +50,8 @@ export default {
       mapdiv,
       zhgl,
       headerdiv,
-      videodiv
+      videodiv,
+      introduction
     },
     mounted() {
         // this.getTrain();

src/views/bigscreen/introduction.vue

@@ -1,6 +1,135 @@
 <template>
-     <div>
+     <div style="heigh:100%;width:100%">
+             <div class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">启东市交通局简介</div></div>
+                    <div style="font-size: 1.8rem;
+                                font-family: Microsoft YaHei;
+                                color: #D6DEE7;
+                                line-height: 3.6rem;
+                                padding-top:5rem;
+                                padding-left:16rem">
+                                 启东市交通运输局是市政府工作部门,为正科级。<br/>
+                                 启东市交通运输局负责贯彻落实中央关于交通运输工作的方针政策和省委、南通市委、启东市委的决策部署,在履行职责过程中坚持和加强党对交通运输工作的集中统一领导。
+                      </div>
+                      <div style="padding-left:39.3rem;margin-top:5rem;position:relative;">
+                            <div class="divcontent">
+                                  <div style="padding-left:8rem">
+                                     <el-row :gutter="20" style="margin-bottom:1rem">
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">铁路管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/train.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">港口管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/东南沿海港口.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">维修驾培科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/维修on.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">水运管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/水运交通设施.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">客货运管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/25客运站.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">安全科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/安全.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                      </el-row>
+                                  </div>
+                            </div>
 
+                            <div class="divcontent" style="margin-top:7rem">
+                                  <div style="padding-left:8rem">
+                                     <el-row :gutter="20" style="margin-bottom:1rem">
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">工程管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/工程(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">规划计划科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/规划(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">法规科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/规范(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">人事科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/人事管理(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">财务科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/43财务(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">办公室</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/办公室(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                      </el-row>
+                                  </div>
+                            </div>
+                      </div>
+             
+                <div style='font-size: 1.8rem;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #3DFFEA;
+                            line-height: 41px;
+                            text-align:center'>启东市交通运输局组织架构</div>
+
+             <div class="divtitle" style="margin-top:2rem"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">启东市交通局简介</div></div>
      </div>
 </template>
 
@@ -39,6 +168,34 @@ export default {
           padding-left:3rem;
           float: left;
        }
+.divcontent{
+        background: url("~@/assets/images/home_icon/background.png") no-repeat;
+        background-size: 100% 100%;
+        width:105.5rem;
+        height:15rem;
+        z-index:10;
+}
+
+.tb_content{
+        background: url("~@/assets/images/home_icon/tb2@2x.png") no-repeat;
+        background-size: 100% 100%;
+        width:13rem;
+        height:10rem;
+        z-index:20;
+        padding-top:4rem;
+        text-align: center
+}
 
+.dept_font{
+      font-size: 2.4rem;
+      font-family: Adobe Heiti Std;
+      font-weight: normal;
+      color: #23FFFC;
+      text-align: center
+}
 
+.image_class{
+      width:3.9rem;
+      height:3.9rem
+}
 </style>

src/views/introduction/index.vue

@@ -0,0 +1,44 @@
+<template>
+     <div>
+
+     </div>
+</template>
+
+<script>
+import { listLocation, getLocation, delLocation, addLocation, updateLocation } from "@/api/qdtl/location";
+import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
+
+export default {
+  name: "Introduction",
+  data() {
+    return {
+       
+    };
+  },
+   components:{
+      mapdiv
+    },
+  created() {
+
+  },
+  methods: {
+   
+  }
+};
+</script>
+
+
+<style>
+ .divtitle{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          float: left;
+       }
+
+
+</style>

src/views/qdtl/line/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+     <div class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">线路管理</div></div>
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="编号" prop="lineCode">
         <el-input
@@ -61,7 +62,10 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="lineList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="lineList" @selection-change="handleSelectionChange" stripe
+       class="my_table"
+      :row-class-name="tableRowClassName"
+      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="线路编号" align="center" prop="lineCode" />
       <el-table-column label="线路名称" align="center" prop="lineName" />
@@ -117,21 +121,106 @@
     />
 
     <!-- 添加或修改巡检线路管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="编号" prop="lineCode">
-          <el-input v-model="form.lineCode" placeholder="请输入编号" />
-        </el-form-item>
-        <el-form-item label="名称" prop="lineName">
-          <el-input v-model="form.lineName" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="描述" prop="detail">
-          <el-input v-model="form.detail" placeholder="请输入描述" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="是否需要拍照">
+    <el-dialog :title="title" :visible.sync="open" width="140rem" append-to-body>
+      <div style="padding-left:15rem">
+      <div class='titleFont'>线路基本信息</div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="8rem">
+      <el-row :gutter="20">
+            <el-col :span="6">
+               <el-form-item label="区域名称" prop="areaId">
+                  <el-select v-model="form.areaId" placeholder="请选择区域名称" style="width:17rem" >
+                    <el-option
+                      v-for="obj in areaList"
+                      :key="obj.id"
+                      :label="obj.areaName"
+                      :value="obj.id"
+                    ></el-option>
+                  </el-select>
+                 </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                 <el-form-item label="编号" prop="lineCode">
+                  <el-input v-model="form.lineCode" placeholder="请输入编号" style="width:17rem"/>
+                </el-form-item>
+            </el-col>
+              <el-col :span="6">
+                  <el-form-item label="名称" prop="lineName">
+                  <el-input v-model="form.lineName" placeholder="请输入名称" style="width:17rem"/>
+                </el-form-item>
+            </el-col>
+      </el-row>
+       <el-row :gutter="20">
+           <el-col :span="6">
+                  <el-form-item label="备注信息" prop="remark">
+                  <el-input v-model="form.remark" placeholder="请输入备注" style="width:17rem"/>
+                </el-form-item>
+            </el-col>
+             <el-col :span="6">
+                  <el-form-item label="线路描述" prop="detail">
+                  <el-input v-model="form.detail" placeholder="请输入备注" style="width:17rem"/>
+                </el-form-item>
+            </el-col>
+       </el-row>
+       <div>
+          <el-row :gutter="20">
+            <el-col :span="18">
+                <div class='titleFont'>巡检点列表</div>
+            </el-col>
+             <el-col :span="2">
+                <el-button
+                        v-if='!isEdit'
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="selectLocation"
+                      >选择巡检点</el-button>
+             </el-col>
+              <el-col :span="2">
+                <el-button
+                        v-if='isEdit'
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="submitLocation"
+                      >确定</el-button>
+             </el-col>
+          </el-row>
+       </div>
+       <div style="height:30rem;width:100rem" v-if='isEdit'><mapdiv ref='mapv' :isLine='true' :lineLocations='locationsList'></mapdiv></div>
+       <div style="height:30rem;width:100rem" v-if='!isEdit'>
+          <el-table v-loading="loading" :data="locationsList" @selection-change="handleSelectionChange" stripe
+            class="my_table"
+            max-height=300
+            :row-class-name="tableRowClassName"
+            :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+            <el-table-column type="index" label="序号" width="55" align="center" />
+            <el-table-column label="巡检点编号" align="center" prop="locationCode" />
+            <el-table-column label="巡检点名称" align="center" prop="locationName" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-up"
+                  @click="handleUp(scope.row)"
+                ></el-button>
+                 <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-down"
+                  @click="handleDown(scope.row)"
+                ></el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete-new"
+                  @click="locationDelete(scope.row)"
+                ></el-button>
+              </template>
+            </el-table-column>
+    </el-table>
+       </div>
+        <!-- <el-form-item label="是否需要拍照">
           <el-radio-group v-model="form.photo">
             <el-radio
               v-for="dict in dict.type.sys_yes_no"
@@ -166,8 +255,9 @@
 :label="dict.value"
             >{{dict.label}}</el-radio>
           </el-radio-group>
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -178,14 +268,20 @@
 
 <script>
 import { listLine, getLine, delLine, addLine, updateLine } from "@/api/qdtl/line";
+import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
 
 export default {
-  name: "Line",
+  name: "LineDiv",
   dicts: ['sys_yes_no'],
   data() {
     return {
       // 遮罩层
       loading: true,
+
+      isEdit:false,
+
+      locationsList:[],
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -200,6 +296,8 @@ export default {
       lineList: [],
       // 弹出层标题
       title: "",
+
+      areaList:[],
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -222,10 +320,24 @@ export default {
       }
     };
   },
+  components:{
+      mapdiv
+    },
   created() {
     this.getList();
+    this.getArea();
   },
   methods: {
+    selectLocation(){
+        this.isEdit = true;
+    },
+     getArea() {
+      this.loading = true;
+      listArea({areaType:1}).then(response => {
+        this.areaList = response.rows
+        console.log(response.rows);
+      });
+    },
     /** 查询巡检线路管理列表 */
     getList() {
       this.loading = true;
@@ -233,6 +345,7 @@ export default {
         this.lineList = response.rows;
         this.total = response.total;
         this.loading = false;
+        console.log(this.lineList);
       });
     },
     // 取消按钮
@@ -258,8 +371,17 @@ export default {
         updateBy: null,
         updateTime: null
       };
+      this.locationsList = [];
+      this.isEdit = false
       this.resetForm("form");
     },
+    tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -280,29 +402,33 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加巡检线路管理";
+      this.title = "新增巡检线路管理";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getLine(id).then(response => {
-        this.form = response.data;
+      // const id = row.id || this.ids
+      // getLine(id).then(response => {
+        // console.log(response)
+        this.form = row;
+        this.locationsList = row.locations
         this.open = true;
         this.title = "修改巡检线路管理";
-      });
+      // });
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            this.form.lineLocations = this.locationsList
             updateLine(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
+            this.form.lineLocations = this.locationsList
             addLine(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -327,7 +453,93 @@ export default {
       this.download('qdtl/line/export', {
         ...this.queryParams
       }, `line_${new Date().getTime()}.xlsx`)
-    }
+    },
+    submitLocation(){
+      this.locationsList = this.$refs.mapv.lineLocations;
+      this.isEdit = false;
+            // console.log(this.$refs.mapv.lineLocations);
+    },
+    handleUp(data){
+      if(data.sortNo > 1){
+          for(var index in this.locationsList){
+               if(this.locationsList[index].sortNo == data.sortNo-1){
+                        this.locationsList[index].sortNo = data.sortNo
+               }     
+        }
+        data.sortNo =  data.sortNo-1;
+        this.locationsList.sort(function(a, b){return a.sortNo - b.sortNo}); 
+      }
+        
+    },
+    handleDown(data){
+        if(data.sortNo < this.locationsList){
+           for(var index in this.locationsList){
+               if(this.locationsList[index].sortNo == data.sortNo+1){
+                        this.locationsList[index].sortNo = data.sortNo
+               }     
+              }
+              data.sortNo =  data.sortNo+1;
+              this.locationsList.sort(function(a, b){return a.sortNo - b.sortNo}); 
+              }
+    },
+     locationDelete(data){
+        for(var index in this.locationsList){
+             if(this.locationsList[index].locationId == data.locationId){
+                     this.locationsList.splice(index,1);
+             }else if(this.locationsList[index].sortNo > data.sortNo){
+                    this.selectUserList[index].sortNo = this.selectUserList[index].sortNo-1
+             }
+        }   
+    },
   }
 };
 </script>
+
+<style>
+ .divtitle{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          float: left;
+       }
+
+ .titleFont{
+        font-size: 1.6rem;
+        font-family: Microsoft YaHei;
+        color: #3DFFEA;
+        line-height: 3.6rem;
+ }
+ .el-icon-up{
+  background: url('~@/assets/images/icons/up.png') no-repeat;
+  font-size: 1.6rem;
+  background-size: cover;
+}
+.el-icon-up:before{
+    content: "替";
+    font-size: 1.6rem;
+    visibility: hidden;
+   }
+ .el-icon-down{
+  background: url('~@/assets/images/icons/down.png') no-repeat;
+  font-size: 1.6rem;
+  background-size: cover;
+}
+.el-icon-down:before{
+    content: "替";
+    font-size: 1.6rem;
+    visibility: hidden;
+   }
+ .el-icon-delete-new{
+  background: url('~@/assets/images/icons/delete.png') no-repeat;
+  font-size: 1.6rem;
+  background-size: cover;
+}
+.el-icon-delete-new:before{
+    content: "替";
+    font-size: 1.6rem;
+    visibility: hidden;
+   }
+</style>

src/views/qdtl/plan/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <div class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">计划管理</div></div>
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="编号" prop="planCode">
         <el-input
@@ -81,7 +82,10 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange" stripe
+       class="my_table"
+      :row-class-name="tableRowClassName"
+      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="计划编号" align="center" prop="planCode" />
       <el-table-column label="计划名称" align="center" prop="planName" />
@@ -133,57 +137,136 @@
     />
 
     <!-- 添加或修改巡检计划管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="编号" prop="planCode">
-          <el-input v-model="form.planCode" placeholder="请输入编号" />
-        </el-form-item>
-        <el-form-item label="名称" prop="planName">
-          <el-input v-model="form.planName" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="类型" prop="planType">
-          <el-select v-model="form.planType" placeholder="请选择类型">
-            <el-option
-              v-for="dict in dict.type.tl_plan_type"
-              :key="dict.value"
-              :label="dict.label"
-:value="dict.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="开始时间" prop="startDate">
-          <el-date-picker clearable size="small"
-            v-model="form.startDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择开始时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束时间" prop="endDate">
-          <el-date-picker clearable size="small"
-            v-model="form.endDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择结束时间">
-          </el-date-picker>
-        </el-form-item>
+    <el-dialog :title="title" :visible.sync="open" width="140rem" append-to-body>
+      <div style="padding-left:15rem">
+         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <div class='titleFont'>计划基本信息</div>
+      <div style="margin-top:2rem">
+         <el-row :gutter="20">
+             <el-col :span="8">
+              <el-form-item label="计划编号" prop="planCode">
+                  <el-input v-model="form.planCode" placeholder="请输入计划编号" style="width:25rem"/>
+                </el-form-item>
+            </el-col>
+            <el-col :span="8">
+                 <el-form-item label="计划类型" prop="planType">
+                  <el-input v-model="form.planType" placeholder="请选择计划类型" style="width:25rem"/>
+                </el-form-item>
+            </el-col>
+              <el-col :span="8">
+                  <el-form-item label="计划名称" prop="planName">
+                  <el-input v-model="form.planName" placeholder="请输入计划名称" style="width:25rem"/>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row :gutter="20">
+             <el-col :span="8">
+              <el-form-item label="开始时间" prop="startDate">
+                  <el-input v-model="form.startDate" placeholder="请输入计划编号" style="width:25rem"/>
+                </el-form-item>
+            </el-col>
+            <el-col :span="8">
+                 <el-form-item label="结束时间" prop="endDate">
+                  <el-input v-model="form.endDate" placeholder="请选择计划类型" style="width:25rem"/>
+                </el-form-item>
+            </el-col>
+              <el-col :span="8">
+                  <el-form-item label="计划线路" prop="lineId">
+                  <el-select v-model="form.lineId" placeholder="请选择计划线路" style="width:25rem" @change="lineIdChange">
+                    <el-option
+                      v-for="obj in lineList"
+                      :key="obj.id"
+                      :label="obj.lineName"
+                      :value="obj.id"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+            </el-col>
+        </el-row>
+      <!-- </el-form> -->
+      </div>
+      <div class='titleFont'>巡检点列表</div>
+      <div style="height:25rem;width:100rem">
+          <el-table v-loading="loading" :data="locationsList" @selection-change="handleSelectionChange" stripe
+            class="my_table"
+            max-height=300
+            :row-class-name="tableRowClassName"
+            :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                    <el-table-column type="index" label="序号" width="55" align="center" />
+                    <el-table-column label="巡检点编号" align="center" prop="locationCode" />
+                    <el-table-column label="巡检点名称" align="center" prop="locationName" />
+           </el-table>
+       </div>
+        <div>
+          <el-row :gutter="20">
+            <el-col :span="18">
+                <div class='titleFont'>设置人员</div>
+            </el-col>
+              <el-col :span="2">
+                <el-button
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="selectPeople"
+                      >选择人员</el-button>
+             </el-col>
+          </el-row>
+           <div style="height:25rem;width:100rem">
+              <el-table v-loading="loading" :data="selectUserList" @selection-change="handleSelectionChange" stripe
+                class="my_table"
+                max-height=300
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                        <el-table-column type="index" label="序号" width="55" align="center" />
+                        <el-table-column label="编号" align="center" prop="userId" />
+                        <el-table-column label="姓名" align="center" prop="nickName" />
+                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                          <template slot-scope="scope">
+                            <el-button
+                              size="mini"
+                              type="text"
+                              icon="el-icon-delete"
+                              @click="userDelete(scope.row)"
+                            ></el-button>
+                          </template>
+                        </el-table-column>  
+              </el-table>
+          </div>
+       </div>
+        <div class='titleFont'>计划分数</div>
         <el-form-item label="计划分数" prop="score">
-          <el-input v-model="form.score" placeholder="请输入计划分数" />
+                  <el-input v-model="form.score" placeholder="请输入计划分数" style="width:15rem"/>
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
+        </el-form>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+      <el-dialog title="选择人员" :visible.sync="openUser" width="50rem" append-to-body>
+         <el-select v-model="selectUser" multiple placeholder="请选择人员" style="width:25rem" @change="lineIdChange">
+                    <el-option
+                      v-for="obj in userList"
+                      :key="obj.userId"
+                      :label="obj.nickName"
+                      :value="obj.userId"
+                    ></el-option>
+          </el-select>
+           </el-form>
+       <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitUser">确 定</el-button>
+        <el-button @click="cancelUser">取 消</el-button>
+      </div>
+      </el-dialog>
   </div>
 </template>
 
 <script>
 import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/qdtl/plan";
+import { listLine, getLine, delLine, addLine, updateLine } from "@/api/qdtl/line";
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
 
 export default {
   name: "Plan",
@@ -192,6 +275,10 @@ export default {
     return {
       // 遮罩层
       loading: true,
+
+      lineList:[],
+
+      userList:[],
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -208,6 +295,14 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+
+      openUser:false,
+
+      locationsList:[],
+
+      selectUser:[],
+
+      selectUserList:[],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -225,9 +320,23 @@ export default {
   },
   created() {
     this.getList();
+    this.getLineList();
+    this.getUserList();
   },
   methods: {
+    getUserList(){
+      listUser().then(response =>{
+        this.userList = response.rows
+         console.log(this.userList);
+        // console.log(response.rows);
+      })
+    },
     /** 查询巡检计划管理列表 */
+     getLineList() {
+      listLine().then(response => {
+            this.lineList = response.rows
+      });
+    },
     getList() {
       this.loading = true;
       listPlan(this.queryParams).then(response => {
@@ -241,6 +350,22 @@ export default {
       this.open = false;
       this.reset();
     },
+    cancelUser() {
+      this.openUser = false;
+      this.selectUser = [];
+    },
+    submitUser(){
+      this.openUser = false;
+      this.selectUserList = []
+      console.log(this.selectUser);
+      for(var i in this.selectUser){
+          for(var j in this.userList){
+                  if(this.selectUser[i] == this.userList[j].userId){
+                        this.selectUserList.push(this.userList[j]);
+                  }
+          }
+      }
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -255,10 +380,32 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        planUsers:[]
       };
+      this.selectUserList = [];
+      this.locationsList = [];
       this.resetForm("form");
     },
+    userDelete(data){
+        console.log(data); 
+        var selectUserArry = [];
+        for(var index in this.selectUserList){
+             if(this.selectUserList[index].userId == data.userId){
+                     this.selectUserList.splice(index,1);
+             }else{
+               selectUserArry.push(this.selectUserList[index].userId);
+             }
+        }   
+        this.selectUser = selectUserArry
+    },
+    tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -289,11 +436,17 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改巡检计划管理";
+        this.lineIdChange(this.form.lineId);
       });
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
+        this.form.planUsers = []
+        for(var index in this.selectUserList){
+                 var obj = this.selectUserList[index];
+                 this.form.planUsers.push(obj);
+        }
         if (valid) {
           if (this.form.id != null) {
             updatePlan(this.form).then(response => {
@@ -326,7 +479,36 @@ export default {
       this.download('qdtl/plan/export', {
         ...this.queryParams
       }, `plan_${new Date().getTime()}.xlsx`)
+    },
+    lineIdChange(value){
+        for(var index in this.lineList){
+              if(value == this.lineList[index].id){
+                     this.locationsList = this.lineList[index].locations
+              }
+        }
+    },
+    selectPeople(){
+            this.openUser = true
     }
   }
 };
 </script>
+
+<style>
+ .divtitle{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          float: left;
+       }
+
+ .titleFont{
+        font-size: 1.6rem;
+        font-family: Microsoft YaHei;
+        color: #3DFFEA;
+        line-height: 3.6rem;
+ }
+</style>