首页算法统计、数据展示

pdaaphm-ui/src/views/dashboard/BarChart.vue

@@ -1,146 +1,122 @@
 <template>
-  <div ref="barChart" :class="className" :style="{ height: height, width: width }" />
+  <div
+    ref="barChart"
+    :class="className"
+    :style="{ height: height, width: width }"
+  />
 </template>
 
 <script>
-import { listSubType } from "@/api/conf/subType";
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'barChart',
+      default: "barChart",
     },
     width: {
       type: String,
-      default: '100%',
+      default: "100%",
     },
     height: {
       type: String,
-      default: '200px',
+      default: "200px",
+    },
+    agloTypeData: {
+      type: Array,
+      require: true,
     },
   },
   data() {
     return {
       chart: null,
-      // 数量
-      estimate: 0,
-      extract: 0,
-      denoise: 0,
-      fault: 0,
-      completion: 0,
-      expand: 0
-    }
+      color: [
+        "#5470c6",
+        "#91cc75",
+        "#fac858",
+        "#ee6666",
+        "#73c0de",
+        "#3ba272",
+        "#fc8452",
+        "#9a60b4",
+        "#ea7ccc",
+      ],
+    };
   },
   mounted() {
-    // this.getList(1);
-    // this.getList(2);
-    // this.getList(3);
-    // this.getList(4);
-    // this.getList(5);
-    // this.getList(6);
-    this.initChart()
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      var chartDom = this.$refs.barChart
+      let xAxisData = [];
+      let seriesData = [];
+      this.agloTypeData.forEach((item, index) => {
+        xAxisData.push(item.name);
+        seriesData.push({
+          value: item.value,
+          itemStyle: {
+            color: this.color[index],
+          },
+        });
+      });
+
+      var chartDom = this.$refs.barChart;
       // var myChart = echarts.init(chartDom)
-      this.chart = echarts.init(chartDom)
-      var option
+      this.chart = echarts.init(chartDom);
+      var option;
       option = {
         xAxis: {
-          type: 'category',
-          data: ['补全', '去噪', '扩充', '特征提取', '退化评估', '故障预测'],
+          type: "category",
+          data: xAxisData,
           axisLabel: {
             show: true,
-            color: '#ffffff',
-          }
+            color: "#ffffff",
+          },
         },
         yAxis: {
-          type: 'value',
+          type: "value",
+          splitLine: {
+            //x网格样式
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)",
+              type: "solid",
+              width: "1",
+            },
+          },
         },
         series: [
           {
-            data: [
-              {
-                // value: this.denoise,
-                value: 5,
-                itemStyle: {
-                  color: '#5470c6',
-                },
-              },
-              {
-                value: 3,
-                itemStyle: {
-                  color: '#5470c6',
-                },
-              },
-              {
-                value: 5,
-                itemStyle: {
-                  color: '#5470c6',
-                },
-              },
-              {
-                value: 5,
-                itemStyle: {
-                  color: '#9fe080',
-                },
+            data: seriesData,
+            type: "bar",
+            barWidth: 50,
+            label: {
+              show: true,
+              position: "inside",
+              textStyle: {
+                color: "#fff",
+                fontSize: 16,
               },
-              {
-                value: 5,
-                itemStyle: {
-                  color: '#ffdc60',
-                },
-              },
-              {
-                value: 5,
-                itemStyle: {
-                  color: '#ff7070',
-                },
-              }
-            ],
-            type: 'bar',
-            barWidth: 50
+            },
           },
         ],
-      }
-      option && this.chart.setOption(option)
+      };
+      option && this.chart.setOption(option);
     },
     // 获取
-    getList(value) {
-      this.queryParams = { pageNum: 1, pageSize: 100, type: value }
-      listSubType(this.queryParams).then(response => {
-        // this.subTypeList = response.rows;
-
-        if (value === 1) {
-          console.log(value);
-          console.log(this.estimate);
-        } else if (value === 2) {
-          this.extract = response.total
-        } else if (value === 3) {
-          this.denoise = response.total
-        } else if (value === 4) {
-          this.fault = response.total
-        } else if (value === 5) {
-          this.completion = response.total
-        } else {
-          this.expand = response.total
-        }
-      });
-    },
   },
-}
+};
 </script>

pdaaphm-ui/src/views/homePage/preCharts.vue

