333

src/views/dashboard/components/OneMap.vue

@@ -1,177 +1,151 @@
 <template>
-  <div class="container">
-    <div
-      class="map-container"
-      :="getMapOptions"
-    />
 
-    <div
+  <div
+    class="map-container"
+    :="getMapOptions"
+  />
+
+  <div
+
+    id="airOverlay"
+    class="airport-overlay"
+  >
+    <span
+      id="closeAir"
+      class="close-overlay"
+      @click="hideAirInfo"
+    >x</span>
+    <air-info :data="airDetail" />
+  </div>
+  <div
+
+    v-show="problemPopupShow"
+    id="problemOverlay"
+    class="problem-overlay"
+  >
+    <span
+      class="close-overlay"
+      @click="hideProblemInfo"
+    >x</span>
+    <problem-info :detail="problemDetail" />
+  </div>
 
-      id="airOverlay"
-      class="airport-overlay"
-    >
+  <div
+    v-show="listChecked"
+    class="menu"
+  >
+    <div class="tabBar">
       <span
-        id="closeAir"
-        class="close-overlay"
-        @click="hideAirInfo"
-      >x</span>
-      <air-info :data="airDetail" />
-    </div>
-    <div
-
-      v-show="problemPopupShow"
-      id="problemOverlay"
-      class="problem-overlay"
-    >
+        :class="[tabIndex==1?'checkedColor':'uncheckedColor']"
+        style="margin-right:97px"
+        @click="showTask"
+      >任务</span>
       <span
-        class="close-overlay"
-        @click="hideProblemInfo"
-      >x</span>
-      <problem-info :detail="problemDetail" />
+        :class="[tabIndex==1?'uncheckedColor':'checkedColor']"
+        @click="showProblem"
+      >问题</span>
     </div>
     <div
-      v-show="false"
-      class="task-question"
+      v-if="tabIndex==1"
+      class="listDetail"
     >
-      <n-card style="margin-bottom: 16px">
-        <n-tabs
-          type="line"
-          animated
+      <ul>
+        <li
+          v-for="(item,index) in taskList"
+          :key="index"
+          style="display:flex;font-size:14px"
         >
+          <div style="width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ item.taskName }}</div>
+          <div style="width:42px">{{ item.statusInfo }}</div>
 
-          <n-tab-pane
-            name="question"
-            tab="问题"
+          <n-popconfirm
+            v-if="item.status==1"
+            @positive-click="handlePositiveClick(item)"
+            @negative-click="handleNegativeClick"
           >
-            <n-date-picker
-              :on-update:formatted-value="abc"
-              :default-formatted-value="efg"
-              type="daterange"
-              :default-value="[Date.now() - 6.048e8, Date.now()]"
-              :is-date-disabled="disablePreviousDate"
-            />
-
-          </n-tab-pane>
-        </n-tabs>
-      </n-card>
+            <template #trigger>
+              <span style="color:#22D33D">立即执行</span>
+            </template>
+            是否立即开始执行任务?
+          </n-popconfirm>
+          <div
+            v-else
+            style="color:#1890FF"
+            @click="liveShow(item)"
+          >直播</div>
+        </li>
+
+      </ul>
+      <n-pagination
+        v-model:page="page"
+        :page-count="pageCount"
+        :page-slot="7"
+        style="color:#FFFFFF;position:absolute;bottom:10px;left:10px"
+      />
     </div>
     <div
-      v-show="listChecked"
-      class="menu"
+      v-else
+      class="listDetail"
     >
