公文，地图，视频播放

src/components/map/index.vue

@@ -204,6 +204,7 @@ export default {
     this.initPoint();
     // this.getTrain(),
     this.getLineList();
+    this.addQdStation();
     window.videosize = "1x1";
     // this.addpoint(point);
     var that = this
@@ -360,6 +361,14 @@ export default {
     // })
   },
   methods: {
+     addQdStation(){
+            var station = [121.67994923828125,31.85240474572754]
+            this.addMarkerQd(station,'station.png',0.6,'marker');
+            var nqLine = [121.57008595703125,31.875750692993165]
+            this.addMarker(nqLine,'宁启铁路二期.png',1,'marker');
+            var ylLine = [121.54948659179688,32.08243099084473]
+            this.addMarker(ylLine,'洋吕铁路在建.png',1,'marker');
+     },
      locationDelete(data){
         for(var index in this.lineLocations){
              if(this.lineLocations[index].locationId == data.locationId){
@@ -422,14 +431,14 @@ export default {
                     this.addPoints(selectLocation,'location2.png',0.6,'selected');
                })
          },
-       addText(location) {
-            var textInfo = new Overlay({
-                position: fromLonLat(location),
-                offset: [20, -20],
-                element: document.getElementById("textInfo")
-            });
-            this.map.addOverlay(textInfo);
-        },
+      //  addText(location) {
+      //       var textInfo = new Overlay({
+      //           position: fromLonLat(location),
+      //           offset: [20, -20],
+      //           element: document.getElementById("textInfo")
+      //       });
+      //       this.map.addOverlay(textInfo);
+      //   },
          getTrain(){
            var trainArry = [[121.645366,31.856052],[121.636002,32.02354],[121.530258,32.086391]];
            for(var index in trainArry){
@@ -562,7 +571,35 @@ export default {
          this.map.removeLayer(layers);
 
       },
-      addMarker(lnglats,icon,size,id,data,type) {
+       addMarker(lnglats,icon,size) {
+            let tamarker = new Feature({
+                tadata: {
+                    sectionId: "point",
+                    towerNumber: 22,
+                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
+            });
+            tamarker.setStyle(
+                new Style({
+                    image: new Icon({
+                        color: "#eee",
+                        crossOrigin: "anonymous",
+                        src: require("../../assets/images/icons/" + icon), //本地的样式
+                        scale:size
+                    }),
+                },
+                )
+            ); //这里是样式
+            var markerta = new LayerVec({
+                source: new SourceVec({
+                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+                }),
+                zIndex:30
+            });
+            // this.pointArry[id]=markerta;
+            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+      },
+      addMarkerQd(lnglats,icon,size,id,data,type) {
             let tamarker = new Feature({
                 tadata: {
                     sectionId: "point",
@@ -580,7 +617,30 @@ export default {
                         src: require("../../assets/images/icons/" + icon), //本地的样式
                         scale:size
                     }),
-                },)
+                      text: new Text({
+                        text: '启东站',
+                        font: '16px sans-serif',
+                        textAlign: "center",
+                        textBaseline: "middle",
+                        //font: 'verdana',
+                        fill: new Fill({
+                          color: "blue"
+                        }),
+                        backgroundFill: new Fill({
+                          color: "rgba(220,38,38,0.2)"
+                        }),
+                         stroke: new Stroke({
+                          color: "#ffffff"
+                          // width: 3
+                        }),
+                        // font: "10px sans-serif",
+                        // offsetX: parseInt(0, 10),
+                        offsetY: 25,
+                        placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
+                        overflow: false //超出面的部分不显示
+                    })
+                },
+                )
             ); //这里是样式
             var markerta = new LayerVec({
                 source: new SourceVec({
@@ -591,6 +651,50 @@ export default {
             this.pointArry[id]=markerta;
             this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
       },
+       addText(lnglats,text,color,background) {
+            let tamarker = new Feature({
+                tadata: {
+                    sectionId: "point",
+                    towerNumber: 22,
+                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
+            });
+            tamarker.setStyle(
+                new Style({
+                      text: new Text({
+                        text: text,
+                        font: '16px sans-serif',
+                        textAlign: "center",
+                        textBaseline: "middle",
+                        //font: 'verdana',
+                        fill: new Fill({
+                          color: color
+                        }),
+                        backgroundFill: new Fill({
+                          color: background
+                        }),
+                         stroke: new Stroke({
+                          color: "#ffffff"
+                          // width: 3
+                        }),
+                        // font: "10px sans-serif",
+                        // offsetX: parseInt(0, 10),
+                        offsetY: 25,
+                        placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
+                        overflow: false //超出面的部分不显示
+                    })
+                },
+                )
+            ); //这里是样式
+            var markerta = new LayerVec({
+                source: new SourceVec({
+                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+                }),
+                zIndex:30
+            });
+            // this.pointArry[id]=markerta;
+            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+      },
       addPoints(data,icon,size,type){
         var tamarkerArry =[]
         let tamarker = null
@@ -687,10 +791,11 @@ export default {
               if(type == 'device'){
                  this.deviceList.push(linevectorLayer);
                  linevectorLayer.setVisible(false)
-            }else{
-               this.mapHashMap[type]=linevectorLayer;
-               linevectorLayer.setVisible(false)
             }
+            // else{
+            //    this.mapHashMap[type]=linevectorLayer;
+            //    linevectorLayer.setVisible(false)
+            // }
             this.map.addLayer(linevectorLayer); //这里是执行，执行之后点就出来了
         },
          addPolygon(item) {
@@ -804,25 +909,23 @@ export default {
                       ]
           }else if(type == 'nqtl2'){
                style =[
-                     new Style({
-                          stroke: new Stroke({
-                              color:"#000000",
-                              width:6,
-                              lineDash:[15,45],
-                              lineCap:"butt"
-                          }),
-                          zIndex:20
-                      }),
-                      new Style({
-                          stroke: new Stroke({
-                              color:"#ffffff",
-                              width:6,
-                              lineDash:[15,45],
-                              lineDashOffset:30,
-                              lineCap:"butt"
+                    new Style({
+                              stroke: new Stroke({
+                                  color:"#535353",
+                                  width:6,
+                                  lineCap:"butt"
+                              }),
+                              zIndex:20
                           }),
-                          zIndex:21
-                      })
+                          new Style({
+                              stroke: new Stroke({
+                                  color:"#ffffff",
+                                  width:6,
+                                  lineDash:[15,15],
+                                  lineCap:"butt"
+                              }),
+                              zIndex:21
+                          })
                     ]
           }else if(type == 'device'){
                style =new Style({

src/views/public/index.vue

@@ -1,8 +1,8 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
-  <div style="display:fix;">
-  <div style="width:25%;height:100%;display: inline-flex;">
+  <div style="display: inline-flex;width:100%">
+  <div style="width:25%;height:100%;">
        <div style="width:100%">
             <div class="divtitle" style="margin-top:0.5rem">
                         <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
@@ -50,10 +50,10 @@
                 </div>
        </div>
   </div>
-  <div style="width:48%;height:95%;position:absolute;display: inline-flex;">
+  <div style="width:50%;height:90rem;">
       <mapdiv ref="mapdiv" style=""></mapdiv>
   </div>
-  <div style="width:25%;height:100%;margin-left:92rem;display: inline-flex;">
+  <div style="width:25%;height:100%;">
         <div style="width:100%;padding-left:1rem">
         <div class="divtitle" style="margin-top:1.5rem">
            <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>

src/views/qdtl/document/index.vue

@@ -0,0 +1,510 @@
+<template>
+  <div class="app-container" >
+      <!-- <div style="overflow:auto;height:100rem"> -->
+        <div class="divtitle">
+             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">页眉</div>
+        </div>
+
+        <div style='margin-top:8em'>
+             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="10rem" >
+                  <el-row style="">
+                        <el-col :span="12" style="padding-left:10rem"> 
+                            <el-form-item label="文头:" prop="wenTou">
+                                    <el-input
+                                    v-model="queryParams.wenTou"
+                                    placeholder="请输入文头"
+                                    clearable
+                                    size="small"
+                                    style="width:50rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                          <el-col :span="12"> 
+                            <el-form-item label="标题:" prop="title">
+                                    <el-input
+                                    v-model="queryParams.title"
+                                    placeholder="请输入标题"
+                                    clearable
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                   </el-row>
+                    <el-row style="">
+                        <el-col :span="12" style="padding-left:10rem"> 
+                            <el-form-item label="期数:" prop="periods">
+                                <div style="font-size:1.5rem;color:white;margin-left:3rem">
+                                     第
+                                    <el-input
+                                    v-model="queryParams.periods"
+                                    clearable
+                                    size="small"
+                                    style="width:10rem;margin-left:0.3rem"
+                                    />
+                                    期
+                                </div>
+                                </el-form-item>
+                            </el-col>
+                          <el-col :span="12"> 
+                            <el-form-item label="副标题:" prop="secondTitle">
+                                    <el-input
+                                    v-model="queryParams.secondTitle"
+                                    placeholder="请输入副标题"
+                                    clearable
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                   </el-row>
+                    <el-row style="">
+                        <el-col :span="12" style="padding-left:10rem"> 
+                            <el-form-item label="发文日期:" prop="publishDate">
+                                     <el-date-picker
+                                                v-model="queryParams.publishDate"
+                                                type="date"
+                                                placeholder="选择日期"
+                                                format="yyyy 年 MM 月 dd 日"
+                                                value-format="yyyy-MM-dd"
+                                                style="margin-left:3rem">
+                                    </el-date-picker>
+                                </el-form-item>
+                            </el-col>
+                   </el-row>
+                   
+             </el-form>
+        </div>
+
+        <div class="divtitle">
+             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">正文内容</div>
+        </div>
+
+        <div style="padding-left:3rem;padding-top:5rem">
+              <div>
+                        <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #FFFFFF;">一、市镇工作动态</div>
+                        <div>
+                                <div style='font-size: 1.6rem;
+                                            font-family: Microsoft YaHei;
+                                            font-weight: 400;
+                                            color: #FFFFFF;
+                                            margin-top:2rem'>市指挥中心动态</div>
+                                <div>
+                                    <el-input
+                                        type="textarea"
+                                        :rows="5"
+                                        placeholder="请输入200字以内的案例介绍"
+                                        v-model="queryParams.centerNews"
+                                        style="margin-top:2rem">
+                                        </el-input>
+                                </div>
+                                <div style='font-size: 1.6rem;
+                                            font-family: Microsoft YaHei;
+                                            font-weight: 400;
+                                            color: #FFFFFF;
+                                            margin-top:2rem'>区镇都动态</div>
+                                <div>
+                                    <el-input
+                                        type="textarea"
+                                        :rows="5"
+                                        placeholder="请输入200字以内的案例介绍"
+                                        v-model="queryParams.centerNews"
+                                        style="margin-top:2rem">
+                                        </el-input>
+                                </div>
+                        </div>
+              </div>
+              <div style="margin-top:2rem">
+                       <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #FFFFFF;">二、典型案例</div>
+                        <div style="margin-top:1rem:padding-left:10rem"> 
+                              <el-form :model="exampleObj" ref="exampleForm" :inline="true" label-width="68px">
+                                        <el-form-item label="所属区域" prop="areaName">
+                                            <el-input
+                                            v-model="exampleObj.areaName"
+                                            clearable
+                                            size="small"
+                                            />
+                                        </el-form-item>
+                                        <el-form-item label="内容描述" prop="content">
+                                            <el-input
+                                            v-model="exampleObj.content"
+                                            clearable
+                                            size="small"
+                                            />
+                                        </el-form-item>
+                                         <el-form-item>
+                                            <el-button type="primary" size="mini" @click="addExample">增加</el-button>
+                                        </el-form-item>
+                              </el-form>
+                        </div>
+                        <div style="margin-top:0.1rem">
+                            <el-table v-loading="loading" :data="basicExampleList"  stripe
+                                        class="my_table"
+                                        :row-class-name="tableRowClassName"
+                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                                        <el-table-column label="序号" align="center" type="index" />
+                                        <el-table-column label="所属区域" align="center" prop="areaName" />
+                                        <el-table-column label="内容描述" align="center" prop="content" />
+                                        <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-edit"
+                                                @click="handleUpdate(scope.row)"
+                                                v-hasPermi="['qdtl:plan:edit']"
+                                            >修改</el-button>
+                                            <el-button
+                                                size="mini"
+                                                type="text"
+                                                icon="el-icon-delete"
+                                                @click="handleDelete(scope.row)"
+                                                v-hasPermi="['qdtl:plan:remove']"
+                                            >删除</el-button>
+                                            </template>
+                                        </el-table-column>
+                                </el-table>
+                         </div>
+              </div>
+
+               <div style="margin-top:2rem">
+                       <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #FFFFFF;">三、专职巡防员巡防打卡情况</div>
+                        <div style="margin-top:1rem:padding-left:10rem"> 
+                              <el-form :model="exampleObj" ref="exampleForm" :inline="true" label-width="13rem">
+                                        <el-form-item label="巡防统计周期:" prop="dateArry">
+                                            <el-date-picker
+                                                v-model="dateArry"
+                                                type="daterange"
+                                                range-separator="至"
+                                                start-placeholder="开始日期"
+                                                end-placeholder="结束日期"
+                                                value-format="yyyy-MM-dd"
+                                                style="color:white">
+                                                </el-date-picker>
+                                        </el-form-item>
+                                         <el-form-item>
+                                            <el-button type="primary" size="mini" @click="addExample">确定</el-button>
+                                        </el-form-item>
+                              </el-form>
+                        </div>
+                        <div style="margin-top:0.1rem">
+                            <el-table v-loading="loading" :data="basicExampleList"  stripe
+                                        class="my_table"
+                                        :row-class-name="tableRowClassName"
+                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                                        <el-table-column label="序号" align="center" type="index" />
+                                        <el-table-column label="所属区域" align="center" prop="areaName" />
+                                        <el-table-column label="内容描述" align="center" prop="content" />
+                                        <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-edit"
+                                                @click="handleUpdate(scope.row)"
+                                                v-hasPermi="['qdtl:plan:edit']"
+                                            >修改</el-button>
+                                            <el-button
+                                                size="mini"
+                                                type="text"
+                                                icon="el-icon-delete"
+                                                @click="handleDelete(scope.row)"
+                                                v-hasPermi="['qdtl:plan:remove']"
+                                            >删除</el-button>
+                                            </template>
+                                        </el-table-column>
+                                </el-table>
+                         </div>
+              </div>
+
+               <div style="margin-top:2rem">
+                       <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #FFFFFF;">四、存在问题</div>
+                        <div style="margin-top:1rem:padding-left:10rem"> 
+                              <el-form :model="questionObj" ref="exampleForm" :inline="true" label-width="68px">
+                                        <el-form-item label="所属区域" prop="areaName">
+                                            <el-input
+                                            v-model="questionObj.areaName"
+                                            clearable
+                                            size="small"
+                                            />
+                                        </el-form-item>
+                                        <el-form-item label="内容描述" prop="content">
+                                            <el-input
+                                            v-model="questionObj.content"
+                                            clearable
+                                            size="small"
+                                            />
+                                        </el-form-item>
+                                         <el-form-item>
+                                            <el-button type="primary" size="mini" @click="addQuestion">增加</el-button>
+                                        </el-form-item>
+                              </el-form>
+                        </div>
+                        <div style="margin-top:0.1rem">
+                            <el-table v-loading="loading" :data="questionList"  stripe
+                                        class="my_table"
+                                        :row-class-name="tableRowClassName"
+                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                                        <el-table-column label="序号" align="center" type="index" />
+                                        <el-table-column label="所属区域" align="center" prop="areaName" />
+                                        <el-table-column label="内容描述" align="center" prop="content" />
+                                        <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-edit"
+                                                @click="handleUpdate(scope.row)"
+                                                v-hasPermi="['qdtl:plan:edit']"
+                                            >修改</el-button>
+                                            <el-button
+                                                size="mini"
+                                                type="text"
+                                                icon="el-icon-delete"
+                                                @click="handleDelete(scope.row)"
+                                                v-hasPermi="['qdtl:plan:remove']"
+                                            >删除</el-button>
+                                            </template>
+                                        </el-table-column>
+                                </el-table>
+                         </div>
+              </div>
+
+               <div style="margin-top:2rem">
+                       <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #FFFFFF;">五、工作建议</div>
+                        <div style="margin-top:1rem:padding-left:10rem"> 
+                              <el-form :model="adviceObj" ref="exampleForm" :inline="true" label-width="68px">
+                                        <el-form-item label="所属区域" prop="areaName">
+                                            <el-input
+                                            v-model="adviceObj.areaName"
+                                            clearable
+                                            size="small"
+                                            />
+                                        </el-form-item>
+                                        <el-form-item label="内容描述" prop="content">
+                                            <el-input
+                                            v-model="adviceObj.content"
+                                            clearable
+                                            size="small"
+                                            />
+                                        </el-form-item>
+                                         <el-form-item>
+                                            <el-button type="primary" size="mini" @click="addAdvice">增加</el-button>
+                                        </el-form-item>
+                              </el-form>
+                        </div>
+                        <div style="margin-top:0.1rem">
+                            <el-table v-loading="loading" :data="adviceList"  stripe
+                                        class="my_table"
+                                        :row-class-name="tableRowClassName"
+                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                                        <el-table-column label="序号" align="center" type="index" />
+                                        <el-table-column label="所属区域" align="center" prop="areaName" />
+                                        <el-table-column label="内容描述" align="center" prop="content" />
+                                        <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-edit"
+                                                @click="handleUpdate(scope.row)"
+                                                v-hasPermi="['qdtl:plan:edit']"
+                                            >修改</el-button>
+                                            <el-button
+                                                size="mini"
+                                                type="text"
+                                                icon="el-icon-delete"
+                                                @click="handleDelete(scope.row)"
+                                                v-hasPermi="['qdtl:plan:remove']"
+                                            >删除</el-button>
+                                            </template>
+                                        </el-table-column>
+                                </el-table>
+                         </div>
+              </div>
+        </div>
+
+         <div class="divtitle" style="margin-top:2rem">
+             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">页尾</div>
+        </div>
+
+         <div style='margin-top:8em'>
+             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="10rem" >
+                  <el-row style="">
+                        <el-col :span="12" style="padding-left:10rem"> 
+                            <el-form-item label="报送机关:" prop="baoSong">
+                                    <el-input
+                                    v-model="queryParams.baoSong"
+                                    placeholder="请输入报送机关"
+                                    clearable
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                          <el-col :span="12"> 
+                            <el-form-item label="抄送机关:" prop="chaoSong">
+                                    <el-input
+                                    v-model="queryParams.chaoSong"
+                                    placeholder="请输入抄送机关"
+                                    clearable
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                   </el-row>
+                    <el-row style="">
+                        <el-col :span="12" style="padding-left:10rem"> 
+                            <el-form-item label="统稿人:" prop="tongGao">
+                                    <el-input
+                                    v-model="queryParams.tongGao"
+                                    clearable
+                                    placeholder="请输入统稿人"
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                          <el-col :span="12"> 
+                            <el-form-item label="审核人:" prop="shenHe">
+                                    <el-input
+                                    v-model="queryParams.shenHe"
+                                    placeholder="请输入审核人"
+                                    clearable
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                   </el-row>
+                    <el-row style="">
+                        <el-col :span="12" style="padding-left:10rem"> 
+                            <el-form-item label="签发人:" prop="qianFa">
+                                    <el-input
+                                    v-model="queryParams.qianFa"
+                                    placeholder="请输入签发人"
+                                    clearable
+                                    size="small"
+                                    style="width:30rem;margin-left:3rem"
+                                    />
+                                </el-form-item>
+                            </el-col>
+                   </el-row>
+                   
+             </el-form>
+        </div>
+      <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/qdtl/device";
+import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
+
+export default {
+  name: "Device",
+  dicts: ['tl_device_type'],
+  data() {
+    return {
+          queryParams:{},
+          basicExampleList:[
+                {areaName:'汇龙镇',content:'测试内容一'},
+                {areaName:'汇龙镇',content:'测试内容二'}
+          ],
+          questionList:[
+                {areaName:'汇龙镇',content:'1测试内容一'},
+                {areaName:'汇龙镇',content:'1测试内容二'}
+          ],
+          adviceList:[
+               {areaName:'汇龙镇',content:'2测试内容一'},
+               {areaName:'汇龙镇',content:'2测试内容二'}
+          ],
+          exampleObj:{
+              areaName:'',
+              content:''
+          },
+          questionObj:{
+              areaName:'',
+              content:''
+          },
+          adviceObj:{
+              areaName:'',
+              content:''
+          },
+          dateArry:[],
+    };
+  },
+  created() {
+    this.getList();
+    this.getAreaList();
+  },
+  components:{
+      mapdiv
+    },
+  methods: {
+       tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "warning-row"; 
+            } else {
+                return "success-row";
+            }
+       },
+       addExample(){
+           this.basicExampleList.push(this.exampleObj);
+       },
+       addQuestion(){
+           this.questionList.push(this.questionObj);
+       },
+       addAdvice(){
+           this.adviceList.push(this.adviceObj);
+       }
+    
+  }
+};
+</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:2rem;
+          float: left;
+          display: inline-flex
+       }
+ .el-textarea__inner{
+        color:white
+ }
+
+.app-container{
+      background: url("~@/assets/images/bg@2x.png") no-repeat;
+      background-size: 100% 100%;
+}
+
+.el-range-editor--medium .el-range-separator{
+     color: white
+}
+</style>
+

src/views/safe/index.vue

@@ -1,8 +1,8 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
-  <div style="display:fix;">
-  <div style="width:25%;height:100%;display: inline-flex;">
+  <div style="display: inline-flex;">
+  <div style="width:25%;height:100%;">
        <div style="width:100%">
        <div class="divtitle" style="margin-top:0.5rem">
                 <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
@@ -49,10 +49,10 @@
 
 
   </div>
-  <div style="width:48%;height:95%;position:absolute;display: inline-flex;">
+  <div style="width:50%;height:90rem;">
       <mapdiv ref="mapdiv" style=""></mapdiv>
   </div>
-  <div style="width:25%;height:100%;margin-left:92rem;display: inline-flex;">
+  <div style="width:25%;height:100%;">
         <div style="width:100%;padding-left:1rem">
         <div class="divtitle" style="margin-top:1.5rem">
            <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>