详情下发按钮对应

public/index.css

@@ -15,7 +15,7 @@
 }
 @font-face {
   font-family: 'DINPro';
-  src: url('/bigScreen/fonts/fonts/DINPro-Medium.ttf') format('truetype');
+  src: url('/bigScreen/fonts/DINPro-Medium.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -25,6 +25,12 @@
   font-weight: normal;
   font-style: normal; 
 }
+@font-face {
+  font-family: 'AlibabaPuHuiTiR';
+  src: url('/bigScreen/fonts/AlibabaPuHuiTiRegular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal; 
+}
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;

src/views/bigScreen/InfoModal/index.vue

@@ -35,6 +35,16 @@
       <div class="address-span">预警位置：</div>
       <div class="address-value">{{ info.detailed_address }}</div>
     </div>
+    <div class="operation-button-div">
+      <div class="close-forewarning-button">
+        <span class="button-span">关闭</span>
+        <span class="button-span-shadow">关闭</span>
+      </div>
+      <div class="save-button" @click="save">
+        <span class="button-span">下发</span>
+        <span class="button-span-shadow">下发</span>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -116,6 +126,9 @@ export default {
       this.isDragging = false;
       window.removeEventListener('mousemove', this.onMouseMove);
       window.removeEventListener('mouseup', this.onMouseUp);
+    },
+    save(){
+      this.$emit('openTaskDelivery',this.info.allValue)
     }
    },
    mounted() {
@@ -300,5 +313,80 @@ export default {
       line-height: 17px;
     }
   }
+  .operation-button-div{
+    display: flex;
+    position: absolute;
+    bottom: -35px;
+    right: 20px;
+    .close-forewarning-button{
+      position: relative;
+      width: 106px;
+      height: 44px;
+      background-image: url('/bigScreen/close_forewarning_button.png');
+      background-size: 100% 100%;
+      margin-right: 10px;
+      cursor: pointer;
+      .button-span{
+        font-family: AlibabaPuHuiTiR;
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 16px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #FFFFFF;
+        background: linear-gradient( #EDFFEF,#13D1D8);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .button-span-shadow{
+        font-family: AlibabaPuHuiTiR;
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 16px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: rgba(0,0,0,0);
+        text-shadow: 0px 1px 16px rgba(19,213,219,0.5);
+      }
+    }
+    .save-button{
+      width: 106px;
+      height: 44px;
+      background-image: url('/bigScreen/save_forewarning_button.png');
+      background-size: 100% 100%;
+      position: relative;
+      cursor: pointer;
+      .button-span{
+        font-family: AlibabaPuHuiTiR;
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 16px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #FFFFFF;
+        background: linear-gradient( #EDFFEF,#79EA86);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .button-span-shadow{
+        font-family: AlibabaPuHuiTiR;
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 16px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: rgba(0,0,0,0);
+        text-shadow: 0px 1px 16px rgba(5,154,76,0.5);
+      }
+    }
+  }
 }
 </style>

src/views/bigScreen/index.vue

@@ -26,9 +26,20 @@
       <ResponseResource />
     </div>
 
-    <InfoModal  v-if="showForewarningModal" :info="forewarningInfo" @closeForewarningModal="closeForewarningModal"/>
+    <InfoModal
+      v-if="showForewarningModal"
+      :info="forewarningInfo"
+      @closeForewarningModal="closeForewarningModal"
+      @openTaskDelivery="openTaskDelivery"/>
 
     <SearchComponent :hiddenDiv="leftHidden" @cameraFly="cameraFly"/>
+    <div
+      class="task"
+      v-if="taskDeliveryShow"
+      @mousedown="onMouseDown"
+      :style="{ right: `${position.x}px`, top: `${position.y}px` }">
+      <taskDelivery @closeTask="closeTask" :lng="tasklng" :lat="tasklat" :description="description"></taskDelivery>
+    </div>
   </div>
 </template>
 
@@ -43,12 +54,13 @@ import InfoModal from './InfoModal/index.vue'
 import SearchComponent from './SearchComponent/index.vue'
 import Map from "@/components/mars3d/ResourceMap.vue";
 import Onlineuserbox from "./OnLineUser/index.vue";
+import taskDelivery from "@/views/home/widget/taskDelivery.vue";
 
 
 const areaName = localStorage.getItem("areaName");
 export default {
   name: "bigScreen",
-  components: { Forewarning, Person, Monitor, ResponseResource, Header, InfoModal, SearchComponent, Map,Onlineuserbox},
+  components: { Forewarning, Person, Monitor, ResponseResource, Header, InfoModal, SearchComponent, Map,Onlineuserbox, taskDelivery},
   data() {
     return {
       configUrl: `config/feixianConfig.json`,
@@ -64,9 +76,17 @@ export default {
         picture:'',
         detailed_address: '',
         start_time: '',
+        allValue: '',
       },
       leftHidden: false,
       rightHidden: false,
+      taskDeliveryShow: false,
+      tasklng: '',
+      tasklat: '',
+      description: '',
+      position: { x: 450, y: 300 }, 
+      isDragging: false,
+      offset: { x: 0, y: 0 },
     };
   },
   methods: {
@@ -95,6 +115,7 @@ export default {
       this.forewarningInfo.video = item.images_path.replaceAll(IPAddress,'221.2.83.254:7011')
       this.forewarningInfo.detailed_address = item.detailed_address
       this.forewarningInfo.start_time = item.start_time
+      this.forewarningInfo.allValue = item
       this.showForewarningModal = true
       this.cameraFly(item.longitude,item.latitude)
     },
@@ -140,6 +161,39 @@ export default {
       console.log(url);
       return url;
     },
+    closeTask() {
+      this.taskDeliveryShow = false;
+      this.position.x = 450
+      this.position.y = 300
+      this.tasklng = ''
+      this.tasklat = ''
+      this.description = ''
+    },
+    openTaskDelivery(item){
+      this.tasklng = item.longitude
+      this.tasklat = item.latitude
+      this.description = item.detailed_address
+      this.taskDeliveryShow = true
+    },
+    onMouseDown(event) {
+      this.isDragging = true;
+      this.offset.x = -event.clientX - this.position.x;
+      this.offset.y = event.clientY - this.position.y;
+
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
+    },
+    onMouseMove(event) {
+      if (this.isDragging) {
+        this.position.x = -event.clientX - this.offset.x;
+        this.position.y = event.clientY - this.offset.y;
+      }
+    },
+    onMouseUp() {
+      this.isDragging = false;
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('mouseup', this.onMouseUp);
+    },
   },
   mounted() {
     
@@ -323,5 +377,11 @@ export default {
     right: -429px;
     opacity: 1;
   }
+  .task {
+    width: 540px;
+    height:480px;
+    position: absolute;
+    z-index:100;
+  }
 }
 </style>

src/views/home/widget/taskDelivery.vue

@@ -80,7 +80,7 @@ import { getMethodCommon } from '../../../api/common';
 let BASE_URL = process.env.VUE_APP_BASE_API;
 export default {
     name: 'taskDelivery',
-    props: ['globalmap', 'lng', 'lat'],
+    props: ['globalmap', 'lng', 'lat', 'description'],
     data() {
         return {
             location: '',
@@ -107,7 +107,10 @@ export default {
     mounted() {
         if (this.lat) {
             this.location = this.lng + "," + this.lat;
-        } 
+        }
+        if(this.description){
+            this.content = this.description
+        }
     },
     methods: {
         selectChange(e){