实现新增事件简报页面样式

src/views/mobileControl/Briefing.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="briefing-container">
+    <div class="float-box" @click="onClick">
+      <van-icon name="plus" class="addIcon" />
+    </div>
+    <van-pull-refresh
+      v-model="refreshing"
+      style="height: calc(100% - 1px); overflow: auto"
+      @refresh="onRefresh"
+    >
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <van-cell
+          v-for="(item, index) in list"
+          :key="index"
+          :name="item"
+          :context="item"
+          class="event-card-item"
+        >
+          <div class="event-card">
+            <div class="unitname">{{ item.name }}</div>
+            <div style="color: black">{{ item.time }}</div>
+          </div>
+          <div style="color: black; text-align: left">{{ item.context }}</div>
+          <div style="color: black; text-align: left">
+            图片：
+            <img
+              v-for="file in item.image"
+              :key="file.uid"
+              class="image"
+              :src="get_img_url(file.url)"
+              style="max-width: 100px; max-height: 100px"
+            />
+          </div>
+        </van-cell>
+      </van-list>
+    </van-pull-refresh>
+    <Workbenches v-if="isClick" v-model="isClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Workbenches from "./Workbenches.vue";
+
+let isClick = ref(false);
+const onClick = () => {
+  isClick.value = true;
+};
+const baseUrl = import.meta.env.VITE_BASE_API;
+const downLoadApi = import.meta.env.VITE_BASE_DOWNLOAD_API;
+
+const get_img_url = url => {
+  return baseUrl + downLoadApi + url;
+};
+const list = ref([
+  {
+    name: "单位名称",
+    context:
+      "简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容",
+    time: "2025-1-2 08:23:22",
+    image: [
+      {
+        uid: "8bf8c488-a191-11ef-9d8e-fa163e4bf12e",
+        status: "success",
+        name: "13339589652658371.jpeg",
+        url: "852860d8-a190-11ef-a379-fa163e4bf12e.jpeg"
+      }
+    ]
+  },
+  {
+    name: "单位名称2",
+    context:
+      "简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容简报内容",
+    time: "2025-1-2 08:23:22",
+    image: [
+      {
+        uid: "8bf8c488-a191-11ef-9d8e-fa163e4bf12e",
+        status: "success",
+        name: "13339589652658371.jpeg",
+        url: "852860d8-a190-11ef-a379-fa163e4bf12e.jpeg"
+      }
+    ]
+  }
+]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+const onLoad = () => {
+  loading.value = false;
+  finished.value = true;
+};
+const onRefresh = () => {
+  // 清空列表数据
+  finished.value = false;
+
+  // 重新加载数据
+  // 将 loading 设置为 true，表示处于加载状态
+  loading.value = true;
+  onLoad();
+};
+</script>
+
+<style scoped lang="scss">
+.briefing-container {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 43px);
+  padding-top: 1px;
+}
+
+.float-box {
+  display: flex;
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 10;
+  background-color: #1890ff;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+}
+.addIcon {
+  color: white;
+}
+.event-card {
+  display: flex;
+  justify-content: space-between;
+}
+.unitname {
+  background-color: #aaaaaa;
+  color: white;
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-right: 10px;
+  text-align: center;
+}
+.event-card-item {
+  background-color: #f2f2f2;
+  width: 360px;
+  left: 8px;
+  top: 8px;
+  margin-bottom: 10px;
+}
+</style>

src/views/mobileControl/EventBox.vue

@@ -2,31 +2,53 @@
   <div class="bottom-content">
     <div class="tabs">
       <div class="tabs-content">
-        <div :class="tabActive === '0' ? 'tab tab-active' : 'tab'" @click="handleClickTab('0')">事件信息</div>
-        <div :class="tabActive === '1' ? 'tab tab-active' : 'tab'" @click="handleClickTab('1')">任务指令</div>
+        <div
+          :class="tabActive === '0' ? 'tab tab-active' : 'tab'"
+          @click="handleClickTab('0')"
+        >
+          事件信息
+        </div>
+        <div
+          :class="tabActive === '1' ? 'tab tab-active' : 'tab'"
+          @click="handleClickTab('1')"
+        >
+          任务指令
+        </div>
+        <div
+          :class="tabActive === '2' ? 'tab tab-active' : 'tab'"
+          @click="handleClickTab('2')"
+        >
+          事件简报
+        </div>
       </div>
-      <EventInfo v-show="tabActive === '0'" :eventId="eventId" :eventDetails="eventDetails" />
-      <TaskCommand v-show="tabActive === '1'" :eventId="eventId" />
     </div>
+    <EventInfo
+      v-show="tabActive === '0'"
+      :eventId="eventId"
+      :eventDetails="eventDetails"
+    />
+    <TaskCommand v-show="tabActive === '1'" :eventId="eventId" />
+    <Briefing v-if="tabActive === '2'" :eventId="eventId" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import EventInfo from './EventInfo.vue'
-import {ref} from "vue";
-import TaskCommand from "@/views/mobileControl/TaskCommand.vue";
+import EventInfo from "./EventInfo.vue";
+import { ref } from "vue";
+import TaskCommand from "./TaskCommand.vue";
+import Briefing from "./Briefing.vue";
 interface EventDetails {
-  'event_id': String;
-  'event_title': String;
-  'event_status': String;
-  'keep_time': String;
-  'event_type': String;
-  'event_level': String;
-  'address': String;
-  'event_time': String;
-  'event_source': String;
-  'latitude': String;
-  'longitude': String
+  event_id: String;
+  event_title: String;
+  event_status: String;
+  keep_time: String;
+  event_type: String;
+  event_level: String;
+  address: String;
+  event_time: String;
+  event_source: String;
+  latitude: String;
+  longitude: String;
 }
 interface Props {
   eventId: string;
@@ -34,12 +56,11 @@ interface Props {
 }
 withDefaults(defineProps<Props>(), {});
 // 底部信息栏
-let tabActive = ref('0');
+let tabActive = ref("0");
 
-const handleClickTab = (index) => {
+const handleClickTab = index => {
   tabActive.value = index;
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -47,19 +68,19 @@ const handleClickTab = (index) => {
   width: 100%;
   height: 304px;
   background-color: #fff;
-  border: 0.5px solid #EAEDF7;
+  border: 0.5px solid #eaedf7;
   box-shadow: 0 0 4px 0 #4554661a;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   .tabs {
     width: 100%;
     height: 41px;
-    background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
     border-radius: 2px 2px 0 0;
     //padding: 0 13px;
     .tabs-content {
       width: 100%;
-      border-bottom: 1px solid #F6F6F6;
+      border-bottom: 1px solid #f6f6f6;
       display: flex;
     }
     .tab {
@@ -73,14 +94,14 @@ const handleClickTab = (index) => {
       position: relative;
       color: #2c81ff;
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         bottom: -1px;
         left: 50%;
         transform: translateX(-50%);
         width: 70px;
         height: 2px;
-        background: #2C81FF;
+        background: #2c81ff;
       }
     }
   }

src/views/mobileControl/Workbenches.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <van-popup
+      v-model:show="showRight"
+      position="right"
+      :style="{ width: '100%', height: '100%' }"
+      class="workbenches-wrapper"
+    >
+      <van-form label-align="top" @submit="onSubmit">
+        <van-cell-group inset class="one">
+          <van-field
+            v-model="workbenches.unitname"
+            name="报送单位"
+            label="报送单位"
+            placeholder="请输入报送单位"
+            :rules="[{ required: true, message: '请填写报送单位' }]"
+          />
+          <van-field
+            v-model="workbenches.briefingContent"
+            rows="6"
+            autosize
+            label=""
+            type="textarea"
+            maxlength="800"
+            placeholder="请描述事件简报"
+            show-word-limit
+            :rules="[{ required: true, message: '请填写描述' }]"
+          />
+        </van-cell-group>
+        <van-field name="fileList" label="上传文件" label-align="top">
+          <template #input>
+            <ImageUpload
+              v-model="workbenches.picture"
+              :limit="5"
+              :fileType="['png', 'jpeg', 'jpg']"
+            />
+          </template>
+        </van-field>
+        <div>
+          <van-cell-group>
+            <van-cell
+              title="获取当前位置"
+              class="getAddress"
+              @click="getAdress"
+            />
+          </van-cell-group>
+        </div>
+        <PositionSelect v-if="isGetAdress" v-model:visible="isGetAdress" />
+        <div style="margin: 16px">
+          <van-button type="default" class="cancelButton" @click="cancelButton"
+            >取消</van-button
+          >
+          <van-button type="primary" class="okButton">提交</van-button>
+        </div>
+      </van-form>
+    </van-popup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import PositionSelect from "@/views/mobileControl/PositionSelect.vue";
+
+const props = defineProps({
+  modelValue: Boolean
+});
+const emits = defineEmits(["update:modelValue"]);
+const showRight = ref(true);
+// const value = ref("");
+const isGetAdress = ref(false);
+
+
+
+
+
+let workbenches = ref({
+  unitname: "",
+  briefingContent: "",
+  picture: ""
+});
+
+const onSubmit = values => {
+  console.log("submit", values);
+};
+
+const getAdress = () => {
+  isGetAdress.value = true;
+};
+
+const cancelButton = () => {
+  emits("update:modelValue", false);
+};
+</script>
+
+<style scoped lang="scss">
+.workbenches-wrapper {
+  background-color: #f2f2f2;
+  padding: 15px;
+}
+.van-popup {
+  border-radius: 0 !important;
+}
+.one {
+  position: relative;
+  width: 344px;
+  right: 15px;
+  border-radius: 0 !important;
+}
+.okButton {
+  position: relative;
+  width: 100px;
+  left: 60px;
+  top: 60px;
+}
+.cancelButton {
+  position: relative;
+  width: 100px;
+  left: 40px;
+  top: 60px;
+}
+.getAddress {
+  position: absolute;
+  top: 12px;
+  :deep(.van-cell__title) {
+    color: grey; /* 字体颜色 */
+  }
+}
+</style>