From 081820957ad553ed606cfc00ba0e58059ccf5c35 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Mon, 15 Jan 2024 14:17:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=BD=91=E7=AE=A1=E6=8E=A7=20?=
 =?UTF-8?q?=E5=80=BC=E7=8F=AD=E4=BA=BA=E5=91=98=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=80=BC=E7=8F=AD=E4=BA=BA=E5=91=98=E4=BF=A1=E6=81=AF=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=20UI=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dialog/index.vue               |  30 ++--
 .../components/FormConfig/index.vue           |  12 +-
 .../images/dialog/icon-close.png              | Bin 281 -> 0 bytes
 .../images/dialog/icon-close.svg              |   6 +
 .../images/dialog/right-bottom.svg            |   9 ++
 .../images/dialog/title-icon.svg              |   6 +
 .../ModifyDutyInformationTable copy.vue       | 119 +++++++++++++++
 .../components/ModifyDutyInformationTable.vue | 137 ++++++++++++++----
 .../views/dutyOfficer/images/Line.svg         |  12 ++
 9 files changed, 285 insertions(+), 46 deletions(-)
 delete mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.png
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
index 454f83f0..ec5d2c6d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
@@ -4,13 +4,15 @@
       <div class="mask-layer" v-if="modelVisible">
         <div class='dialog'>
           <div class="dialog-title">
-            <img class="title-icon" src="@screen/images/title/title-icon.png" />
+            <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
             <span>{{ title }}</span>
-            <img class="icon-close" @click="modelVisible = false" src="@screen/images/dialog/icon-close.png" />
+            <img class="icon-close" @click="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
           </div>
           <div class="dialog-content">
             <slot />
           </div>
+
+          <img class="bottom-right" src="@screen/images/dialog/right-bottom.svg">
         </div>
       </div>
     </Transition>
