From 1459bb69f93d38cd439cd4abf7a7053d01428784 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 11 Mar 2024 18:14:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AddNEditDialog.vue             | 207 ++++++++------
 .../views/emergencyAgencies/index.vue         |   7 +-
 .../components/postTrendsMonth/index.vue      |   2 +-
 .../components/eventQuery/assets/charts2.js   |   4 +-
 .../components/eventQuery/index.vue           | 256 +++++++++++++-----
 5 files changed, 309 insertions(+), 167 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/AddNEditDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/AddNEditDialog.vue
index b6094c66..f832ace3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/AddNEditDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/AddNEditDialog.vue
@@ -1,48 +1,56 @@
 <template>
   <Dialog v-model="modelVisible" :title="data ? '修改' : '新增'">
-    <div class='AddNEditDialog'>
-      <Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="90px" />
+    <div class="AddNEditDialog">
+      <Form
+        v-model="formData"
+        class="form"
+        ref="FormConfigRef"
+        :formList="formList"
+        column="1"
+        labelWidth="90px"
+      />
     </div>
 
     <template #footer>
-      <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false">
+      <Button
+        style="background-color: rgba(0, 179, 204, 0.3)"
+        @click.native="(modelVisible = false), (submitting = false)"
+      >
         取消
       </Button>
-      <Button @click.native="handleSubmit" :loading="submitting">
-        确定
-      </Button>
+      <Button @click.native="handleSubmit" :loading="submitting"> 确定 </Button>
     </template>
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Button from "@screen/components/Buttons/Button.vue"
-import Form from '@screen/components/FormConfig';
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
 
 import * as PresetFormItems from "@screen/common/PresetFormItems.js";
 import request from "@/utils/request";
-import { CameraDirectionEnumList } from "@screen/utils/enum.js"
+import { CameraDirectionEnumList } from "@screen/utils/enum.js";
 import { Message } from "element-ui";
-import { cloneDeep, merge } from 'lodash';
+import { cloneDeep, merge } from "lodash";
 import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js";
 
 export default {
-  name: 'AddNEditDialog',
+  name: "AddNEditDialog",
   components: {
     Dialog,
     Button,
-    Form
+    Form,
   },
   model: {
-    prop: 'visible',
-    event: "update:value"
+    prop: "visible",
+    event: "update:value",
   },
   props: {
     visible: Boolean,
-    data: Object
+    data: Object,
   },
-  inject: ['setCurrentPage'],
+  inject: ["setCurrentPage"],
   data() {
     return {
       submitting: false,
@@ -51,11 +59,11 @@ export default {
         {
           label: "父级:",
           key: "parentId",
-          type: 'select',
+          type: "select",
           options: {
             clearable: false,
-            options: []
-          }
+            options: [],
+          },
         },
         // {
         //   label: "机构类型2233:",
@@ -89,16 +97,16 @@ export default {
         {
           label: "机构名称:",
           key: "organizationName",
-          required: true
+          required: true,
         },
         {
           label: "方向:",
           key: "direction",
           required: true,
-          type: 'select',
+          type: "select",
           options: {
             options: [CameraDirectionEnumList[0], CameraDirectionEnumList[2]],
-          }
+          },
         },
         {
           label: "地址:",
@@ -113,25 +121,27 @@ export default {
                   {
                     message: "请补全桩号",
                     callback(value, data) {
-                      if (!value?.trim() && data.stakeMark[1]?.trim()) return false
-                      else return true
-                    }
-                  }
-                ]
+                      if (!value?.trim() && data.stakeMark[1]?.trim())
+                        return false;
+                      else return true;
+                    },
+                  },
+                ],
               },
               {
                 rules: [
                   {
                     message: "请补全桩号",
                     callback(value, data) {
-                      if (!value?.trim() && data.stakeMark[0]?.trim()) return false
-                      else return true
-                    }
-                  }
-                ]
+                      if (!value?.trim() && data.stakeMark[0]?.trim())
+                        return false;
+                      else return true;
+                    },
+                  },
+                ],
               },
-            ]
-          }
+            ],
+          },
         }),
         // {
         //   label: "救援单位:",
@@ -148,19 +158,19 @@ export default {
             autosize: { minRows: 6, maxRows: 6 },
             showWordLimit: true,
           },