-      <div class="tabBar">
-        <span
-          :class="[tabIndex==1?'checkedColor':'uncheckedColor']"
-          style="margin-right:97px"
-          @click="showTask"
-        >任务</span>
-        <span
-          :class="[tabIndex==1?'uncheckedColor':'checkedColor']"
-          @click="showProblem"
-        >问题</span>
-      </div>
-      <div
-        v-if="tabIndex==1"
-        class="listDetail"
-      >
-        <ul>
-          <li
-            v-for="(item,index) in taskList"
-            :key="index"
-            style="display:flex;font-size:14px"
-          >
-            <div style="width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ item.taskName }}</div>
-            <div style="width:42px">{{ item.statusInfo }}</div>
-
-            <n-popconfirm
-              v-if="item.status==1"
-              @positive-click="handlePositiveClick(item)"
-              @negative-click="handleNegativeClick"
-            >
-              <template #trigger>
-                <span style="color:#22D33D">立即执行</span>
-              </template>
-              是否立即开始执行任务?
-            </n-popconfirm>
-            <div
-              v-else
-              style="color:#1890FF"
-              @click="liveShow(item)"
-            >直播</div>
-          </li>
-
-        </ul>
-        <n-pagination
-          v-model:page="page"
-          :page-count="pageCount"
-          :page-slot="7"
-          style="color:#FFFFFF;position:absolute;bottom:10px;left:10px"
-        />
-      </div>
-      <div
-        v-else
-        class="listDetail"
+      <n-date-picker
+        :on-update:formatted-value="abc"
+        :default-formatted-value="efg"
+        type="daterange"
+        :default-value="[Date.now() - 6.048e8, Date.now()]"
+        :is-date-disabled="disablePreviousDate"
+        style="margin-bottom:15px"
+      />
+      <!-- 多选框 -->
+      <n-checkbox-group
+        v-model:value="problemTypeSelected"
+        @update:value="handleProblemTypeValue"
       >
-        <n-date-picker
-          :on-update:formatted-value="abc"
-          :default-formatted-value="efg"
-          type="daterange"
-          :default-value="[Date.now() - 6.048e8, Date.now()]"
-          :is-date-disabled="disablePreviousDate"
-          style="margin-bottom:15px"
-        />
-        <!-- 多选框 -->
-        <n-checkbox-group
-          v-model:value="problemTypeSelected"
-          @update:value="handleProblemTypeValue"
+        <div
+          v-for="(item,index) in problemTypeList"
+          :key="index"
         >
-          <div
-            v-for="(item,index) in problemTypeList"
-            :key="index"
-          >
-            <n-checkbox
-              :value="item.content"
-              :label="item.content"
-              style="color:#FFFFFF"
-            />
-          </div>
+          <n-checkbox
+            :value="item.content"
+            :label="item.content"
+            style="color:#FFFFFF"
+          />
+        </div>
 
-        </n-checkbox-group>
+      </n-checkbox-group>
 
-      </div>
     </div>
-    <div class="menuControl">
-      <div
-        style="border-bottom:1px solid rgba(1122,112,112,0.65)"
-        class="item"
-      >
-        <div @click="showList">
-          <img
-            v-if="listChecked==true"
-            src="../../../assets/images/listChecked.png"
-          >
-          <img
-            v-else
-            src="../../../assets/images/listUnchecked.png"
-          >
-        </div>
-
-        <span :style="{'color':listChecked?'#1890FF':'#666666'}">列表</span>
+  </div>
+  <div class="menuControl">
+    <div
+      style="border-bottom:1px solid rgba(1122,112,112,0.65)"
+      class="item"
+    >
+      <div @click="showList">
+        <img
+          v-if="listChecked==true"
+          src="../../../assets/images/listChecked.png"
+        >
+        <img
+          v-else
+          src="../../../assets/images/listUnchecked.png"
+        >
       </div>
-      <div class="item">
-        <div @click="showAirportList">
-          <img
-            v-if="airportSelected==true"
-            src="../../../assets/images/airportChecked.png"
-          >
-          <img
-            v-else
-            src="../../../assets/images/airportUnchecked.png"
-          >
-        </div>
 
-        <span :style="{'color':airportSelected?'#1890FF':'#666666'}">机场</span>
+      <span :style="{'color':listChecked?'#1890FF':'#666666'}">列表</span>
+    </div>
+    <div class="item">
+      <div @click="showAirportList">
+        <img
+          v-if="airportSelected==true"
+          src="../../../assets/images/airportChecked.png"
+        >
+        <img
+          v-else
+          src="../../../assets/images/airportUnchecked.png"
+        >
       </div>
+
+      <span :style="{'color':airportSelected?'#1890FF':'#666666'}">机场</span>
     </div>
   </div>