@@ -91,7 +91,6 @@ export default {
       this.setOptions(this.chartData);
     },
     setOptions({ legendData, xAxisData, yAxisData, seriesData } = {}) {
-      console.log("seriesData", seriesData);
       this.chart.setOption({
         title: {
           text: this.title,

pdaaphm-ui/src/views/homePage/ringChart.vue

@@ -1,124 +1,155 @@
 <template>
   <div>
-    <div ref='ringChart' class="ringChart" style="width:290px;height:200px"></div>
+    <div
+      ref="ringChart"
+      class="ringChart"
+      style="width: 290px; height: 250px"
+    ></div>
   </div>
 </template>
 
 <script>
-import { listSubType } from "@/api/conf/subType";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
+import { listAlgConfig } from "@/api/system/algConfig";
+
 export default {
-  name: 'RingChart',
+  name: "RingChart",
+  props: {
+    total: {
+      type: Number,
+      require: true,
+    },
+    agloTypeData: {
+      type: Array,
+      require: true,
+    },
+  },
   data() {
     return {
       // 总数量
-      total:0,
-      chart:null,
-      option:null
-    }
+      // total: 0,
+      chart: null,
+      option: null,
+      data: null,
+      // agloTypeData: [],
+    };
   },
   mounted() {
-    this.getList();
-    this.ringChart()
+    // this.getTotal();
+    this.$nextTick(() => {
+      this.ringChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
+    // 获取总条数
+    getTotal() {
+      this.queryParams = { pageNum: 1, pageSize: 1000 };
+      listAlgConfig(this.queryParams).then((response) => {
+        this.total = response.total;
+        const typeFrequency = response.rows.map((item) => {
+          return item.algType;
+        });
+        console.log("typeFrequency", typeFrequency);
+        const countedTypeFrequency = typeFrequency?.reduce((obj, name) => {
+          if (name in obj) {
+            obj[name]++;
+          } else {
+            obj[name] = 1;
+          }
+          return obj;
+        }, {});
+
+        const agloType = this.dict.type.biz_alg_type;
+        for (let key in this.dict.type.biz_alg_type) {
+          this.agloTypeData.push({
+            value: countedTypeFrequency[key],
+            name: agloType[key].label,
+          });
+        }
+        this.ringChart();
+      });
+    },
+
     ringChart() {
-      var chartDom = this.$refs.ringChart
-      this.chart = echarts.init(chartDom)
+      var chartDom = this.$refs.ringChart;
+      this.chart = echarts.init(chartDom);
       this.option = {
         tooltip: {
-          trigger: 'item',
+          trigger: "item",
         },
         legend: {
-          left: 'center',
-          top:'top',
-          padding:[0,0,10,0],
-          textStyle:{//图例文字的样式
-            color:'#fff'
-          }
+          x: "left", //可设定图例在左、右、居中
+          y: "top",
+          padding: [0, 0, 30, 0],
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+          },
         },
         title: {
-          text: '算法总数',
-          subtext:28,
+          text: "算法总数",
+          subtext: 28,
           textStyle: {
-            fontSize: 16, 
-            color:'#fff',
-            fontWeight: 400, 
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: 400,
           },
-          subtextStyle:{
-            fontSize: 24, 
-            fontWeight: 700, 
+          subtextStyle: {
+            fontSize: 24,
+            fontWeight: 700,
             color: "rgb(50,197,233)",
           },
-          left: 'center', // 文字水平居中
-          top: '40%', // 文字垂直居中
+          left: "center", // 文字水平居中
+          top: "40%", // 文字垂直居中
         },
         series: [
           {
-            name: '算法',
-            type: 'pie',
-            radius: ['45%', '70%'],
+            name: "算法",
+            type: "pie",
+            radius: ["45%", "65%"],
             avoidLabelOverlap: false,
             label: {
               show: false,
-              position: 'center',
+              position: "center",
             },
             emphasis: {
               label: {
                 show: true,
                 fontSize: 24,
-                fontWeight: 'bold',
+                fontWeight: "bold",
               },
             },
             labelLine: {
               show: false,
             },
-            data: [
-              { value: 13, name: '数据预处理' },
-              { value: 5, name: '特征提取' },
-              { value: 5, name: '退化评估' },
-              { value: 5, name: '故障预测' },
-            ],
+            data: this.agloTypeData,
           },
         ],
-      }
-      this.chart.on('mousemove',  (params) => {
+      };
+      this.chart.on("mousemove", (params) => {
         if (params.data) {
-          this.option.title.text = ' '
-          this.option.title.subtext = ' '
-          this.chart.setOption(this.option)
+          this.option.title.text = " ";
+          this.option.title.subtext = " ";
+          this.chart.setOption(this.option);
         }
-      })
+      });
 
-      this.chart.on('mouseout',  () => {
-        this.option.title.text = '算法总数'
-        this.option.title.subtext = 28
-        this.chart.setOption(this.option)
-      })
-      this.option && this.chart.setOption(this.option)
-    },
-    // 获取总条数
-    getList() {
-      this.loading = true;
-      this.queryParams={pageNum:1,pageSize:100}
-      listSubType(this.queryParams).then(response => {
-        // this.subTypeList = response.rows;
-        // this.total = response.total;
-        this.loading = false;
-        this.ringChart()
+      this.chart.on("mouseout", () => {
+        this.option.title.text = "算法总数";
+        this.option.title.subtext = this.total;
+        this.chart.setOption(this.option);
       });
+      this.option && this.chart.setOption(this.option);
     },
-    
   },
-}
+};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

pdaaphm-ui/src/views/index.scss

@@ -6,7 +6,7 @@
 
 .first {
   width: 97%;
-  height: 210px;
+  height: 250px;
   margin: 20px;
   // background-color: white;
   border-radius: 15px;
@@ -221,6 +221,17 @@
   }
 }
 
+.imgShow{
+  width: 100%;
+  text-align: center;
+  .imgTitle{
+    font-size: 1.1rem;
+    color: #fff;
+    font-weight: 700;
+    margin: 10px 0;
+  }
+}
+
 ::-webkit-scrollbar {
   display: none;
 }

pdaaphm-ui/src/views/index.vue

@@ -207,6 +207,7 @@
         <div class="four">
           <div class="img fourBg odd" @click="handleProcess(3)">
             <div class="tag">特征提取</div>
+            <div class="tag2">故障诊断</div>
           </div>
         </div>
         <div class="five">
@@ -221,7 +222,6 @@
             @click="handleProcess(5)"
           >
             <div class="tag">故障预测</div>
-            <div class="tag2">故障诊断</div>
           </div>
         </div>
       </div>
@@ -394,8 +394,12 @@
     <div class="first">
       <h4 style="margin: 13px 0px 0px 20px; color: #fff">算法统计</h4>
       <div class="chart">
-        <RingChart />
-        <BarChart width="700px" />
+        <RingChart
+          v-if="flag"
+          :total="ringTotal"
+          :agloTypeData="agloTypeData"
+        />
+        <BarChart v-if="flag" :agloTypeData="agloTypeData" width="700px" />
       </div>
     </div>
     <el-dialog
@@ -489,10 +493,18 @@
 
       <CurveCharts
         style="margin-top: 20px"
-        v-if="!isTableShow && !['4', '5'].includes(fileType)"
+        v-if="!isTableShow && !['4', '5'].includes(fileType) && !isImgShow"
         :title="'处理后数据'"
         :chartData="resultChartData"
       />
+      <!-- 有图片显示图片，没图片显示数据 -->
+      <div
+        v-if="!isTableShow && !['4', '5'].includes(fileType) && isImgShow"
+        class="imgShow"
+      >
+        <div class="imgTitle">处理后图片</div>
+        <ImagePreview class="image-preview" :src="imgUrl"></ImagePreview>
+      </div>
 
       <!-- <div
         v-if="!isTableShow && !['4', '5'].includes(fileType)"
@@ -516,12 +528,13 @@ import RingChart from "@/views/homePage/ringChart";
 import PreCharts from "@/views/homePage/preCharts";
 import CurveCharts from "@/views/homePage/curveCharts";
 import BarChart from "@/views/dashboard/BarChart";
-import { getAlgConfigByType } from "@/api/system/algConfig";
+import { getAlgConfigByType, listAlgConfig } from "@/api/system/algConfig";
 import { getDataProcessByType, addProcess } from "@/api/system/process";
 import { getDataByType, getData, listData } from "@/api/system/data";
+
 export default {
   name: "Index",
-  dicts: ["biz_process_status"],
+  dicts: ["biz_alg_type", "biz_process_status"],
   components: {
     CountTo,
     RingChart,
@@ -557,7 +570,6 @@ export default {
       resultFileId: null,
       // filePath: null,
       fileType: null,
-      chart: null,
       imgPreviewUrl: null,
       type: 2,
       dialogType: null,
@@ -566,17 +578,18 @@ export default {
       nowRow: {},
       nowTypeNum: null,
       agloRemark: "",
+      ringTotal: 0,
+      agloTypeData: [],
+      flag: false,
+      isImgShow: false,
+      imgUrl: null,
     };
   },
+  mounted() {},
   created() {
+    this.getTotal();
     this.getTableData();
   },
-  beforeDestroy() {
-    if (this.chart != null && this.chart != "" && this.chart != undefined) {
-      this.chart.dispose();
-      this.chart = null;
-    }
-  },
   watch: {
     fileShowVisible(value) {
       if (!value) {
@@ -593,6 +606,33 @@ export default {
     },
   },
   methods: {
+    getTotal() {
+      const queryParams = { pageNum: 1, pageSize: 1000 };
+      listAlgConfig(queryParams).then((response) => {
+        this.total = response.total;
+
+        const typeFrequency = response.rows.map((item) => {
+          return item.algType;
+        });
+        const countedTypeFrequency = typeFrequency?.reduce((obj, name) => {
+          if (name in obj) {
+            obj[name]++;
+          } else {
+            obj[name] = 1;
+          }
+          return obj;
+        }, {});
+
+        const agloType = this.dict.type.biz_alg_type;
+        for (let key in this.dict.type.biz_alg_type) {
+          this.agloTypeData.push({
+            value: countedTypeFrequency[key],
+            name: agloType[key].label,
+          });
+        }
+        this.flag = true;
+      });
+    },
     getTableData() {
       const query = {
         dataType: 0,
@@ -707,13 +747,23 @@ export default {
             const resData = resultRes.data;
             this.agloRemark = resData.remark;
             const url = process.env.VUE_APP_BASE_API + resData.dataPath;
-            this.fetchLogFile(url).then((text) => {
-              let data, content, head;
-              data = this.handleFileData(text);
-              content = data.contentData;
-              head = data.headData;
-              this.switchHandle(content, head, resData.dataType);
-            });
+            // resultRes.data.imagePath =
+            //   "/profile/upload/2024/12/06/testdata1_故障预测_20241206181334A015.jpeg";
+            // console.log("resData.dataType", resData);
+            if (resData.imagePath && resData.dataType == "4") {
+              this.imgUrl = resData.imagePath;
+              this.isImgShow = true;
+              this.loading = false;
+              this.fileShowVisible = true;
+            } else {
+              this.fetchLogFile(url).then((text) => {
+                let data, content, head;
+                data = this.handleFileData(text);
+                content = data.contentData;
+                head = data.headData;
+                this.switchHandle(content, head, resData.dataType);
+              });
+            }
           })
           .catch((error) => {
             console.error("Failed to fetch the log file:", error);
@@ -783,26 +833,14 @@ export default {
         .split("\r\n")
         .filter((line) => line.trim() !== "")
         .map((row) => row.split(","));
-      const headData = data[0];
+      let headData = [];
+      for (let i = 1; i <= data[0].length; i++) {
+        headData.push(`曲线${i}`);
+      }
       const contentData = Array.from({ length: headData.length }, () => []);
-      for (let i = 1; i < data.length; i++) {
-        // 从 1 开始，跳过表头
+      for (let i = 0; i < data.length; i++) {
         data[i].forEach((value, index) => {
           contentData[index].push(value * 1);
-          // if (!value || value == 0 || value == NaN) {
-          //   contentData[index].push({
-          //     value: data[i][index - 1],
-          //     symbolSize: 20,
-          //     symbol: "circle",
-          //     itemStyle: {
-          //       normal: {
-          //         color: "#ff0000",
-          //       },
-          //     },
-          //   });
-          // } else {
-          //   contentData[index].push(value * 1);
-          // }
         });
       }
       return { contentData, headData };

pdaaphm-ui/src/views/login.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -8,7 +13,11 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -19,7 +28,11 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
@@ -30,26 +43,36 @@
           style="width: 63%"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px; color:black">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px; color: black"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          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 style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
@@ -63,7 +86,7 @@
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -75,32 +98,32 @@ export default {
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
@@ -108,8 +131,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -119,42 +143,50 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      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)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             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 });
+            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');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style scoped rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
   justify-content: center;
@@ -162,26 +194,26 @@ export default {
   height: 100%;
   background-image: url("../assets/images/login-background.jpg");
   background-size: 100% 100%;
-  background-attachment:fixed;
+  background-attachment: fixed;
 }
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .login-form {
   margin-top: 15%;
   border-radius: 6px;
-  background: rgba(255,255,255);
+  background: rgba(255, 255, 255);
   width: 400px;
   padding: 25px 25px 5px 25px;
   .el-input {
     height: 30px;
-    background-color: rgba(255,255,255,0.6);
+    background-color: rgba(255, 255, 255, 0.6);
     input {
       height: 30px;
-      background-color: rgba(255,255,255,0.6);
+      background-color: rgba(255, 255, 255, 0.6);
     }
   }
   .input-icon {
@@ -190,7 +222,7 @@ export default {
     margin-left: 2px;
   }
   .el-form-item {
-    margin-bottom: 10px
+    margin-bottom: 10px;
   }
 }
 .login-tip {
@@ -222,7 +254,7 @@ export default {
 .login-code-img {
   height: 38px;
 }
-.el-input__inner{
+.el-input__inner {
   background: white !important;
   color: #000;
 }