详情

src/components/ParagraphTitle/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="ParagraphTitle-container" :style="{ height: height }">
+    <div class="ParagraphTitle-header">
+      <div
+        class="ParagraphTitle-line"
+        :style="{ backgroundColor: theme }"
+      ></div>
+      <div class="ParagraphTitle-text">{{ title }}</div>
+    </div>
+    <div class="ParagraphTitle-body">
+        <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useSettingsStore from "@/store/modules/settings";
+const theme = computed(() => useSettingsStore().theme);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "默认标题",
+  },
+  height: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style scoped>
+.ParagraphTitle-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.ParagraphTitle-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ParagraphTitle-line {
+  height: 20px;
+  width: 6px;
+}
+.ParagraphTitle-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  font-family: "MiSans-Medium";
+}
+.ParagraphTitle-body {
+  flex: 1;
+}
+</style>

src/components/tableOperation/index.vue

@@ -77,6 +77,7 @@ const clickSub = () => {
 
   .operation-panel {
     height: calc(100% - 50px);
+    padding: 10px;
     overflow-y: auto;
   }
 }

src/main.js

@@ -47,6 +47,8 @@ import DictTag from '@/components/DictTag'
 import tablePage from '@/components/tablePage'
 // 统一操作页
 import tableOperation from '@/components/tableOperation'
+//段落标题
+import ParagraphTitle from '@/components/ParagraphTitle'
 
 const app = createApp(App)
 
@@ -74,6 +76,7 @@ app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('tablePage', tablePage)
 app.component('tableOperation', tableOperation)
+app.component('ParagraphTitle', ParagraphTitle)
 
 app.use(router)
 app.use(store)

src/views/emergency/workOrder/components/chargeBack.vue

@@ -37,7 +37,7 @@
 
 <script setup>
 const { proxy } = getCurrentInstance();
