login页面修改

guanqb

2022-08-02 9f3c65dd2f4950c7aad44f4aea313f0e20ba9ee0

login页面修改

 package-lock.json

Diff too large

 public/img/bg/group13@2x.png

 public/img/bg/group16@2x(1).png

 public/img/bg/group16@2x.png

 public/img/bg/login_title@2x.png

 public/img/bg/rectangle11@2x.png

 src/App.vue

@@ -12,7 +12,7 @@
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    // text-align: center;
    color: #2c3e50;
}
</style>

 src/api/farm/farmingrecord.js

@@ -299,3 +299,24 @@
        }
    })
}
// 获取在线设备信息
export const getStationAndVideoCount = (params) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/count',
        method: 'get',
        params: {
            ...params
        }
    })
}
// 获取监控/监测设备列表
export const getStationAndVideoList = (params) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfo',
        method: 'get',
        params: {
            'type': "ALL"
        }
    })
}


 src/views/home/index.vue

@@ -194,7 +194,7 @@
            </div>
        </div>

        <div class="down-menu">
        <!-- <div class="down-menu">
            <div class="nc" @click="ncListShow = !ncListShow">
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
@@ -220,6 +220,80 @@
                    :class="{first: index == 0}"
                    @click="setCenter(item)"
                >{{item.farmName}}</div>
            </div>
        </div>-->

        <div class="down-menu">
            <div
                class="nc"
                @click="
          ncListShow = !ncListShow;
          jkListShow = false;
          jcListShow = false;
        "
            >
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div
                class="jk"
                @click="
          jkListShow = !jkListShow;
          ncListShow = false;
          jcListShow = false;
        "
            >
                <span>监控设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <div
                class="jc"
                @click="
          jcListShow = !jcListShow;
          ncListShow = false;
          jkListShow = false;
        "
            >
                <span>监测设备</span>
                <i class="el-icon-caret-bottom"></i>
            </div>

            <div v-show="ncListShow" class="nc-list">
                <div class="title" @click="ncListShow = false">
                    农场
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in farmNumArray"
                    :key="index"
                    class="box"
                    :class="{ first: index == 0 }"
                    @click="setCenter(item)"
                >{{ item.farmName }}</div>
            </div>
            <div v-show="jkListShow" class="jk-list">
                <div class="title" @click="jkListShow = false">
                    监控设备
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in equipmentList.vidList"
                    :key="index"
                    class="box"
                    :class="{ first: index == 0 }"
                >{{ item.name }}</div>
            </div>
            <div v-show="jcListShow" class="jc-list">
                <div class="title" @click="jcListShow = false">
                    监测设备
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in equipmentList.staList"
                    :key="index"
                    class="box"
                    :class="{ first: index == 0 }"
                >{{ item.name }}</div>
            </div>
        </div>

@@ -467,7 +541,9 @@
    selectMarketDistrict,
    getFarmList,
    getLandList,
    getFarmingRecordList
    getFarmingRecordList,
    getStationAndVideoCount,
    getStationAndVideoList
} from '@/api/farm/farmingrecord'
// eslint-disable-next-line no-unused-vars
import { selectXCount } from '@/api/land/land'
@@ -494,6 +570,8 @@
            // 市场流通
            marketDistrict: [],
            ncListShow: false,
            jkListShow: false,
            jcListShow: false,
            farmProfiles: false,
            farmNumArray: [],
            plotNumArray: [],
