From cc24def792786bb4b958caeaac7d2916414ded14 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Thu, 18 Jan 2024 07:53:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=8C=E8=BD=A6=E8=AF=B1=E5=AF=BC=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JiHeExpressway/components/Adaptation.vue  |  80 ++++++++-
 .../components/Buttons/Button.vue             |  48 +++++-
 .../FormConfig/components/ElSelect.vue        |   2 +-
 .../components/FormConfig/index.vue           |  42 ++++-
 .../components/TimeLine/TimeLine1/index.vue   |   7 +-
 .../components/DeviceControlDialog.vue        | 161 ++++++++++++++++--
 .../RoadAndEvents/utils/httpList.js           |   2 +-
 .../views/JiHeExpressway/scss/el-reset.scss   |  58 +++++++
 .../views/JiHeExpressway/utils/axios/auth.js  |   2 +-
 9 files changed, 368 insertions(+), 34 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
index 403081c7..47f79ff9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
@@ -50,12 +50,38 @@ export default {
     initScale() {
       let winW = window.innerWidth;
       let winH = window.innerHeight;
-      this.scale.scaleX = winW / this.defaultWidth;
-      this.scale.scaleY = winH / this.defaultHeight;
+
+      this.setScale(this.scale.scaleX = winW / this.defaultWidth, this.scale.scaleY = winH / this.defaultHeight)
+    },
+    setScale(scaleX, scaleY) {
+      const cssGlobalVariable = [
+        [
+          '--keep-ratio',
+          ''
+        ],
+        [
+          '--reverse-scale',
+          ''
+        ],
+      ];
+
+      if (scaleX > scaleY) {
+        cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`;
+        cssGlobalVariable[1][1] = `scaleY(${1 / scaleX})`;
+      } else {
+        cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`;
+        cssGlobalVariable[1][1] = `scaleX(${1 / scaleY})`;
+      }
+
+      cssGlobalVariable.forEach((data) => {
+        document.documentElement.style.setProperty(...data);
+      });
+
     }
   },
   mounted() {
     this.initScale();
+
     window.addEventListener(
       "resize",
       _.debounce(this.initScale.bind(this), 360)
@@ -64,6 +90,56 @@ export default {
 };
 </script>
 
+<style lang="scss">
+body {
+  .keep-ratio {
+    transform: var(--keep-ratio);
+    transition: all .15s linear;
+
+    &[origin] {
+      transform-origin: attr(origin);
+    }
+
+    &-left {
+      transform-origin: left;
+    }
+
+    &-right {
+      transform-origin: right;
+    }
+
+    &-bottom {
+      transform-origin: bottom;
+    }
+
+    &-top {
+      transform-origin: top;
+    }
+  }
+
+  .reverse-scale {
+    transform: var(--reverse-scale);
+    transition: all .15s linear;
+
+    &-left {
+      transform-origin: left;
+    }
+
+    &-right {
+      transform-origin: right;
+    }
+
+    &-bottom {
+      transform-origin: bottom;
+    }
+
+    &-top {
+      transform-origin: top;
+    }
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .Adaptation {
   transition: all 0.15s linear;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Buttons/Button.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Buttons/Button.vue
index 06b7bb5d..7b084eb5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Buttons/Button.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Buttons/Button.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class='Button'>
+  <div class='Button' ref="ButtonRef" v-loading="loading" element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(60, 60, 60, 0.6)">
     <slot name="prefix" />
     {{ content }}
     <slot v-if="!content" />
@@ -11,7 +12,27 @@
 export default {
   name: 'Button',
   props: {
-    content: String
+    content: String,
+    loading: Boolean
+  },
+  watch: {
+    loading: {
+      handler(bool) {
+        if (!bool) return;
+
+        this.$nextTick(() => {
+          setTimeout(() => {
+            const maskDom = this.$refs.ButtonRef.querySelector("div.el-loading-mask");
+            if (!maskDom) return;
+
+            maskDom.onclick = e => {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          });
+        });
+      }
+    }
   }
 }
 </script>
@@ -21,13 +42,34 @@ export default {
   height: 24px;
   padding: 0 15px;
   background: #00B3CC;
-  border-radius: 48px 48px 48px 48px;
+  border-radius: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 1;
 
+  ::v-deep {
+    div.el-loading-mask {
+      display: flex;
+      border-radius: 48px;
+      align-items: center;
+      justify-content: center;
+
+      div.el-loading-spinner {
+        position: relative;
+        top: unset;
+        z-index: 999;
+
+        margin: 0;
+
+        i {
+          color: #fff;
+        }
+      }
+    }
+  }
+
   gap: 6px;
 
   font-size: 14px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
index 53c1361d..b3797fbc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <ElSelect v-bind="$attrs" v-on="$listeners">
-    <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    <ElOption v-for="item in options" :key="item.key || item.value" :label="item.label" :value="item.key || item.value">
       <component :is="optionComponent" />
     </ElOption>
   </ElSelect>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
index 5d26eff6..e93ec547 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
@@ -1,11 +1,13 @@
 <template>
   <ElForm :style="getStyle()" :label-width="labelWidth" class="FormConfig" size="mini">
-    <ElFormItem class="formItem" :rules="getRules(item)" 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="getBindData(item)" v-model="formData[item.key]" />
-      </slot>
-    </ElFormItem>
+    <template v-for="(item, index) in formList">
+      <ElFormItem class="formItem" :rules="getRules(item)" v-if="formItemVisible(item)" :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="getBindData(item)" v-model="formData[item.key]" />
+        </slot>
+      </ElFormItem>
+    </template>
   </ElForm>
 </template>
 
@@ -78,6 +80,17 @@ export default {
         gridRow: `span ${item.gridRow || 1}`,
         gridColumn: `span ${item.gridColumn || item.isAlone && this.column || 1}`,
       })
+    },
+    formItemVisible() {
+      return item => {
+        const result = item.visible ? item.visible(this.formData) : true;
+
+        if (!result) {
+          delete this.formData[item.key];
+        }
+
+        return result;
+      }
     }
   },
   methods: {
@@ -122,6 +135,23 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.list-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 1s;
+  position: absolute;
+}
+
+.list-enter,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
 .FormConfig {
   display: grid;
   align-content: start;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
index 2b665c5e..c47194dc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
@@ -2,21 +2,22 @@
   <div :class='["TimeLine1", { "auto-size": autoSize }]' ref="TimeLine1Ref">
     <!-- 节点 -->
     <div class="node" v-for="(item, index) in data" ref="nodeRefs">
-      <span class="top-label">
+      <span class="top-label keep-ratio-bottom">
         <slot name="bottom-label" :data="item">
           {{ item.time }}
         </slot>
       </span>
       <div class="center">
         <div class="line" v-if="!index" :style="{ width: `${nodeLinesWidth[-1]}px` }" />
-        <div class="circle" :style="{ '--active-color': !item.isActive ? normalColor : activeColor }"></div>
+        <div class="circle keep-ratio" :style="{ '--active-color': !item.isActive ? normalColor : activeColor }">
+        </div>
         <div class="line" :style="{
           width: `${nodeLinesWidth[index]}px`,
           borderImage: getBorderImageStyle(item),
         }" />
       </div>
       <slot name="bottom-label" :data="item">
-        <div class="bottom"
+        <div class="bottom keep-ratio"
           :style="{ backgroundImage: `url(${require(`./images/bg${item.isActive ? '-active' : ''}.svg`)})` }">
           {{ item.label }}
         </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
index 316dc860..446f90bd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
@@ -1,13 +1,13 @@
 <template>
   <Dialog v-model="modelVisible" title="设备操作">
     <div class='DeviceControlDialog'>
-      <Form class="form" ref="FormConfigRef" :formList="formList" column="1" style="flex: 1;" labelWidth="90px" />
+      <Form class="form" ref="FormConfigRef" :formList="formList" column="1" style="flex: 1;" labelWidth="120px" />
 
       <div class="footer">
-        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false">
+        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false">
           取消
         </Button>
-        <Button @click.native="handleSearch">
+        <Button @click.native="handleSubmit" :loading="submitting">
           确定
         </Button>
       </div>
@@ -21,6 +21,33 @@ import Button from "@screen/components/Buttons/Button.vue"
 import Form from '@screen/components/FormConfig';
 
 import { cloneDeep } from "lodash"
+import { delay } from "@screen/utils/common.js"
+
+import { Message } from "element-ui";
+import { axiosIns } from "@screen/utils/axios/auth.js";
+
+const workStatus = [
+  {
+    key: "00",
+    label: "不更新状态"
+  },
+  {
+    key: "01",
+    label: "常亮"
+  },
+  {
+    key: "02",
+    label: "流水"
+  },
+  {
+    key: "03",
+    label: "闪烁"
+  },
+  {
+    key: "04",
+    label: "关闭"
+  },
+]
 
 export default {
   name: 'DeviceControlDialog',
@@ -34,44 +61,68 @@ export default {
     event: "update:value"
   },
   props: {
-    visible: Boolean
+    visible: Boolean,
+    deviceId: String
   },
   data() {
     return {
+      submitting: false,
       formList: [
         {
           label: "类型:",
-          key: "key291",
+          key: "controlType",
           type: "RadioGroup",
-          isAlone: true,
-          required: true,
+          default: "manual",
           options: {
             type: 'circle',
             options: [
               {
-                key: "手动控制",
+                key: "manual",
                 label: "手动控制",
               },
               {
-                key: "自动控制",
+                key: "automatic",
                 label: "自动控制",
               }
             ],
           },
         },
         {
-          label: "工作状态:",
-          key: "key999",
+          label: "上行工作状态:",
+          key: "onWorkStatus",
+          required: true,
+          type: "select",
+          visible: (data) => data.controlType == "manual",
+          options: {
+            placeholder: "请选择",
+            options: workStatus
+          }
+        },
+        {
+          label: "下行工作状态:",
+          key: "inWorkStatus",
+          required: true,
           type: "select",
+          visible: (data) => data.controlType == "manual",
+          options: {
+            placeholder: "请选择",
+            options: workStatus
+          }
         },
         {
           label: "选择时间:",
-          key: "key009",
+          key: "displayTime",
           type: "datePicker",
+          required: true,
+          visible: (data) => data.controlType == "automatic",
           options: {
-            type: "daterange",
+            type: "datetimerange",
+            angeSeparator: "至",
+            valueFormat: "yyyy-MM-dd HH:mm:ss",
+            startPlaceholder: "开始时间",
+            endPlaceholder: "结束时间",
           },
-        },
+        }
       ]
     }
   },
@@ -85,9 +136,85 @@ export default {
       }
     }
   },
+  watch: {
+    modelVisible: {
+      immediate: true,
+      handler(bool) {
+        if (!bool) return;
+
+        axiosIns.post(`business/device/functions/${this.deviceId}/${51}`)
+          .then(async (result) => {
+            if (result.code != 200) return;
+
+            await delay(0);
+
+            const formData = this.$refs.FormConfigRef?.formData;
+
+            const data = result.data;
+
+            switch (data.mode) {
+              case "00":
+                formData.controlType = "manual";
+
+                formData.onWorkStatus = data.onWorkStatus;
+                formData.inWorkStatus = data.inWorkStatus;
+                break;
+              case "01":
+                formData.controlType = "automatic";
+
+                formData.datePicker = [data.startDisplay, data.endDisplay];
+                break;
+            }
+          })
+      }
+    }
+  },
   methods: {
-    handleSearch() {
+    handleSubmit() {
       const result = cloneDeep(this.$refs.FormConfigRef?.formData);
+
+      let functionId = 51;
+
+      result.mode = result.controlType === 'manual' ? "00" : "01";
+
+      delete result.controlType;
+
+      if (result.mode === '01') {
+        if (!result.displayTime?.length) return Message.error(`时间不能为空!`);
+        result.startDisplayTime = result.displayTime[0];
+        result.endDisplayTime = result.displayTime[1];
+        delete result.displayTime;
+      } else {
+        if (!result.onWorkStatus || !result.inWorkStatus) return Message.error(`工作状态不能为空!`)
+      }
+
+      this.submitting = true;
+
+      console.log(result);
+
+      // this.submitting = false;
+      // return;
+
+      /**
+       * 接口 地址
+       * https://www.showdoc.com.cn/2450725213006196/10877717880262686
+       */
+
+      axiosIns.post(`business/device/functions/${this.deviceId}/${functionId}`, result)
+        .then((result) => {
+          if (result.code != 200) return Message.error(`设备操作失败!`);
+
+          this.modelVisible = false;
+        })
+        .catch((err) => {
+          console.log("%c [ err ]-110-「DeviceControlDialog.vue」", "font-size:15px; background:#547bf2; color:#98bfff;", err);
+          Message.error(`设备操作失败!`);
+        })
+        .finally(() => {
+          this.submitting = false;
+          console.log(this.submitting)
+        })
+      console.log(result)
     }
   },
 }
@@ -95,8 +222,8 @@ export default {
 
 <style lang='scss' scoped>
 .DeviceControlDialog {
-  width: 360px;
-  height: 150px;
+  width: 450px;
+  height: 180px;
   display: flex;
   flex-direction: column;
   gap: 15px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
index a12d0779..2eae3adf 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
@@ -52,7 +52,7 @@ export function controlCamera(camId, cmdType) {
       cmdType,
     })
     .then((result) => {
-      if (result.code != 200) Message.error(`相机操作失败!`);
+      if (result.code != 200) return Message.error(`相机操作失败!`);
     })
     .catch((err) => {
       Message.error(`相机操作失败!`);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
index 5a84fa8b..60159e30 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
+++ b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
@@ -128,6 +128,28 @@ div.el-picker-panel.el-date-range-picker.el-popper {
   position: relative;
   background: #064258;
   border-radius: 2px 2px 2px 2px;
+  .el-picker-panel__footer {
+    background: #064258;
+    border-color: rgba(255, 255, 255, 0.3);
+
+    .el-button {
+      border-radius: 48px 48px 48px 48px;
+      color: #fff;
+      border: 0;
+      padding: 6px 15px;
+
+      &:first-child {
+        background-color: rgba(0, 179, 204, 0.3);
+      }
+      &:last-child {
+        background: #00b3cc;
+      }
+    }
+  }
+
+  .el-date-range-picker__time-header {
+    border-color: rgba(255, 255, 255, 0.3);
+  }
 
   &[x-placement^="top"] {
     div.popper__arrow {
@@ -170,6 +192,42 @@ div.el-picker-panel.el-date-range-picker.el-popper {
     border-right: solid 1px rgba(255, 255, 255, 0.3);
   }
 
+  .el-picker-panel__icon-btn,
+  .el-date-picker__header-label,
+  .el-icon-arrow-right {
+    color: #fff;
+  }
+
+  table {
+    th {
+      color: #fff;
+      border-bottom: solid 1px rgba(255, 255, 255, 0.3);
+    }
+
+    tr {
+      td {
+        span,
+        .cell {
+          color: #fff;
+        }
+      }
+      td.today {
+        span,
+        .cell {
+          color: #00d1ff;
+        }
+      }
+    }
+
+    .start-date div span,
+    .end-date div span,
+    .current span {
+      background-color: #56cefe;
+    }
+    td.in-range div {
+      background: rgba(96, 189, 253, 0.3);
+    }
+  }
   div {
     .el-picker-panel__body {
       .el-date-picker__header {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/axios/auth.js b/ruoyi-ui/src/views/JiHeExpressway/utils/axios/auth.js
index 5ed52934..556205fe 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/axios/auth.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/axios/auth.js
@@ -37,7 +37,7 @@ function getToken() {
         }
       })
       .catch((e) => {
-        console.log("get token failed", error);
+        console.log("get token failed", e);
         reject(e);
       });
   });