-import { retreatyj } from "@/api/emergency-rescue";
+import { retreatyj } from "@/api/emergency";
 const props = defineProps({
   title: {
     type: String,

src/views/emergency/workOrder/components/distriBute.vue

@@ -34,7 +34,7 @@
 
 <script setup>
 const { proxy } = getCurrentInstance();
-import { distributeyj } from "@/api/emergency-rescue";
+import { distributeyj } from "@/api/emergency";
 const props = defineProps({
   title: {
     type: String,

src/views/emergency/workOrder/components/feedBack.vue

@@ -38,7 +38,7 @@
 
 <script setup>
 const { proxy } = getCurrentInstance();
-import { feedBackyj } from "@/api/emergency-rescue";
+import { feedBackyj } from "@/api/emergency";
 const props = defineProps({
   title: {
     type: String,

src/views/emergency/workOrder/components/operation.vue

@@ -147,7 +147,7 @@
 </template>
 
 <script setup>
-import { addyj, updateyj, intruderyj, getyjById } from "@/api/emergency-rescue";
+import { addyj, updateyj, intruderyj, getyjById } from "@/api/emergency";
 import MarsMap from "@/components/mars-work/mars-map.vue";
 import mapOptions from "@/components/mars-work/mapOptions";
 import markerIcon from "@/assets/images/map-marker.png";

src/views/emergency/workOrder/index.vue

@@ -1,5 +1,4 @@
 <template>
-
   <tablePage @handlerAdd="handlerAdd()" @handlerExport="handlerExport()">
     <template #search>
       <el-form
@@ -60,12 +59,15 @@
         </el-form-item>
         <el-form-item label="录入时间" prop="userName">
           <el-date-picker
+            v-model="datePicker"
             type="datetimerange"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
-            format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD"
-            date-format="YYYY/MM/DD ddd"
+            value-format="YYYY-MM-DD"
-            time-format="A hh:mm:ss"
+            date-format="YYYY-MM-DD"
+            time-format="YYYY-MM-DD"
+            @change="changeDatepicker"
           />
         </el-form-item>
 
@@ -254,13 +256,11 @@
     <!-- 处理反馈 -->
     <feedBack v-model="feedBackView" :id="workId" @confirm="getList()" />
   </tablePage>
-   
-
 </template>
 
 <script setup>
 import { operation, chargeBack, distriBute, feedBack } from "./index";
-import { getyjList, delyj, getDetListById } from "@/api/emergency-rescue";
+import { getyjList, delyj, getDetListById } from "@/api/emergency";
 import { ref } from "vue";
 import { onMounted } from "vue";
 import useUserStore from "@/store/modules/user";
@@ -278,7 +278,7 @@ const { gdlx, gdms, gdlevel, clfa, zyxt, dflx, gd_status, reason } =
     "gd_status",
     "reason"
   );
-
+const datePicker = ref([]);
 const workId = ref(null);
 const loading = ref(false);
 const list = ref([]);
@@ -297,6 +297,8 @@ const data = reactive({
     gdType: undefined,
     gdLevel: undefined,
     status: undefined,
+    begainTime: undefined,
+    endTime: undefined,
     current: 1,
     size: 10,
   },
@@ -310,6 +312,14 @@ onMounted(() => {
   getDeptTree();
 });
 
+// 日期变换
+const changeDatepicker = (e) => {
+  if (e) {
+    queryParams.value.begainTime = e[0];
+    queryParams.value.endTime = e[1];
+  }
+};
+
 /**
  * 获取列表数据
  */
@@ -344,6 +354,10 @@ const handleQuery = () => {
  */
 const resetQuery = () => {
   proxy.resetForm("queryRef");
+  datePicker.value = [];
+
+  queryParams.value.begainTime = undefined;
+  queryParams.value.endTime = undefined;
   handleQuery();
 };
 
@@ -420,9 +434,9 @@ const handlerExport = () => {
 /**
  * 详情
  */
-const handlerInfo = () => {
+const handlerInfo = (row) => {
   proxy.setActiveMenu();
-  router.push("/emergency/workOrder-info");
+  router.push({ path: "/emergency/workOrder-info", query: { id: row.id } });
 };
 </script>
 

src/views/emergency/workOrder/info.vue

@@ -1,10 +1,182 @@
 <template>
-    <tableOperation>11111</tableOperation>
+  <tableOperation :showSub="false">
-  </template>
+    <ParagraphTitle title="工单基本信息">
+      <div class="form-data">
+        <div class="form-item">
+          <div class="form-label">工单地址</div>
+          <div class="form-value">{{ form.address }}</div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">资源协调</div>
+          <div class="form-value ">
+            <dict-tag showValue="解析出错" :options="zyxt" :value="form.zyxt" />
+          </div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">工单类型</div>
+          <div class="form-value">
+            <dict-tag showValue="解析出错" :options="gdlx" :value="form.gdType" />
+           </div>
+        </div>
+        <div class="form-item" v-if="form.gdType == 0">
+          <div class="form-label">倒伏类型</div>
+          <div class="form-value">{{ form.dflx }}</div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">处理班组</div>
+          <div class="form-value">{{ form.clbz }}</div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">工单等级</div>
+          <div class="form-value">
+            <dict-tag showValue="解析出错" :options="gdlevel" :value="form.gdLevel" />
+            </div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">工单图片</div>
+          <div class="form-value value-row ">
+            <ImagePreview
+              width="80px"
+              height="80px"
+              v-for="(item, index) in form.gdtp"
+              :key="index"
+              :src="item"
+            ></ImagePreview>
+          </div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">简要</div>
+          <div class="form-value">
+            <dict-tag showValue="解析出错" :options="gdms" :value="form.gdms" />
            
-  <script setup>
+          </div>
-  </script>
+        </div>
+        <div class="form-item">
+          <div class="form-label">处理方案</div>
+          <div class="form-value">
+            <dict-tag showValue="解析出错" :options="clfa" :value="form.clfa" />
+            </div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">处理描述</div>
+          <div class="form-value">{{ form.clms }}</div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">派遣人数</div>
+          <div class="form-value">{{ form.pqrs }} 人</div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">派遣车辆</div>
+          <div class="form-value">{{ form.pqcl }} 辆</div>
+        </div>
+        <div class="form-item">
+          <div class="form-label">处理后图片</div>
+          <div class="form-value value-row ">
+            <ImagePreview
+              width="80px"
+              height="80px"
+              v-for="(item, index) in form.clhtp"
+              :key="index"
+              :src="item"
+            ></ImagePreview>
+          </div>
+        </div>
+      </div>
+    </ParagraphTitle>
+    <ParagraphTitle title="工单流程信息"></ParagraphTitle>
+  </tableOperation>
+</template>
 
-  <style  scoped>
+<script setup>
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { getyjById } from "@/api/emergency";
+const { proxy } = getCurrentInstance();
+const { gdlx, gdms, gdlevel, clfa, zyxt, dflx, gd_status, reason } =
+  proxy.useDict(
+    "gdlx",
+    "gdms",
+    "gdlevel",
+    "clfa",
+    "zyxt",
+    "dflx",
+    "gd_status",
+    "reason"
+  );
 
-  </style>
+const route = useRoute();
+const id = route.query.id;
+let form = reactive({});
+
+onMounted(() => {
+  getInfo();
+});
+
+/**
+ * 获取详情
+ */
+const getInfo = async () => {
+  const res = await getyjById(id);
+  //字符转数组字段
+  res.data.gdtp = filterImages(res.data.gdtp);
+  res.data.clhtp = filterImages(res.data.clhtp);
+  res.data.zyxt = filterImages(res.data.zyxt);
+
+  Object.assign(form, res.data);
+  console.log(form);
+};
+
+const filterImages = (imgSting) => {
+  if (imgSting) {
+    return imgSting.split(",");
+  } else {
+    [];
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.form-data {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 等同于 1fr 1fr */
+  border: 1px solid #dcdfe6;
+  .form-item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #dcdfe6;
+    .form-label {
+     
+      height: 100%;
+      width: 150px;
+      font-weight: 15px;
+      color: #606266;
+      font-weight: bold;
+      background-color: #f5f7fa;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .form-value {
+      flex: 1;
+    }
+    .value-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    & > div {
+      padding: 13px;
+    }
+  }
+  & > .form-item:nth-child(odd) .form-label {
+    border-right: 1px solid #dcdfe6;
+  }
+  & > .form-item:nth-child(even) .form-label {
+    border-left: 1px solid #dcdfe6;
+    border-right: 1px solid #dcdfe6;
+  }
+  & > .form-item:last-child {
+    border: 0;
+  }
+}
+</style>