From 855e4353441531c16823c922ff59561cc1c5aae3 Mon Sep 17 00:00:00 2001
From: mbp <360013221@qq.com>
Date: Sat, 19 Oct 2024 17:27:23 +0800
Subject: [PATCH] update solader map

---
 .../Home/components/HomeVector/index.vue      |   6 +-
 .../Home/components/RoadAndEvents/index.vue   |   5 +-
 .../components/RoadAndEvents/utils/map.js     |   2 +-
 .../maintenanceOperations/solar/index.vue     | 644 +++++++++++--
 ruoyi-ui/src/views/login.vue                  | 909 ++++++++----------
 5 files changed, 993 insertions(+), 573 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
index 53ea4cae..9265bbfc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
@@ -24,17 +24,19 @@ export default {
   data() {
     return {
       activeIcon: null,
+      isshow: false
     };
   },
   created() {
     this.activeIcon = window.showStakeText ? 'Vector' : null;
-    Vue.prototype.mapIns.pileIsShow("jhlayers", false);
+    //Vue.prototype.mapIns.pileIsShow("jhlayers", false);
   },
   methods: {
     handleClick(type) {
       this.activeIcon = this.activeIcon === type ? null : type;
+      this.isshow = !this.isshow;
       Vue.prototype.isMapStatck = (this.activeIcon === type);
-      Vue.prototype.mapIns.pileIsShow("jhlayers", (this.activeIcon === type));
+      Vue.prototype.mapIns.pileIsShow("jhlayers", this.isshow);
       if (this.activeIcon) window.showStakeText = true;
       else window.showStakeText = false;
       // markerClusterIns.setData();
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
index 2f868c7c..5f02ce68 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@@ -460,7 +460,7 @@ export default {
     display: flex;
     overflow: hidden;
     gap: 24px;
-    height: 30px;
+    height: 30px !important;
 
     .tabs-item {
       display: flex;
@@ -489,6 +489,9 @@ export default {
   .bottom {
     display: flex;
     justify-content: end;
+    position: absolute;
+    right: 20px;
+    bottom: 15px;
 
     .cleared-btn {
       // position: absolute;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index 253703c2..7287fcca 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -171,8 +171,8 @@ export class MarkerCluster {
      );
      await sleep(1000)
      console.log('执行show完毕',aryPoints,'点位数组')
-     Vue.prototype.mapIsLoading = false
     }
+    Vue.prototype.mapIsLoading = false
     if(Vue.prototype.isMapStatck){
       Vue.prototype.mapIns.pileIsShow("jhlayers", true);
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue
index d382a839..4338fa29 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="solar">
+    <gisMap2d ref="gisMap2dsolar" style="width:100vw;height:100vh"
+    :mapZoom = "mapZoom"
+    :mapCenter="mapCenter"
+
+    radarSliderBottom="33%"
+    radarSliderRight="14%"
+    mapBoxHeight="100vh" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d>
     <div class="solar_left">
       <div>
         <Bg2 class="content-l-t">
@@ -8,89 +15,482 @@
           </div>
           <div class="content-l-t-content">
             <div class="content-k1">
-              <div>当前累计发电量</div>
-              <div class="content-kk"><div v-for="(item,index) in titles[0].value">{{item}}</div></div>
-              <div>万度</div>
+              <div>当年累计发电量</div>
+              <div class="content-kk">
+                <div v-for="(item, index) in titles0" :key="index">{{ item }}</div>
+              </div>
+              <div class="content-unit" style="margin-top: 10px;width:30px;text-align:right;">度</div>
+            </div>
+            <div class="content-k1">
+              <div>当年累计用电量</div>
+              <div class="content-kk">
+                <div v-for="(item, index) in titles1" :key="index">{{ item }}</div>
+              </div>
+              <div class="content-unit" style="margin-top: 10px;width:30px;text-align:right;">度</div>
+            </div>
+            <div class="content-k1">
+              <div>今日累计发电量</div>
+              <div class="content-ll">
+                <div class="content-llc">
+                  <div v-for="(item, index) in titles2p" :key="index"></div>
+                </div>
+              </div>
+              <div class="content-unit" style="width:50px;text-align:right;">{{ titles2 }}度</div>
+            </div>
+            <div class="content-k1">
+              <div>今日累计用电量</div>
+              <div class="content-ll">
+                <div class="content-llc">
+                  <div v-for="(item, index) in titles3p" :key="index"></div>
+                </div>
+              </div>
+              <div class="content-unit" style="width:50px;text-align:right;">{{ titles3 }}度</div>
+            </div>
+          </div>
+        </Bg2>
+      </div>
+      <div>
+        <Bg2 class="content-l-t">
+          <div class="focuse-header">
+            <div class="title">设备统计</div>
+          </div>
+          <div class="content-l-sec-content">
+            <div id="chartp1" class="secleft"></div>
+            <div class="secright">
+              <div class="d1"><span>{{device0}}</span> 个</div>
+              <div class="d2">设备总数</div>
+              <div class="d1"><span>{{device1}}</span> 个</div>
+              <div class="d2">放电异常设备</div>
+            </div>
+          </div>
+        </Bg2>
+      </div>
+      <div>
+        <Bg2 class="content-l-t">
+          <div class="focuse-header">
+            <div class="title">环境贡献</div>
+          </div>
+          <div class="content-l-third-content">
+            <div class="thirditem">
+              <img :src="require('@screen/images/solar/CO2.png')" />
+              <div class="thirdNum"><span>{{titles4}}</span> 吨</div>
+              <div>CO₂减排</div>
+            </div>
+            <div class="thirditem">
+              <img :src="require('@screen/images/solar/tree.png')" />
+              <div class="thirdNum"><span>{{titles5}}</span> 棵</div>
+              <div>等效植树</div>
+            </div>
+            <div class="thirditem">
+              <img :src="require('@screen/images/solar/coal.png')" />
+              <div class="thirdNum"><span>{{titles6}}</span> 吨</div>
+              <div>节约标准煤</div>
             </div>
           </div>
         </Bg2>
       </div>
-      <div>2</div>
-      <div>3</div>
     </div>
     <div class="solar_right">
-      223
+      <div>
+        <Bg2 class="content-l-t" style="width:420px;">
+          <div class="focuse-header">
+            <div class="title2"></div>
+          </div>
+          <div class="content-box">
+            <div class="box-title " style="margin-top: 15px;">
+              <span>今日发电统计</span>
+              <span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
+            </div>
+            <div id="charts1" class="chart"></div>
+            <div class="box-title " style="margin-top: 15px;">
+              <span>今日用电统计</span>
+              <span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
+            </div>
+            <div id="charts2" class="chart"></div>
+            <div class="box-title " style="margin-top: 15px;">
+              <span>今日功率统计</span>
+              <span style="margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span>
+            </div>
+            <div id="charts3" class="chart"></div>
+          </div>
+        </Bg2>
+      </div>
     </div>
+<component :dialogData="dialogConfig.data" visible :selectedDevice="dialogConfig.data" :is="dialogConfig.component"
+      @change="handleHidden" @update:visible="handleHidden" />
+    <!-- <SolarEnergy v-if="info" :dialogData="info" :visible="visible"
+      @update:visible="handleHidden" ></SolarEnergy> -->
   </div>
 </template>
 
 <script>
 
+import Vue from "vue";
+import { gisMap2d } from 'gis-map-universal'
 import Bg2 from "@screen/components/Decorations/bg-2.vue"
 import request from "@/utils/request";
 import * as echarts from "echarts";
+
+import SolarEnergy from "./../../Home/components/Dialogs/SolarEnergy/index.vue";
+const lnglat = [117.16515148266497,35.2797674572588]
 export default {
-  components: { 
-    Bg2
+  components: {
+    Bg2,
+    gisMap2d,
+    SolarEnergy,
   },
   name: "Soler",
   data() {
     return {
-      titles:[
-        {icon:'total.png',label:'当年累计发电量',unit:'度',value:'0022.4512'},
-        {icon:'used.png',label:'当年累计用电量',unit:'度',value:'-'},
-        {icon:'CO2.png',label:'CO₂减排',unit:'kg',value:'-'},
-        {icon:'tree.png',label:'等效植树',unit:'棵',value:'-'},
-        {icon:'coal.png',label:'节约标准煤',unit:'kg',value:'-'},
-        {icon:'error.png',label:'放电异常设备',unit:'个',value:'-'},
-      ],
-      chart1:null,
-      chart2:null,
-      chart3:null,
-      chart1Total1:'-',
-      chart1Total2:'-',
-      chart1Total3:'-', 
-      loading:false,
-      
+      mapBoxHeight: '100vh',
+      mapZoom: '7.5',   // 默认值'7.5'   String类型
+      mapCenter: lnglat, //默认值[118.75, 36.46] Array类
+     
+      dialogConfig:{
+        component: void 0,
+        data: void 0,
+      },
+      titles0:'000000000',
+      titles1:'000000000',
+      titles2:'-',
+      titles2p:1,
+      titles3:'-',
+      titles3p:1,
+      titles4: 0,
+      titles5: 0,
+      titles6: 0,
+
+      device0:0,
+      device1:0,
+
+      chartp1: null,
+      chart1: null,
+      chart2: null,
+      chart3: null,
+      chart1Total1: '-',
+      chart1Total2: '-',
+      chart1Total3: '-',
+      loading: false,
+
     };
   },
   mounted() {
+    this.initTotal();
+    this.initP1();
+    this.initChart();
+
+    this.initPoint();
   },
   methods: {
-   
+    initPoint(){
+        request({
+          url: 'business/device/pileNumberQuery',
+          method: 'post',
+          data: {
+              deviceType: "15",   
+          }
+        }).then(result => {
+          const aryPoints = [];
+          const sa = require(`@screen/images/layerb/路测设备/太阳能板_active.svg`)
+          const sb = require(`@screen/images/layerb/路测设备/太阳能板_fault.svg`)
+          for(let i of result.data){
+            aryPoints.push({
+              type: 'event', //类型。例如：交通事件、故障停车、摄像机等 【必传字段】
+              longitude: parseFloat(i.longitude), //点坐标经度    【必传字段】
+              latitude: parseFloat(i.latitude),  //点坐标纬度    【必传字段】
+              iconUrl: i.deviceState==='1'?sa:sb,     // 图标  【必传字段】
+              offset: [0,-48], 
+              size: [42,100], 
+              GGoffsetX: 0, 
+              GGoffsetY: -5,
+              GGimgOffset:[0,0],
+              GGimgsize:[42,103],
+              GGstakeOffsetY:45,
+              stakeOffsetY:25,
+              otherInfo: {
+                ...i,
+                stake: i.stakeMark,
+                state: i.deviceState==="1"?1:0,
+                name: i.deviceName
+              }
+            })
+          }
+          this.$refs.gisMap2dsolar.addPointByArr(
+              {pointList:aryPoints},          //  点位数据数组（按以下规范组装）
+              'jhlayerssolar',  //  当前添加的数据 唯一标识（删除该图层时也会用到）//./事件专题/交通事故.svg
+              true    //  当前新加图层是否启用聚合效果
+          );
+          console.log('initPoint',result)
+        })
+    },
+    clickPointEvent(obj) {
+      this.dialogConfig = {
+        component: SolarEnergy,
+        data: obj.otherInfo
+      }
+    },
+    handleHidden(){
+      this.dialogConfig = {
+        component: null,
+        data: null
+      }
+    },
+    initTotal() {
+      request({
+        url: 'business/device/properties/latestOne',
+        method: 'get'
+      }).then(result => {
+        if (result.code != 200) return;
+        console.log('initTotal',result)
+        this.titles0 = result.data.theAccumulatedChargeOfTheYear.toString().padStart(9,'0'); //
+        this.titles1 = result.data.cumulativeElectricityConsumptionInTheYear.toString().padStart(9,'0');
+        this.titles2 = result.data.dailyAccumulatedCharge;
+        this.titles3 = result.data.cumulativeElectricityConsumptionOnTheDay;
+        let _titles2p = (result.data.dailyAccumulatedCharge/10000) * 24
+        if(_titles2p > 24){
+          _titles2p = 24;
+        } else if(_titles2p===0){
+          _titles2p = 1;
+        }
+        this.titles2p = parseInt(_titles2p);
+
+        let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/10000) * 24
+        if(_titles3p > 24){
+          _titles3p = 24;
+        } else if(_titles3p===0){
+          _titles3p = 1;
+        }
+        this.titles3p = parseInt(_titles3p);
+
+
+        this.titles4 = (result.data.standardCoal/1000).toFixed(2);
+        this.titles5 = result.data.equivalentTree;
+        this.titles6 = (result.data.carbonEmissionReduction/1000).toFixed(2);
+      })
+    },
+    initP1() {
+      request({
+          url: 'business/device/properties/solarDeviceStatistics',
+          method: 'get'
+      }).then(result => {
+        if (result.code != 200) return;
+        console.log('initP1',result)
+        this.device0 = result.data.size;
+        this.device1 = result.data.count;
+        const _chartsOptions = {
+          tooltip: {
+            trigger: 'item',
+            position: ['80%', '50%']
+          },
+          series: [
+            {
+              name: '设备统计',
+              type: 'pie',
+              radius: '70%',
+              center: ['50%', '50%'],
+              avoidLabelOverlap: false,
+              data: [
+                { value: result.data.size-result.data.count, name: '正常设备总数', itemStyle: { color: '#38737f' } },
+                { value: result.data.count, name: '异常设备数量', itemStyle: { color: '#9ff501' } },
+              ],
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              }
+            }
+          ]
+        }
+        if (!this.chartp1) {
+          this.chartp1 = echarts.init(document.getElementById("chartp1"));
+          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
+          this.chartp1.setOption(option1);
+          this.chartp1.resize();
+        }
+      })
+    },
+    initChart(){
+      const _chartsOptions = {
+            color:['#00bead'],
+            title: {
+              text: '度',
+              textStyle:{
+                color:'#E5E7E8',
+                fontSize: 15,
+                fontStyle:'normal'
+              },
+              top:'10px',
+              left: '10px'
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点',
+                    '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],                       
+              axisLine:{
+                show:true,
+                lineStyle:{
+                  color:'#fff'
+                }
+              },
+              axisLabel: {
+                align: "center",
+                rotate: "1",
+                margin: 20,
+                textStyle: {
+                  fontSize: 10,
+                  color: "#E5E7E8",
+                }
+              },
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                show: false,
+                color: "#E5E7E8",
+                textStyle: {
+                  fontSize: 10,
+                },
+              },
+              axisLine:{
+                show:true,
+                lineStyle:{
+                  color:'#fff'
+                }
+              },
+              splitLine: {
+                show: false
+              },
+            },
+            grid: {
+              left: "40px",
+              right: "20px",
+              top: "10px",
+              bottom: "0px",
+              containLabel: true,
+            },
+            series: [
+              {
+                data: [],
+                type: 'line',
+                smooth: true
+              }
+            ]
+        }
+        if(!this.chart1){
+          this.chart1 = echarts.init(document.getElementById("charts1"));
+          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
+          request({
+            url: 'business/device/properties/history/oneDay/dailyAccumulatedCharge',
+            method: 'get'
+          }).then(result => {
+            console.log('chart1',result)
+            if (result.code != 200) return;
+            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+            let total = 0;
+            for(let i in result.data){
+              total += result.data[i]
+              const idx = parseInt(i.substr(11,2));
+              data[idx] = result.data[i];
+            }
+            this.chart1Total1 = total;
+            option1.series[0].data = data;
+            this.chart1.setOption(option1);
+            this.chart1.resize();
+          })
+          
+          this.chart2 = echarts.init(document.getElementById("charts2"));
+          let option2 = JSON.parse(JSON.stringify(_chartsOptions));
+          request({
+            url: 'business/device/properties/history/oneDay/cumulativeElectricityConsumptionOnTheDay',
+            method: 'get'
+          }).then(result => {
+            if (result.code != 200) return;
+            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+            let total = 0;
+            for(let i in result.data){
+              total += result.data[i]
+              const idx = parseInt(i.substr(11,2));
+              data[idx] = result.data[i];
+            }
+            this.chart1Total2 = total;
+            option2.series[0].data = data;
+            this.chart2.setOption(option2);
+            this.chart2.resize();
+          })
+          // 发电功率
+          this.chart3 = echarts.init(document.getElementById("charts3"));
+          let option3 = JSON.parse(JSON.stringify(_chartsOptions));
+          request({
+            url: 'business/device/properties/history/oneDay/generatingPower',
+            method: 'get'
+          }).then(result => {
+            if (result.code != 200) return;
+            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+            let total = 0;
+            for(let i in result.data){
+              total += result.data[i]
+              const idx = parseInt(i.substr(11,2));
+              data[idx] = result.data[i];
+            }
+            this.chart1Total3 = total;
+            option3.series[0].data = data;
+            this.chart3.setOption(option3);
+            this.chart3.resize()
+          })
+          
+        }
+        window.addEventListener("resize", () => {
+          if(this.chart1){
+            this.chart1.resize();
+            this.chart2.resize();
+            this.chart3.resize();
+          }
+        });
+    }
+    
   },
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .solar{
-    width: 100%;
+.solar {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 100vh;
+
+  .solar_left {
+    position: absolute;
+    width: 420px;
+    left: 20px;
+    top: 120px;
+    overflow: hidden;
     display: flex;
-    justify-content: space-between;
-    height: 100vh;
-    .solar_left{
-      width: 480px;
-      margin-left:20px;
-      margin-top: 20px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: 100%;
-      gap: 10px;
-    }
-    .solar_right{
-      width: 480px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      overflow: hidden;
-      height: 100%;
-    }
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    gap: 10px;
+  }
+
+  .solar_right {
+    position: absolute;
+    right: 20px;
+    top: 120px;
+    width: 480px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    overflow: hidden;
+    height: 100%;
   }
+}
 
-  .content-l-t {
+.content-l-t {
   ::v-deep {
     .BackgroundClip.bg {
       display: flex;
@@ -98,47 +498,175 @@ export default {
       justify-content: space-around;
     }
   }
+
   .focuse-header {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+
+    .title2 {
+
+      width: 220px;
+      height: 40px;
+      margin-top: 10px;
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      background: url("~@screen/images/title/title-solar.png") no-repeat;
+      background-size: 100% 100%;
+    }
+
     .title {
       font-size: 24px;
       font-family: YouSheBiaoTiHei;
       font-weight: 400;
       margin-left: 30px;
-      background-image: -webkit-linear-gradient(bottom,#217176,#34adb6,  #3fd6e1);
+      margin-top: 5px;
+      background-image: -webkit-linear-gradient(bottom, #217176, #34adb6, #3fd6e1);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
   }
 
+  .content-l-sec-content {
+    display: flex;
+    flex-direction: row;
+
+    .secleft {
+      height: 180px;
+      width: 250px;
+    }
+
+    .secright {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      gap: 10px;
+      font-size: 14px;
+
+      .d1 {
+        font-size: 12px;
+
+        span {
+          font-size: 30px;
+          font-weight: bold;
+          color: #d3d51c;
+        }
+      }
+    }
+  }
+
   .content-l-t-content {
     margin-top: 10px;
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: 10px 15px;
+    gap: 15px 15px;
     // justify-content: center;
-    flex:1;
+    flex: 1;
     flex-wrap: wrap;
-    .content-k1{
-      display:flex;
+
+    .content-k1 {
+      display: flex;
       flex-direction: row;
-      .content-kk{
-        display:flex;
+
+      .content-ll {
+        flex: 1;
+        width: 200px;
+        margin-right: 5px;
+
+        .content-llc {
+          display: flex;
+          flex-direction: row;
+          margin-left: 10px;
+          margin-top: 3px;
+          gap: 3px;
+
+          >div {
+            background-color: #9ff501;
+            width: 5px;
+            height: 17px;
+          }
+
+        }
+      }
+
+      .content-kk {
+        display: flex;
         flex-direction: row;
         margin-left: 10px;
         margin-right: 3px;
         gap: 3px;
-        > div{
+
+        >div {
           border: 1px solid #0c7f8a;
           padding: 2px 5px;
         }
       }
+
+      .content-unit {
+        font-size: 13px;
+
+        margin-left: 2px;
+      }
     }
   }
+
+  .content-l-third-content {
+    display: flex;
+    width: 100%;
+    margin: 20px 20px 20px 10px;
+
+    .thirditem {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+
+      img {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 10px;
+      }
+
+      span {
+        font-size: 30px;
+        font-weight: bold;
+        color: #d3d51c;
+      }
+    }
+  }
+}
+
+.content-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+}
+
+.box-title {
+  width: 100%;
+  height: 26px;
+  margin: 7px;
+  background: url("~@screen/images/title/title_bg_002.png") no-repeat;
+
+  span {
+    display: inline-block;
+    margin-left: 35px;
+    font-size: 16px;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 500;
+    color: #ffffff;
+  }
 }
+            .chart{
+              height: 155px;
+            }
 </style>
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index e5564d89..73d9bdd7 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -1,569 +1,456 @@
 <template>
-  <div class="solar">
-    <gisMap2d ref="gisMap2d"
-    :mapZoom = "mapZoom"
-    :mapCenter="mapCenter"
-
-    radarSliderBottom="33%"
-    radarSliderRight="14%"
-    :mapBoxHeight="height" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d>
-    <div class="solar_left">
-      <div>
-        <Bg2 class="content-l-t">
-          <div class="focuse-header">
-            <div class="title">重点数据</div>
-          </div>
-          <div class="content-l-t-content">
-            <div class="content-k1">
-              <div>当年累计发电量</div>
-              <div class="content-kk">
-                <div v-for="(item, index) in titles[0].value">{{ item }}</div>
-              </div>
-              <div class="content-unit" style="margin-top: 0px;">万度</div>
-            </div>
-            <div class="content-k1">
-              <div>当年累计用电量</div>
-              <div class="content-kk">
-                <div v-for="(item, index) in titles[1].value">{{ item }}</div>
-              </div>
-              <div class="content-unit">万度</div>
-            </div>
-            <div class="content-k1">
-              <div>今日累计发电量</div>
-              <div class="content-ll">
-                <div class="content-llc">
-                  <div v-for="(item, index) in 10"></div>
-                </div>
-              </div>
-              <div class="content-unit">{{ titles[2].value }}度</div>
-            </div>
-            <div class="content-k1">
-              <div>今日累计用电量</div>
-              <div class="content-ll">
-                <div class="content-llc">
-                  <div v-for="(item, index) in 24"></div>
-                </div>
-              </div>
-              <div class="content-unit">{{ titles[2].value }}度</div>
-            </div>
-          </div>
-        </Bg2>
+  <div class="login">
+    <div class="login-content">
+      <div class="login-l">
+        <div class="logo"><img src="../assets/images/login/logo.png" /></div>
+        <span>齐鲁高速</span>
+        <span>济菏数智运营管理平台</span>
       </div>
-      <div>
-        <Bg2 class="content-l-t">
-          <div class="focuse-header">
-            <div class="title">设备统计</div>
-          </div>
-          <div class="content-l-sec-content">
-            <div id="chartp1" class="secleft"></div>
-            <div class="secright">
-              <div class="d1"><span>1000</span> 个</div>
-              <div class="d2">设备总数</div>
-              <div class="d1"><span>10</span> 个</div>
-              <div class="d2">放电异常设备</div>
+      <div class="login-r">
+        <span class="title">欢迎登录</span>
+        <img class="line" src="../assets/images/login/139.png" />
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
+          ><el-form-item prop="username">
+            <el-input
+              v-model="loginForm.username"
+              type="text"
+              auto-complete="off"
+              placeholder="请输入用户名"
+              class="username"
+            >
+              <img
+                slot="prefix"
+                src="../assets/images/login/user.png"
+                class="el-input__icon input-icon"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              auto-complete="off"
+              placeholder="请输入密码"
+              @keyup.enter.native="handleLogin"
+              class="password"
+            >
+              <img
+                slot="prefix"
+                src="../assets/images/login/password.png"
+                class="el-input__icon input-icon"
+              />
+            </el-input>
+          </el-form-item>
+          <Verify
+            @success="capctchaCheckSuccess"
+            :mode="'pop'"
+            :captchaType="'blockPuzzle'"
+            :imgSize="{ width: '330px', height: '155px' }"
+            ref="verify"
+          ></Verify>
+          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+          <el-form-item>
+            <el-button
+              class="btn"
+              :loading="loading"
+              size="medium"
+              type="goon"
+              style="width: 100%"
+              @click.native.prevent="handleLogin"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+            <div style="float: right" v-if="register">
+              <router-link class="link-type" :to="'/register'"
+                >立即注册</router-link
+              >
             </div>
-          </div>
-        </Bg2>
-      </div>
-      <div>
-        <Bg2 class="content-l-t">
-          <div class="focuse-header">
-            <div class="title">环境贡献</div>
-          </div>
-          <div class="content-l-third-content">
-            <div class="thirditem">
-              <img :src="require('@screen/images/solar/CO2.png')" />
-              <div class="thirdNum"><span>88.88</span>吨</div>
-              <div>CO₂减排</div>
-            </div>
-            <div class="thirditem">
-              <img :src="require('@screen/images/solar/tree.png')" />
-              <div class="thirdNum"><span>88.88</span>棵</div>
-              <div>等效植树</div>
-            </div>
-            <div class="thirditem">
-              <img :src="require('@screen/images/solar/coal.png')" />
-              <div class="thirdNum"><span>8888</span>Kg</div>
-              <div>节约标准煤</div>
-            </div>
-          </div>
-        </Bg2>
+          </el-form-item>
+        </el-form>
       </div>
     </div>
-    <div class="solar_right">
-      <div>
-        <Bg2 class="content-l-t" style="width:420px;">
-          <div class="focuse-header">
-            <div class="title2"></div>
-          </div>
-          <div class="content-box">
-            <div class="box-title " style="margin-top: 15px;">
-              <span>今日发电统计</span>
-              <span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
-            </div>
-            <div id="charts1" class="chart"></div>
-            <div class="box-title " style="margin-top: 15px;">
-              <span>今日用电统计</span>
-              <span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
-            </div>
-            <div id="charts1" class="chart"></div>
-            <div class="box-title " style="margin-top: 15px;">
-              <span>今日功率统计</span>
-              <span style="margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span>
-            </div>
-            <div id="charts1" class="chart"></div>
-          </div>
-        </Bg2>
-      </div>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <!-- <span>Copyright ©hamdell All Rights Reserved.</span> -->
     </div>
   </div>
 </template>
 
 <script>
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import Verify from "@/components/Verifition/Verify";
+import { getCaptchaOnOff } from "@/api/login.js";
+import { listOrder } from "@/api/payment/order";
+import { getUserDeptId } from "@/api/system/user";
+import { listTunnels } from "@/api/equipment/tunnel/api.js";
+import { getConfigKey } from "@/api/system/config.js";
+
+import Bg2 from "@screen/components/Decorations/bg-2.vue";
 
-import Bg2 from "@screen/components/Decorations/bg-2.vue"
-import request from "@/utils/request";
-import * as echarts from "echarts";
 export default {
-  components: {
-    Bg2
-  },
-  name: "Soler",
+  components: { Verify, Bg2 },
+  name: "Login",
   data() {
     return {
-      titles: [
-        { icon: 'total.png', label: '当年累计发电量', unit: '度', value: '0022.4512' },
-        { icon: 'used.png', label: '当年累计用电量', unit: '度', value: '0022.4512' },
-        { icon: 'total.png', label: '今日累计发电量', unit: '度', value: '5555' },
-        { icon: 'used.png', label: '今日累计用电量', unit: '度', value: '6666' },
-        { icon: 'CO2.png', label: 'CO₂减排', unit: 'kg', value: '7777' },
-        { icon: 'tree.png', label: '等效植树', unit: '棵', value: '8888' },
-        { icon: 'coal.png', label: '节约标准煤', unit: 'kg', value: '-' },
-        { icon: 'error.png', label: '放电异常设备', unit: '个', value: '-' },
-      ],
-      chartp1: null,
-      chart1: null,
-      chart2: null,
-      chart3: null,
-      chart1Total1: '-',
-      chart1Total2: '-',
-      chart1Total3: '-',
+      title: "", // 系统标题
+      cookiePassword: "",
+      loginForm: {
+        // username: "admin",
+        // password: "dxc123!@#",
+        //dxc123!@#
+        username: "",
+        password: "",
+        rememberMe: false,
+        code: "",
+        uuid: "",
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" },
+        ],
+      },
       loading: false,
-
+      // 验证码开关
+      captchaOnOff: false,
+      // 注册开关
+      register: false,
+      redirect: undefined,
     };
   },
-  mounted() {
-    this.initTotal();
-    this.initChart();
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.getCookie();
+    //this.getCaptchaOnOffFun();
+    this.title = systemConfig.title(systemConfig.systemType);
   },
   methods: {
-    initTotal() {
-      this.initP1();
+    // 获取验证码是否开启
+    getCaptchaOnOffFun() {
+      getCaptchaOnOff().then((response) => {
+        this.captchaOnOff = response.captchaOnOff;
+      });
     },
-    initP1() {
-      const _chartsOptions = {
-
-        tooltip: {
-          trigger: 'item',
-          position: ['80%', '50%']
-        },
-        series: [
-          {
-            name: '设备统计',
-            type: 'pie',
-            radius: '70%',
-            center: ['50%', '50%'],
-            avoidLabelOverlap: false,
-            data: [
-              { value: 900, name: '正常设备总数', itemStyle: { color: '#38737f' } },
-              { value: 100, name: '异常设备数量', itemStyle: { color: '#9ff501' } },
-            ],
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            }
-          }
-        ]
-      }
-      if (!this.chartp1) {
-        this.chartp1 = echarts.init(document.getElementById("chartp1"));
-        let option1 = JSON.parse(JSON.stringify(_chartsOptions));
-        this.chartp1.setOption(option1);
-        this.chartp1.resize();
+    // 验证码
+    capctchaCheckSuccess(params) {
+      this.loginForm.code = params.captchaVerification;
+      this.loading = true;
+      console.log(this.loginForm.rememberMe, "=======================");
+      if (this.loginForm.rememberMe == true) {
+        Cookies.set("username", this.loginForm.username, { expires: 30 });
+        Cookies.set("password", encrypt(this.loginForm.password), {
+          expires: 30,
+        });
+        Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+      } else {
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
       }
+      this.$store
+        .dispatch("Login", this.loginForm)
+        .then(() => {
+          this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-
-    initChart(){
-        const _chartsOptions = {
-            color:['#00bead'],
-            title: {
-              text: '度',
-              textStyle:{
-                color:'#E5E7E8',
-                fontSize: 15,
-                fontStyle:'normal'
-              },
-              top:'10px',
-              left: '10px'
-            },
-            tooltip: {
-              trigger: 'axis'
-            },
-            xAxis: {
-              type: 'category',
-              data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点',
-                    '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],                       
-              axisLine:{
-                show:true,
-                lineStyle:{
-                  color:'#fff'
-                }
-              },
-              axisTick:{
-                show:false,
-              },
-              axisLabel: {
-                align: "center",
-                rotate: "1",
-                margin: 20,
-                textStyle: {
-                  fontSize: 10,
-                  color: "#E5E7E8",
-                }
-              },
-            },
-            yAxis: {
-              type: 'value',
-              axisLabel: {
-                show: false,
-                color: "#E5E7E8",
-                textStyle: {
-                  fontSize: 10,
-                },
-              },
-              axisLine:{
-                show:true,
-                lineStyle:{
-                  color:'#fff'
-                }
-              },
-              splitLine: {
-                show: false
-              },
-            },
-            grid: {
-              left: "40px",
-              right: "20px",
-              top: "10px",
-              bottom: "0px",
-              containLabel: true,
-            },
-            series: [
-              {
-                data: [],
-                type: 'line',
-                smooth: true
-              }
-            ]
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
+    },
+    handleLogin() {
+      if (this.captchaOnOff) {
+        this.$refs.loginForm.validate((valid) => {
+          if (valid) {
+            this.$refs.verify.show();
+          }
+        });
+      } else {
+        if (this.loginForm.rememberMe == true) {
+          Cookies.set("username", this.loginForm.username, { expires: 30 });
+          Cookies.set("password", encrypt(this.loginForm.password), {
+            expires: 30,
+          });
+          Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+        } else {
+          Cookies.remove("username");
+          Cookies.remove("password");
+          Cookies.remove("rememberMe");
         }
-        this.chart1 = echarts.init(document.getElementById("charts1"));
-          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
-        const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-           
-            this.chart1Total1 = total;
-            option1.series[0].data = data;
-            this.chart1.setOption(option1);
-            this.chart1.resize();
-        return;
-        if(!this.chart1){
-          this.chart1 = echarts.init(document.getElementById("charts1"));
-          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
-          request({
-            url: 'business/device/properties/history/oneDay/dailyAccumulatedCharge',
-            method: 'get'
-          }).then(result => {
-            if (result.code != 200) return;
-            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-            for(let i in result.data){
-              total += result.data[i]
-              const idx = parseInt(i.substr(11,2));
-              data[idx] = result.data[i];
-            }
-            this.chart1Total1 = total;
-            option1.series[0].data = data;
-            this.chart1.setOption(option1);
-            this.chart1.resize();
-          })
-          
-          this.chart2 = echarts.init(document.getElementById("charts2"));
-          let option2 = JSON.parse(JSON.stringify(_chartsOptions));
-          request({
-            url: 'business/device/properties/history/oneDay/cumulativeElectricityConsumptionOnTheDay',
-            method: 'get'
-          }).then(result => {
-            if (result.code != 200) return;
-            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-            for(let i in result.data){
-              total += result.data[i]
-              const idx = parseInt(i.substr(11,2));
-              data[idx] = result.data[i];
-            }
-            this.chart1Total2 = total;
-            option2.series[0].data = data;
-            this.chart2.setOption(option2);
-            this.chart2.resize();
-          })
-          // 发电功率
-          this.chart3 = echarts.init(document.getElementById("charts3"));
-          let option3 = JSON.parse(JSON.stringify(_chartsOptions));
-          request({
-            url: 'business/device/properties/history/oneDay/generatingPower',
-            method: 'get'
-          }).then(result => {
-            if (result.code != 200) return;
-            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-            for(let i in result.data){
-              total += result.data[i]
-              const idx = parseInt(i.substr(11,2));
-              data[idx] = result.data[i];
-            }
-            this.chart1Total3 = total;
-            option3.series[0].data = data;
-            this.chart3.setOption(option3);
-            this.chart3.resize()
+
+        this.$store
+          .dispatch("Login", this.loginForm)
+          .then(() => {
+            this.$store.commit("menu/resetRecent");
+            // this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            this.$router.push({ path: "/" }).catch(() => {});
+            // this.getManageStation();
           })
-          
+          .catch(() => {
+            this.loading = false;
+          });
+      }
+    },
+    getManageStation() {
+      getConfigKey("sd.moduleSwitch").then((res) => {
+        console.log(res, "管理站01");
+        this.$cache.local.set("manageStation", res.msg);
+      });
+      getConfigKey("sd.navigationBar").then((res) => {
+        console.log(res, "res");
+        let sideTheme = "theme-blue";
+        if (res.msg == "0") {
+          sideTheme = "theme-dark";
+        } else {
+          sideTheme = "theme-blue";
         }
-        window.addEventListener("resize", () => {
-          if(this.chart1){
-            this.chart1.resize();
-            this.chart2.resize();
-            this.chart3.resize();
-          }
+        // console.log(res, "是否胡山隧道，胡山单独导航栏样式");
+        this.$cache.local.set("navigationBar", res.msg);
+        this.$store.dispatch("settings/changeSetting", {
+          key: "sideTheme",
+          value: sideTheme,
         });
-    }
-    
+        // this.sideTheme = val;
+        this.$cache.local.set(
+          "layout-setting",
+          `{
+            "topNav":${this.$store.state.settings.topNav},
+            "tagsView":${this.$store.state.settings.tagsView},
+            "weatherView":${this.$store.state.settings.weatherView},
+            "fixedHeader":${this.$store.state.settings.fixedHeader},
+            "sidebarLogo":${this.$store.state.settings.sidebarLogo},
+            "dynamicTitle":${this.$store.state.settings.dynamicTitle},
+            "sideTheme":"${sideTheme}",
+            "theme":"${this.$store.state.settings.theme}"
+          }`
+        );
+        // console.log(this.$store.state.settings.sideTheme)
+      });
+    },
   },
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.solar {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  height: 100vh;
-
-  .solar_left {
-    position: absolute;
-    width: 420px;
-    left: 20px;
-    top: 20px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-    gap: 10px;
-  }
-
-  .solar_right {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    width: 480px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    overflow: hidden;
-    height: 100%;
-  }
+::v-deep .el-input__inner {
+  background-color: #fff !important;
+  height: 34px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #999999;
+  border: 1px solid rgba(0, 145, 67, 0.5);
+  caret-color: #39adff;
+  // margin-left: 20px;
 }
 
-.content-l-t {
-  ::v-deep {
-    .BackgroundClip.bg {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-    }
-  }
+::v-deep .el-checkbox__label {
+  color: #999;
+  font-size: 12px !important;
+  font-weight: 400;
+  color: #999 !important;
+  margin-bottom: 10px;
+  margin-top: 6px;
+}
 
-  .focuse-header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+::v-deep .el-input__inner::placeholder {
+  color: #999999;
+}
 
-    .title2 {
+.login {
+  position: relative;
+  height: 100%;
+  background-image: url("../assets/images/login/login-background.png");
+  // background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 
-      width: 220px;
-      height: 40px;
-      margin-top: 10px;
-      margin-left: 10px;
-      display: flex;
-      align-items: center;
-      background: url("~@screen/images/title/title-solar.png") no-repeat;
-      background-size: 100% 100%;
+.login-content {
+  position: absolute;
+  left: 50%;
+  top: 367px;
+  transform: translateX(-50%);
+  width: 700px;
+  height: 367px;
+  background: rgba(10, 82, 123, 0.6);
+  display: flex;
+  .login-l {
+    // width: 300px;
+    margin-top: 42px;
+    margin-left: 25px;
+    .logo {
+      width: 177px;
+      height: 135px;
+      margin: auto;
+      margin-bottom: 10px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
-
-    .title {
-      font-size: 24px;
-      font-family: YouSheBiaoTiHei;
-      font-weight: 400;
-      margin-left: 30px;
-      margin-top: 5px;
-      background-image: -webkit-linear-gradient(bottom, #217176, #34adb6, #3fd6e1);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+    span {
+      display: block;
+      font-family: PingFang;
+      font-weight: 600;
+      font-size: 30px;
+      color: rgba(42, 217, 253, 0.7);
+      line-height: 35px;
+      text-align: center;
+      margin-top: 20px;
     }
   }
+  .login-r {
+    width: 320px;
+    height: 290px;
+    margin-right: 27px;
+    margin-top: 42px;
+    margin-left: 20px;
+    background: #c9e5eb;
+    padding: 25px 22px;
 
-  .content-l-sec-content {
-    display: flex;
-    flex-direction: row;
-
-    .secleft {
-      height: 180px;
-      width: 250px;
+    .title {
+      display: block;
+      width: 100%;
+      font-family: PingFang;
+      font-weight: 600;
+      font-size: 28px;
+      color: #009143;
+      text-align: center;
     }
-
-    .secright {
+    .line {
+      width: 210px;
+      height: 3px;
+      display: block;
+      margin: auto;
+      margin-bottom: 20px;
+    }
+    .btn {
+      margin: auto;
+      width: 155px;
+      height: 34px;
+      background: #009143;
+      border-radius: 1px;
+      color: #fff;
+      font-size: 16px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      flex-direction: column;
-      gap: 10px;
-      font-size: 14px;
-
-      .d1 {
-        font-size: 12px;
-
-        span {
-          font-size: 30px;
-          font-weight: bold;
-          color: #d3d51c;
-        }
-      }
+      justify-content: center;
+      margin-top: 5px;
     }
   }
+  // .loginTitle {
+  //   display: inline-flex;
+  //   width: 100%;
+  //   height: 45px;
+  //   font-size: 30px;
+  //   font-family: Source Han Sans CN, Source Han Sans CN;
+  //   font-weight: 500;
+  //   color: #ffffff;
+  //   justify-content: center;
+  //   align-items: center;
+  // }
+  .el-input {
+    width: 275px;
+    height: 36px;
+    border-radius: 2px;
+    background: #fff;
+    padding-left: 20px;
+
+    ::v-deep .el-input__inner {
+      font-size: 14px !important;
+    }
 
-  .content-l-t-content {
-    margin-top: 10px;
-    padding: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 15px 15px;
-    // justify-content: center;
-    flex: 1;
-    flex-wrap: wrap;
-
-    .content-k1 {
-      display: flex;
-      flex-direction: row;
-
-      .content-ll {
-        flex: 1;
-        width: 200px;
-        margin-right: 5px;
-
-        .content-llc {
-          display: flex;
-          flex-direction: row;
-          margin-left: 10px;
-          margin-top: 3px;
-          gap: 3px;
-
-          >div {
-            background-color: #9ff501;
-            width: 5px;
-            height: 17px;
-          }
-
-        }
-      }
-
-      .content-kk {
-        display: flex;
-        flex-direction: row;
-        margin-left: 10px;
-        margin-right: 3px;
-        gap: 3px;
-
-        >div {
-          border: 1px solid #0c7f8a;
-          padding: 2px 5px;
-        }
-      }
-
-      .content-unit {
-        font-size: 13px;
-
-        margin-left: 2px;
-      }
+    input {
+      border: 0;
+      height: 36px;
     }
   }
 
-  .content-l-third-content {
-    display: flex;
-    width: 100%;
-    margin: 20px 20px 20px 10px;
-
-    .thirditem {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-      font-size: 14px;
-
-      img {
-        width: 40px;
-        height: 40px;
-        margin-bottom: 10px;
-      }
+  .input-icon {
+    height: 20px;
+    width: 20px;
+    margin-right: 10px;
+    position: relative;
+    left: 10px;
+    top: 7px;
+  }
+}
 
-      span {
-        font-size: 30px;
-        font-weight: bold;
-        color: #d3d51c;
-      }
-    }
+// .login-tip {
+//   font-size: 13px;
+//   text-align: center;
+//   color: #bfbfbf;
+// }
+// .login-code {
+//   width: 37%;
+//   height: 35px;
+//   float: right;
+//   img {
+//     cursor: pointer;
+//     vertical-align: middle;
+//   }
+// }
+.login-form{
+  ::v-deep .el-form-item{
+    margin-bottom: 22px;
   }
 }
 
-.content-box {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
 
+.login-code-img {
+  height: 35px;
 }
 
-.box-title {
-  width: 100%;
-  height: 26px;
-  margin: 7px;
-  background: url("~@screen/images/title/title_bg_002.png") no-repeat;
+/* 重置按钮 */
+.el-button--goon {
+  font-size: 24px;
+  font-weight: 400;
+  color: #fff;
+  width: 380px;
+  height: 55px;
+  background: #07caf6;
+  border-radius: 4px;
+  opacity: 1;
+  border: none;
+}
 
-  span {
-    display: inline-block;
-    margin-left: 35px;
-    font-size: 16px;
-    font-family: Source Han Sans SC, Source Han Sans SC;
-    font-weight: 500;
-    color: #ffffff;
-  }
+.el-button--goon:hover {
 }
-            .chart{
-              height: 155px;
-            }
-</style>
+
+</style>
\ No newline at end of file