-        }
-      ]
-    }
+        },
+      ],
+    };
   },
   computed: {
     modelVisible: {
       get() {
-        return this.visible
+        return this.visible;
       },
       set(val) {
-        this.$emit('update:value', val)
-      }
-    }
+        this.$emit("update:value", val);
+      },
+    },
   },
   watch: {
     modelVisible: {
@@ -168,72 +178,89 @@ export default {
       handler(bool) {
         if (!bool) return;
 
-        this.formData =
-          !this.data ? null : {
-            "parentId": this.data.dcOrganizations.parentId,
-            // "organizationType": this.data.dcOrganizations.organizationType,
-            "organizationName": this.data.dcOrganizations.organizationName,
-            "direction": this.data.dcOrganizations.direction,
-            "organizationAddress": this.data.dcOrganizations.organizationAddress,
-            "stakeMark": this.data.dcOrganizations.stakeMark ? [...(this.data.dcOrganizations.stakeMark || "").match(/[0-9]+/g)] : ["", ""],
-            "rescueUnit": this.data.dcOrganizations.rescueUnit,
-            "description": this.data.dcOrganizations.description
-          }
-
-        this.getOptions();
-      }
-    }
+        this.formData = !this.data
+          ? null
+          : {
+              parentId: this.data.dcOrganizations.parentId,
+              // "organizationType": this.data.dcOrganizations.organizationType,
+              organizationName: this.data.dcOrganizations.organizationName,
+              direction: this.data.dcOrganizations.direction,
+              organizationAddress:
+                this.data.dcOrganizations.organizationAddress,
+              stakeMark: this.data.dcOrganizations.stakeMark
+                ? [
+                    ...(this.data.dcOrganizations.stakeMark || "").match(
+                      /[0-9]+/g
+                    ),
+                  ]
+                : ["", ""],
+              rescueUnit: this.data.dcOrganizations.rescueUnit,
+              description: this.data.dcOrganizations.description,
+            };
+      },
+    },
   },
   methods: {
     async getOptions() {
-
       const result = await getSelectOptionsStation(1);
 
       this.formList[0].options.options = result;
-      this.formList[0].default = result[0]?.key;
+      this.formList[0].default = result[0].key;
+      this.formList[0].options.options.push({
+        disabled: false,
+        key: 0,
+        label: "无",
+      });
+      console.log(this.formList[0].options.options);
     },
     handleSubmit() {
-      this.$refs.FormConfigRef.validate()
-        .then((data) => {
-          this.submitting = true;
+      this.$refs.FormConfigRef.validate().then((data) => {
+        this.submitting = true;
 
-          if (this.data) data.id = this.data.dcOrganizations.id;
+        if (this.data) data.id = this.data.dcOrganizations.id;
 
-          if (typeof data.parentId != 'number') data.parentId = 0;
-          if (data.stakeMark[0]) {
-            data.stakeMark = `K${data.stakeMark[0]}+${data.stakeMark[1]}`;
-          }else{
-            data.stakeMark = '';
-          }
+        if (typeof data.parentId != "number") data.parentId = 0;
+        if (data.stakeMark[0]) {
+          data.stakeMark = `K${data.stakeMark[0]}+${data.stakeMark[1]}`;
+        } else {
+          data.stakeMark = "";
+        }
 
-          request({
-            url: `/business/organization`,
-            method: this.data ? 'PUT' : 'POST',
-            data
-          })
-            .then(result => {
-              if (result.code != 200) return Message.error(`提交失败!`);
+        request({
+          url: `/business/organization`,
+          method: this.data ? "PUT" : "POST",
+          data,
+        })
+          .then((result) => {
+            if (result.code != 200) return Message.error(`提交失败!`);
 
-              Message.success(`提交成功!`);
+            Message.success(`提交成功!`);
 
-              this.modelVisible = false;
+            this.modelVisible = false;
 
-              this.setCurrentPage(1)
-            })
-            .catch((err) => {
-              console.log("%c [ err ]-110-「DeviceControlDialog.vue」", "font-size:15px; background:#547bf2; color:#98bfff;", err);
-              Message.error(`提交失败!`);
-            })
-            .finally(() => {
-              this.submitting = false;
-            })
-        })
-    }
+            this.setCurrentPage(1);
+          })
+          .catch((err) => {
+            console.log(
+              "%c [ err ]-110-「DeviceControlDialog.vue」",
+              "font-size:15px; background:#547bf2; color:#98bfff;",
+              err
+            );
+            Message.error(`提交失败!`);
+          })
+          .finally(() => {
+            this.submitting = false;
+          });
+      });
+    },
   },
-}
+  mounted() {
+    this.getOptions();
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .AddNEditDialog {
   width: 450px;
   display: flex;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue
index d3bea36a..98d242aa 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue
@@ -131,11 +131,11 @@ export default {
         // },
         {
           key: "cars",
-          label: "驻点车辆",
+          label: "应急车辆",
         },
         {
           key: "employeesNum",
-          label: "驻点人员",
+          label: "应急人员",
           suffix: "人",
         },
       ],
@@ -183,6 +183,7 @@ export default {
     handleOpenDialogAddEdit(data) {
       this.addNEditDialogVisible = true;
       this.dialogData = data;
+      console.log("Dialog", data);
     },
 
     handleSearch(data) {
@@ -229,7 +230,7 @@ export default {
               }
             });
           });