@@ -108,8 +110,7 @@ export default {
     padding-top: 3px;
     align-items: center;
     justify-content: space-between;
-    background: url("~@screen/images/title/box-title.png") no-repeat;
-    background-size: 100% 100%;
+    background: linear-gradient(90deg, #267494 0%, rgba(38, 116, 148, 0) 100%);
     font-size: 19px;
     font-family: PingFang SC, PingFang SC;
     font-weight: 500;
@@ -117,9 +118,9 @@ export default {
 
     .title-icon {
       position: absolute;
-      top: 0;
-      width: 258px;
-      height: 5px;
+      top: -1px;
+      left: -1px;
+      height: 6px;
     }
 
     .icon-close {
@@ -138,17 +139,12 @@ export default {
   .dialog-content {
     padding: 10px 20px 20px 20px;
     max-height: 96vh;
+  }
 
-    .icon-content {
-      display: flex;
-
-      img {
-        display: inline-block;
-        // width: 23px;
-        // height: 21px;
-        margin-right: 10px;
-      }
-    }
+  .bottom-right {
+    position: absolute;
+    right: 0;
+    bottom: 0;
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
index 59f1c70a..b1b54877 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
@@ -3,7 +3,7 @@
     <ElFormItem class="formItem" :rules="rules && rules[item.key]" v-for="(item, index) in formList" :key="item.key"
       :label="item.label" :style="gridStyle(item, index)">
       <slot :name="item.key" :data="item" :formData="formData">
-        <component :is="getComponent(item.type)" v-bind="item.options" placeholder="请输入" v-model="formData[item.key]" />
+        <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]" />
       </slot>
     </ElFormItem>
   </ElForm>
@@ -72,6 +72,12 @@ export default {
         gridTemplateColumns: `repeat(${this.column}, 1fr)`,
       }
     },
+    getBindData(item) {
+      return {
+        placeholder: "请输入",
+        ...item.options
+      }
+    },
     getComponent(type) {
       return `El${type.replace(/^[a-z]/, word => word.toUpperCase())}`
     }
@@ -100,13 +106,13 @@ export default {
 
       &:first-child {
         .el-form-item__label-wrap {
-          padding-top: 9px;
+          // padding-top: 9px;
         }
       }
 
       .el-form-item__label-wrap {
         width: fit-content;
-        align-self: start;
+        // align-self: start;
 
         .el-form-item__label {
           height: 22px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.png b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.png
deleted file mode 100644
index 666c4d0b14b2fdd308ba950cb6ae1218b81b09af..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 281
zcmeAS@N?(olHy`uVBq!ia0vp^{2<K11|+SoP4xm&jKx9jP7LeL$-D$|E_=E-hFJI~
zo78=aZ|Uw#v}9IxKA%{4Y%Y%r!|Lz<pU$i|I+JL!<9~d^^vMrx4%f4BvZ=K(II%gH
z$}y}=XNgSt_-8+pw({XRCpLv_mPnRsK0S;tq#X5HvX7-RnDr`r)tI$W^27Arhisqy
z**3^uJj~*3+{VbmlP@75;j)2ME$plUb58vK?dd;G7cd<8cmBkM0+%@(1#QJPX1RS-
z)-+qpe(rrek9nc1a@W}%PNLyf4cW(*3dUP8WUDO^oX*&Dp{H<Gz@;N;3_8hc)KtSA
d4=0#0h<~1YD`5ijb)fecJYD@<);T3K0RSbIW{&^>

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg
new file mode 100644
index 00000000..ccc92b57
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/icon-close.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814160">
+<path id="Vector" d="M1 1L14 14" stroke="#3DE8FF" stroke-width="1.6" stroke-linecap="round"/>
+<path id="Vector_2" d="M1 14L14 1" stroke="#3DE8FF" stroke-width="1.6" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg
new file mode 100644
index 00000000..05beeab2
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/right-bottom.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 159" d="M30 0V30H0" stroke="url(#paint0_linear_195_2076)" stroke-width="3.2"/>
+<defs>
+<linearGradient id="paint0_linear_195_2076" x1="30.8108" y1="30" x2="16.6053" y2="15.4106" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3DE8FF"/>
+<stop offset="1" stop-color="#3DE8FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg
new file mode 100644
index 00000000..c93c4dbd
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/dialog/title-icon.svg
@@ -0,0 +1,6 @@
+<svg width="258" height="5" viewBox="0 0 258 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814161">
+<path id="Rectangle 623" opacity="0.4" d="M0 0H258L253.193 5H0V0Z" fill="#3DE8FF"/>
+<path id="Rectangle 624" d="M0 0H158.646L153.839 5H0V0Z" fill="#3DE8FF"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue
new file mode 100644
index 00000000..71f7ba92
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable copy.vue	
@@ -0,0 +1,119 @@
+<template>
+  <Dialog v-model="visibleModel" title="修改值班信息表">
+    <div class="ModifyDutyInformationTable">
+      <div class="search">
+        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2"
+          style="flex: 1;" />
+
+        <ButtonGradient>
+          <template #prefix>
+            <img src="@screen/images/form/search.svg" />
+          </template>
+          刷新
+        </ButtonGradient>
+      </div>
+      <div class="body">
+        <SelectList v-for="item in list" :data="item" />
+      </div>
+      <div class="bottom">
+        <Button>确认</Button>
+        <Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue"
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Form from '@screen/components/FormConfig';
+
+import SelectList from "./../../../components/SelectList.vue"
+
+export default {
+  name: 'ModifyDutyInformationTable',
+  components: {
+    Dialog,
+    Button,
+    ButtonGradient,
+    SelectList,
+    Form
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emit: ['close'],
+  data() {
+    return {
+      formList: [{
+        label: "值班时间:",
+        key: "事件源",
+        type: "timePicker",
+      },
+      {
+        label: "操作人员:",
+        key: "桩号:",
+        type: "input",
+      }],
+      list: Array.from({ length: 15 }).map(item => ({
+        title: "123456",
+        list: Array.from({ length: 15 }).map((_, index) => ({
+          name: index,
+          phone: "12345678901"
+        }))
+      }))
+    }
+  },
+  computed: {
+    visibleModel: {
+      get() {
+        return this.visible
+      },
+      set(bool) {
+        this.$emit('close', bool);
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.ModifyDutyInformationTable {
+  width: 947px;
+  height: 658px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .search {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    justify-content: space-between;
+
+  }
+
+  .body {
+    display: flex;
+    gap: 9px;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .bottom {
+    display: flex;
+    gap: 15px;
+    justify-content: end;
+
+    >div {
+      width: 96px;
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
index 71f7ba92..f000d588 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
@@ -2,18 +2,35 @@
   <Dialog v-model="visibleModel" title="修改值班信息表">
     <div class="ModifyDutyInformationTable">
       <div class="search">
-        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2"
-          style="flex: 1;" />
-
-        <ButtonGradient>
-          <template #prefix>
-            <img src="@screen/images/form/search.svg" />
-          </template>
-          刷新
-        </ButtonGradient>
+        <InputSearch style="width: 402px;" />
+
       </div>
       <div class="body">
-        <SelectList v-for="item in list" :data="item" />
+        <div class="people">
+          <div v-for="item in 36" :key="item">
+            <span>甘易玫</span>
+            <span>13011600555</span>
+          </div>
+        </div>
+        <img src="./../images/Line.svg">
+        <div class="dutyPeople">
+          <div class="line">
+            <p>白天值班:</p>
+            <div>
+              <p v-for="item in 15">甘易玫</p>
+            </div>
+          </div>
+          <div class="line">
+            <p>晚上值班:</p>
+            <div>
+              <p v-for="item in 15">甘易玫</p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="1"
+            style="flex: 1;" />
+        </div>
       </div>
       <div class="bottom">
         <Button>确认</Button>
@@ -26,18 +43,15 @@
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
-import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import InputSearch from '@screen/components/InputSearch/index.vue';
 import Form from '@screen/components/FormConfig';
 
-import SelectList from "./../../../components/SelectList.vue"
-
 export default {
   name: 'ModifyDutyInformationTable',
   components: {
     Dialog,
     Button,
-    ButtonGradient,
-    SelectList,
+    InputSearch,
     Form
   },
   props: {
@@ -49,16 +63,16 @@ export default {
   emit: ['close'],
   data() {
     return {
-      formList: [{
-        label: "值班时间:",
-        key: "事件源",
-        type: "timePicker",
-      },
-      {
-        label: "操作人员:",
-        key: "桩号:",
-        type: "input",
-      }],
+      formList: [
+        {
+          label: "操作人员:",
+          key: "input",
+          type: "input",
+          options: {
+            placeholder: "请输入人员名称"
+          }
+        }
+      ],
       list: Array.from({ length: 15 }).map(item => ({
         title: "123456",
         list: Array.from({ length: 15 }).map((_, index) => ({
@@ -100,10 +114,81 @@ export default {
 
   .body {
     display: flex;
-    gap: 9px;
+    flex-direction: column;
+    gap: 24px;
     height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
+    flex: 1;
+
+    .people {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-auto-rows: 65px;
+      gap: 9px;
+      flex: 1;
+      overflow-y: auto;
+
+      >div {
+        height: 65px;
+        background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%);
+        border-radius: 2px;
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-direction: column;
+        cursor: pointer;
+        padding: 9px 12px;
+      }
+    }
+
+    .dutyPeople {
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+
+      >div {
+        display: flex;
+        gap: 9px;
+        border-radius: 2px;
+        opacity: 1;
+        overflow: hidden;
+
+        p {
+          background: linear-gradient(180deg, rgba(1, 167, 220, 0) 0%, #01A7DC 100%);
+          height: 42px;
+          display: flex;
+          align-items: center;
+          padding: 15px 24px;
+
+          font-size: 16px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #FFFFFF;
+
+          border-radius: 2px;
+
+          cursor: pointer;
+        }
+
+        >div {
+          flex: 1;
+          display: flex;
+          gap: 9px;
+          // flex-shrink: 1;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          overflow: hidden;
+          overflow-x: auto;
+        }
+      }
+    }
   }
 
   .bottom {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg
new file mode 100644
index 00000000..60aaeeba
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/images/Line.svg
@@ -0,0 +1,12 @@
+<svg width="750" height="1" viewBox="0 0 750 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line id="Line" x1="4.37114e-08" y1="0.5" x2="750" y2="0.500066" stroke="url(#paint0_linear_198_2334)"/>
+<defs>
+<linearGradient id="paint0_linear_198_2334" x1="-35.3774" y1="2.00013" x2="799.528" y2="2.00057" gradientUnits="userSpaceOnUse">
+<stop stop-color="#033C51" stop-opacity="0"/>
+<stop offset="0.0909964" stop-color="#0185B5" stop-opacity="0.55"/>
+<stop offset="0.481139" stop-color="#0185B5"/>
+<stop offset="0.867241" stop-color="#0185B5" stop-opacity="0.55"/>
+<stop offset="1" stop-color="#033C51" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>