@@ -507,17 +585,21 @@
            // 农场地块id
            farmPlotId: '',
            // 全局农场参数
            farmID: ''
            farmID: '',
            // 设备
            mTotalObj: {},
            //设备列表
            equipmentList: {},
        }
    },
    created () {
        // 数据刷新
        this.AllDataUpdate()
        this.getFarmList()
        this.getLandList()
    },
    mounted () {
        this.initRightPie('EquipmentEcharts')
        // this.initRightPie('EquipmentEcharts')
        this.AllDataUpdate()
    },
    methods: {
        // 全局数据刷新事件
@@ -530,6 +612,8 @@
            this.selctSaletCount()
            this.selctSaletZ()
            this.selectMarketDistrict()
            this.getStationAndVideoCount()
            this.getStationAndVideoList()
        },
        // 农事操作搜索
        farmSelectList () {
@@ -669,155 +753,165 @@

            const option = {
                title: {
                    text: '28',
                    subtext: '设备总数',
                    top: '40%',
                    left: 'center',
                    text: that.mTotalObj.mTotal,
                    subtext: "设备总数",
                    top: "38%",
                    left: "center",
                    textStyle: {
                        color: '#69E2ED',
                        color: "#69E2ED",
                        fontSize: 34,
                        fontWeight: 'bold',
                        lineHeight: 12
                        fontWeight: "bold",
                        lineHeight: 12,
                    },
                    subtextStyle: {
                        color: '#A9D1D7',
                        color: "#A9D1D7",
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                        fontWeight: "bold",
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['44%', '62%'],
                        center: ['50%', '50%'],
                        type: "pie",
                        radius: ["44%", "62%"],
                        center: ["50%", "50%"],
                        data: [
                            {
                                value: 2,
                                name: 'rose2',
                                value:
                                    that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
                                name: "离线",
                                itemStyle: {
                                    color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: '#F39302'
                                    }, {
                                        offset: 1,
                                        color: '#E5F302'
                                    }])
                                    color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 0,
                                            color: "#F39302",
                                        },
                                        {
                                            offset: 1,
                                            color: "#E5F302",
                                        },
                                    ]),
                                },
                                labelLine: {
                                    show: false
                                    show: false,
                                },
                                label: {
                                    show: false
                                }
                                    show: false,
                                },
                            },
                            {
                                value: 26,
                                name: 'rose2',
                                value:
                                    that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
                                name: "在线",
                                itemStyle: {
                                    color: '#00F0FF'
                                    color: "#00F0FF",
                                },
                                labelLine: {
                                    show: false
                                    show: false,
                                },
                                label: {
                                    show: false
                                }
                            }
                        ]
                                    show: false,
                                },
                            },
                        ],
                    },
                    { // 指示线
                    {
                        // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: 'pie',
                        radius: ['44%', '62%'],
                        type: "pie",
                        radius: ["44%", "62%"],
                        data: [
                            {
                                value: 2,
                                value:
                                    that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
                                itemStyle: {
                                    color: 'transparent'
                                    color: "transparent",
                                },
                                labelLine: {
                                    show: true,
                                    length: 24,
                                    length2: 16,
                                    color: '#fff',
                                    color: "#fff",
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                        color: "#fff",
                                    },
                                },
                                label: {
                                    color: '#A9D1D7',
                                    color: "#A9D1D7",
                                    fontSize: 16,
                                    position: 'outside',
                                    formatter: '{a|2}\n离线',
                                    position: "outside",
                                    formatter: `{a|${that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine
                                        }}\n离线`,
                                    rich: {
                                        a: {
                                            color: '#EBC802',
                                            color: "#EBC802",
                                            fontSize: 22,
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }

                                            fontWeight: "bold",
                                            lineHeight: 30,
                                        },
                                    },
                                },
                            },
                            {
                                value: 26,
                                value:
                                    that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
                                itemStyle: {
                                    color: 'transparent'
                                }
                            }
                        ]
                                    color: "transparent",
                                },
                            },
                        ],
                    },

                    { // 指示线
                    {
                        // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: 'pie',
                        radius: ['44%', '62%'],
                        type: "pie",
                        radius: ["44%", "62%"],
                        data: [
                            {
                                value: 2,
                                value:
                                    that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
                                itemStyle: {
                                    color: 'transparent'
                                }

                                    color: "transparent",
                                },
                            },
                            {
                                value: 26,
                                value:
                                    that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
                                itemStyle: {
                                    color: 'transparent'
                                    color: "transparent",
                                },
                                labelLine: {
                                    show: true,
                                    length: 24,
                                    length2: 16,
                                    color: '#fff',
                                    color: "#fff",
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                        color: "#fff",
                                    },
                                },
                                label: {
                                    color: '#A9D1D7',
                                    color: "#A9D1D7",
                                    fontSize: 16,
                                    position: 'outside',
                                    formatter: '{a|26}\n在线',
                                    position: "outside",
                                    formatter: `{a|${that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine
                                        }}\n在线`,
                                    rich: {
                                        a: {
                                            color: '#38ADD7',
                                            color: "#38ADD7",
                                            fontSize: 22,
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
                                            fontWeight: "bold",
                                            lineHeight: 30,
                                        },
                                    },
                                },
                            },
                        ],
                    },
                ],
            }

            option && myChart.setOption(option)
        },

        initLine (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
@@ -1203,7 +1297,29 @@
            }
            this.$echarts.registerMap('china', chinaJSON)
            myChart.setOption(option)
        }
        },
        // 获取在线设备数量
        getStationAndVideoCount () {
            var that = this
            console.log(21313)
            getStationAndVideoCount().then((res) => {
                if (JSON.stringify(res.data) != "{}" && res.data.data) {
                    that.mTotalObj = res.data.data
                }
                console.log('2311111111112131321231113', res)
                that.initRightPie('EquipmentEcharts')

            })
        },
        // 获取监控/监测设备列表
        getStationAndVideoList () {
            var that = this
            getStationAndVideoList().then((res) => {
                if (JSON.stringify(res.data) != "{}" && res.data.data) {
                    that.equipmentList = res.data.data
                }
            })
        },
    }
}
</script>
@@ -1785,6 +1901,74 @@
        }
    }

    // .down-menu {
    //     display: flex;
    //     // align-items: center;
    //     justify-content: space-around;
    //     flex-direction: column;
    //     position: absolute;
    //     top: 102px;
    //     left: 438px;
    //     width: 146px;
    //     height: 156px;

    //     & > div {
    //         padding: 0 16px;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-between;
    //         height: 46px;
    //         background: rgba(3, 50, 82, 0.4);
    //         border-radius: 8px 8px 8px 8px;
    //         border: 1px solid #69e2ed;
    //         box-sizing: border-box;
    //         font-size: 18px;
    //         color: #6de9f3;
    //         cursor: pointer;

    //         i {
    //             font-size: 12px;
    //         }
    //     }

    //     .nc-list {
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: flex-start;
    //         position: absolute;
    //         top: 0;
    //         left: 172px;
    //         width: 144px;
    //         height: 224px;
    //         overflow-x: hidden;
    //         overflow-y: auto;
    //         background: rgba(6, 28, 29, 0.8);
    //         border-radius: 8px 8px 8px 8px;
    //         border: 1px solid #69e2ed;
    //         box-sizing: border-box;

    //         .title {
    //             width: 100%;
    //             height: 46px;
    //             display: flex;
    //             align-items: center;
    //             justify-content: space-between;
    //             font-size: 20px;
    //         }

    //         .box {
    //             margin-top: 16px;
    //             padding-left: 20px;
    //             width: 100%;
    //             height: 24px;
    //             text-align: left;
    //         }

    //         .box.first {
    //             margin-top: 0 !important;
    //         }
    //     }
    // }
    .down-menu {
        display: flex;
        // align-items: center;
@@ -1815,7 +1999,9 @@
            }
        }

        .nc-list {
        .nc-list,
        .jk-list,
        .jc-list {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
@@ -1844,7 +2030,8 @@
                margin-top: 16px;
                padding-left: 20px;
                width: 100%;
                height: 24px;
                // height: 24px;
                line-height: 24px;
                text-align: left;
            }

@@ -1852,8 +2039,13 @@
                margin-top: 0 !important;
            }
        }
        .jk-list {
            top: 55px;
        }
        .jc-list {
            top: 108px;
        }
    }

    .city-flow {
        padding: 0 12px;
        display: flex;

 src/views/login/index.vue

@@ -1,159 +1,273 @@
<template>
    <div class="auth-page">
        <div class="container">
            <h1 class="text-xs-center">南城县智慧农业综合监管平台</h1>
            <div class="loginbody">
                <el-form :model="user" ref="formName" status-icon :rules="rules">
                    <!-- 用户账号 -->
                    <el-form-item prop="username">
                        <el-input
                            v-model="user.username"
                            prefix-icon="el-icon-user"
                            placeholder="用户账号"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <!-- 用户密码 -->
                    <el-form-item prop="password">
                        <el-input
                            type="password"
                            v-model="user.password"
                            prefix-icon="el-icon-lock"
                            placeholder="用户密码"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <!-- 登录按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click.enter="onLogin(user)">登&nbsp;录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
  <div class="auth-page">
    <div class="title"></div>
    <div class="container">
      <h1 class="text-xs-center">用户登录</h1>
      <div class="loginbody">
        <el-form :model="user" ref="formName" status-icon :rules="rules">
          <!-- 用户账号 -->
          <span class="input">用户名：</span>
          <el-form-item prop="username">
            <el-input
              v-model="user.username"
              prefix-icon="el-icon-user"
              placeholder="请输入您的用户名"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 用户密码 -->
          <span class="input">密码：</span>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="user.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入您密码"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button type="primary" @click.enter="onLogin(user)"
              >登&nbsp;录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import nprogress from 'nprogress'
import md5 from 'js-md5'
import axios from 'axios'
import nprogress from "nprogress";
import md5 from "js-md5";
import axios from "axios";

export default {
    name: 'AppRegister',
    data () {
        return {
            user: {
                username: '',
                password: ''
  name: "AppRegister",
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户账号长度在3~10个字符之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户密码长度在3~10个字符之间",
            trigger: "blur",
          },
        ],
      },
      errors: null,
      newAxios: null,
    };
  },
  created() {
    var that = this;

    this.newAxios = axios.create({
      baseURL: "http://182.106.212.58:8013/api",
      timeout: 600000,
      headers: {
        Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0",
        "Tenant-Id": "000000",
      },
    });

    document.onkeydown = (e) => {
      const _key = window.event.keyCode;
      if (_key === 13) {
        that.onLogin(that.user);
      }
    };
  },
  methods: {
    onLogin({ username, password }) {
      this.$refs.formName.validate((valid) => {
        if (valid) {
          nprogress.start();

          this.newAxios({
            method: "POST",
            url: "/blade-auth/oauth/token",
            params: {
              username: username,
              password: md5(password),
              tenantId: "000000",
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户账号', trigger: 'blur' },
                    { min: 3, max: 10, message: '用户账号长度在3~10个字符之间', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' },
                    { min: 3, max: 10, message: '用户密码长度在3~10个字符之间', trigger: 'blur' }
                ]
            },
            errors: null,
            newAxios: null
        }
    },
    created () {
        var that = this

        this.newAxios = axios.create({
            baseURL: 'http://182.106.212.58:8013/api',
            timeout: 600000,
            headers: {
                Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
                'Tenant-Id': '000000'
          }).then((res) => {
            if (res.data.access_token) {
              this.$store.commit("setUser", res.data);
              this.$router.push({ path: "/" });
            } else {
              this.$message({
                type: "warning",
                message: "用户名或密码不正确，请重新输入",
              });
            }
        })

        document.onkeydown = e => {
            const _key = window.event.keyCode
            if (_key === 13) {
                that.onLogin(that.user)
            }
            nprogress.done();
          });
        }
      });
    },
    methods: {
        onLogin ({ username, password }) {
            this.$refs.formName.validate((valid) => {
                if (valid) {
                    nprogress.start()

                    this.newAxios({
                        method: 'POST',
                        url: '/blade-auth/oauth/token',
                        params: {
                            username: username,
                            password: md5(password),
                            tenantId: '000000'
                        }
                    }).then(res => {
                        if (res.data.access_token) {
                            this.$store.commit('setUser', res.data)

                            this.$router.push({ path: '/' })
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '用户名或密码不正确，请重新输入'
                            })
                        }
                        nprogress.done()
                    })
                }
            })
        }
    }
}
  },
};
</script>