-          
+
           this.dataList.forEach((item) => {
             if (item.car.length > 0) {
               item.cars = data.join("、");
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
index 7d1a22ce..9a273147 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
@@ -324,7 +324,7 @@ export default {
       margin-bottom: 10px;
       left: 20px;
       top: 10px;
-      z-index: 100;
+      z-index: 0;
 
       div {
         white-space: nowrap;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
index 40d15fd3..54813907 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
@@ -132,8 +132,8 @@ var options = {
   },
   color: colorList,
   legend: {
-    top: 10,
-    right: 0,
+    top: 100,
+    right: 20,
     orient: "vertical", //改变排列方式
     icon: "circle", //改变legend小图标形状
     itemGap: 20, // 设置legend的间距
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index 2a359adb..06a1b30a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -1,35 +1,87 @@
 <template>
   <div class="congestion">
     <div class="board">
-      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex"
-        :reset="reset" />
+      <ProgressBar
+        class="keep-ratio"
+        @selectItem="selectProgress"
+        :dataList="dataList"
+        :selectIndex="selectIndex"
+        :reset="reset"
+      />
       <div class="searchPanel">
-        <RadioGroup :options="[
-        { key: '1', label: '菏泽' },
-        { key: '3', label: '济南' },
-      ]" v-model="direction" type="button" />
-        <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType">
-          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
+        <RadioGroup
+          :options="[
+            { key: '1', label: '菏泽' },
+            { key: '3', label: '济南' },
+          ]"
+          v-model="direction"
+          type="button"
+        />
+        <el-select
+          v-model="type"
+          size="mini"
+          class="selectRoad"
+          placeholder="请选择"
+          @change="changeType"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
           </el-option>
         </el-select>
-        <el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择">
-          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
-            style="width: 140px">
+        <el-select
+          v-model="quarter"
+          size="medium"
+          v-if="type == 'quarter'"
+          class="selectRoad-medium"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in quarterOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            style="width: 140px"
+          >
           </el-option>
         </el-select>
-        <el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px"
-          :type="type == 'date'
-        ? 'date'
-        : type == 'month'
-          ? 'month'
-          : type == 'year'
-            ? 'year'
-            : ''
-        " placeholder="请选择" :clearable="false" />
-
-        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
-          icon="el-icon-search">查询</el-button>
-        <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
+        <el-date-picker
+          size="mini"
+          v-if="type != 'quarter'"
+          class="selectRoad"
+          v-model="dateTime"
+          style="width: 140px"
+          :type="
+            type == 'date'
+              ? 'date'
+              : type == 'month'
+              ? 'month'
+              : type == 'year'
+              ? 'year'
+              : ''
+          "
+          placeholder="请选择"
+          :clearable="false"
+        />
+
+        <el-button
+          type="primary"
+          size="mini"
+          class="btnSearch"
+          @click="searchQuery"
+          icon="el-icon-search"
+          >查询</el-button
+        >
+        <el-button
+          class="btnReset"
+          size="mini"
+          icon="el-icon-refresh-left"
+          @click="onReset"
+          >重置</el-button
+        >
       </div>
     </div>
 
@@ -43,14 +95,28 @@
 
       <div>
         <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
-        <Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty>
-        <div v-show="chart2List || chart2List.length > 0" id="chart2" class="btnChart" />
+        <Empty
+          v-show="!chart2List || chart2List.length <= 0"
+          text="暂无数据..."
+        ></Empty>
+        <div
+          v-show="chart2List || chart2List.length > 0"
+          id="chart2"
+          class="btnChart"
+        />
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
-        <Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty>
-        <div v-show="chart3List || chart3List.length > 0" id="chart3" class="btnChart" />
+        <Empty
+          v-show="!chart3List || chart3List.length <= 0"
+          text="暂无数据..."
+        ></Empty>
+        <div
+          v-show="chart3List || chart3List.length > 0"
+          id="chart3"
+          class="btnChart"
+        />
       </div>
     </div>
   </div>
@@ -65,7 +131,7 @@ import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
 import chart3 from "./assets/charts3";
 import ElQuarterPicker from "./ElQuarterPicker";
-import moment from 'moment';
+import moment from "moment";
 import {
   getWarningTrend,
   getWarningSectionType,
@@ -204,7 +270,7 @@ export default {
       ],
     };
   },
-  created() { },
+  created() {},
   methods: {
     selectProgress(item, index) {
       this.selectIndex = index;
@@ -255,18 +321,19 @@ export default {
           chart1.series[0].data = [];
           chart1.xAxis.data = [];
 
-
           //月份的单独处理
           if (this.type == "month") {
             let daysInMonth = moment(this.dateTime, "YYYY-MM").daysInMonth();
             let sData = {};
-            data.forEach(it => sData[parseInt(it.day.slice(-2))] = it.number)
-            let pData = []
+            data.forEach(
+              (it) => (sData[parseInt(it.day.slice(-2))] = it.number)
+            );
+            let pData = [];
             for (let index = 1; index <= daysInMonth; index++) {
               pData.push({
                 day: index,
-                number: sData[index] || 0
-              })
+                number: sData[index] || 0,
+              });
             }
             data = pData;
           }
@@ -278,15 +345,15 @@ export default {
               3: [7, 8, 9],
               4: [10, 11, 12],
             };
-            let sData = {}
-            data.forEach(it => sData[it.month] = it.number);
-            let pData = []
+            let sData = {};
+            data.forEach((it) => (sData[it.month] = it.number));
+            let pData = [];
             for (let index = 0; index < 3; index++) {
               let month = quarterMap[this.quarter][index];
               pData.push({
                 month: month,
-                number: sData[month] || 0
-              })
+                number: sData[month] || 0,
+              });
             }
             data = pData;
           }
@@ -515,10 +582,10 @@ export default {
       //   this.type = "date";
     },
     changeType() {
-      if (this.type == 'date') {
-        this.dateTime = moment(new Date()).format("YYYY-MM-DD")
+      if (this.type == "date") {
+        this.dateTime = moment(new Date()).format("YYYY-MM-DD");
       }
-    }
+    },
   },
   mounted() {
     setTimeout(() => {
@@ -569,28 +636,28 @@ export default {
 
         // 填充渐变颜色
         // 颜色断点
-        // var gr = context.createLinearGradient(247, 63, 450, 0);
-        // gr.addColorStop(1, 'rgba(92,197,255,0)');
-        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        // drawRoundRect(context, 267, 57, 140, 24, 12, gr)
+        var gr = context.createLinearGradient(247, 63, 450, 0);
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 357, 98, 140, 24, 12, gr);
 
         // // 颜色断点
-        // var gr = context.createLinearGradient(247, 63, 450, 0);
-        // gr.addColorStop(1, 'rgba(92,197,255,0)');
-        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        // drawRoundRect(context, 267, 108, 140, 24, 12, gr)
+        var gr = context.createLinearGradient(247, 63, 450, 0);
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 357, 130, 140, 24, 12, gr);
 
         // // 颜色断点
-        // var gr = context.createLinearGradient(240, 63, 450, 0);
-        // gr.addColorStop(1, 'rgba(92,197,255,0)');
-        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        // drawRoundRect(context, 267, 157, 140, 24, 12, gr)
+        var gr = context.createLinearGradient(240, 63, 450, 0);
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 357, 162, 140, 24, 12, gr);
 
         // // 颜色断点
-        // var gr = context.createLinearGradient(240, 63, 450, 0);
-        // gr.addColorStop(1, 'rgba(92,197,255,0)');
-        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        // drawRoundRect(context, 267, 208, 140, 24, 12, gr)
+        var gr = context.createLinearGradient(240, 63, 450, 0);
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 357, 194, 140, 24, 12, gr);
 
         // // 颜色断点
         // var gr = context.createLinearGradient(240, 63, 450, 0);
