路网管控 值班人员 修改值班人员信息弹窗 UI 修改

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>

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;

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>

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>

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>

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>

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 {

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>