<style scoped lang="scss">
.auth-page {
    position: fixed;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../../../public/img/bg/group16@2x.png);
  background-size: 100% 100%;
  margin: 0;
  padding: 0;

  .title {
    width: 1389px;
    height: 115px;
    background-image: url(../../../public/img/bg/login_title@2x.png);
    background-size: 100% 100%;
    margin: 99px 264px 0px 266px;
  }
  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0099cc;
    margin: 317px auto;
    width: 653px;
    height: 552px;
    background-image: url(../../../public/img/bg/rectangle11@2x.png);
    background-size: 100% 100%;
    border-radius: 10px;
    letter-spacing: 100;

    .container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 480px;
        height: 320px;
        background: #fff;
        border-radius: 10px;

        h1 {
            margin: 0;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        .loginbody {
            position: absolute;
            top: 120px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 72%;
            margin: auto;

            .el-form-item {
                text-align: center;
            }
        }
    h1 {
      margin: 54px 244px 0px 243px;
      width: 166px;
      text-align: left;
      width: 166px;
      height: 30px;
      font-size: 42px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #ffffff;
      line-height: 30px;
      letter-spacing: 2px;
    }

    .loginbody {
      position: absolute;
      top: 120px;
      left: 0;
      right: 0;
      bottom: 0;
      width: 72%;
      // margin: auto;
      margin-left: 51px;

      .el-form-item {
        text-align: center;

        /deep/.el-input__inner {
          width: 548px;
          height: 59px;
          background: #0c2d49;
          opacity: 0.5;
          margin-bottom: 15px;
          font-size: 21px;
        }
        /deep/.el-input--prefix .el-input__inner {
          padding-left: 40px;
        }
        /deep/.el-input__inner:focus {
          border: 2px solid #22b4cb;
          opacity: 0.8;
          color: #fff;
        }
        /deep/.el-form-item__error {
          color: #f00;
          line-height: 0;
          font-size: 15px;
          opacity: 0.8;
          letter-spacing: 2px;
          font-weight: 700;
        }
        /deep/.el-input__icon {
          height: 91%;
          width: 34px;
        }
        /deep/.el-icon-user::before,
        /deep/.el-icon-lock::before {
          font-size: 22px;
        }
        /deep/.el-form-item.is-error,
        /deep/.el-input__validateIcon {
          font-size: 22px;
        }
        /deep/.el-input__suffix {
          right: -48px;
        }
        /deep/.el-input input::-webkit-input-placeholder {
          color: #ffffff;
          font-size: 21px;
          opacity: 0.5;
          line-height: 27px;
        }
        /deep/.el-input input::-moz-input-placeholder {
          color: #ffffff;
          font-size: 21px;
          opacity: 0.5;
        }
        /deep/.el-input input::-ms-input-placeholder {
          color: #ffffff;
          font-size: 21px;
          opacity: 0.5;
          line-height: 27px;
        }

        .el-button {
          width: 548px;
          height: 59px;
          background: linear-gradient(
            90deg,
            rgba(0, 249, 247, 0.54),
            rgba(0, 182, 249, 0.54)
          );
          box-shadow: 0px 2px 20px 1px rgba(1, 25, 70, 0.46);
          font-size: 29px;
          margin-top: 25px;
        }
      }

      .input {
        display: inline-block;
        width: 100px;
        height: 23px;
        font-size: 24px;
        font-family: PingFang SC;
        color: #ffffff;
        margin-bottom: 21px;
      }
    }
  }
}
</style>