@@ -638,16 +705,21 @@ export default {
     justify-content: space-evenly;
     font-size: 14px;
 
-    >div {
+    > div {
       width: 33%;
       height: 470px;
-      background: linear-gradient(180deg,
-          rgba(6, 66, 88, 0.2) 0%,
-          #064258 100%);
+      background: linear-gradient(
+        180deg,
+        rgba(6, 66, 88, 0.2) 0%,
+        #064258 100%
+      );
       border: 1px solid;
-      border-image: linear-gradient(360deg,
+      border-image: linear-gradient(
+          360deg,
           rgba(55, 231, 255, 0.3),
-          rgba(55, 231, 255, 0)) 1 1;
+          rgba(55, 231, 255, 0)
+        )
+        1 1;
     }
 
     :nth-child(1) {
@@ -763,12 +835,54 @@ export default {
 </style>
 
 <style lang="scss">
-div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
-div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
-div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
+div.el-popover:has(> .el-date-picker)
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  span,
+div.el-popover:has(> .el-date-picker)
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  .cell,
+div.el-picker-panel.el-date-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  span,
+div.el-picker-panel.el-date-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  .cell,
+div.el-picker-panel.el-date-range-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  span,
+div.el-picker-panel.el-date-range-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  .cell {
   color: #fff;
 }
 </style>