MingGao_vue/minggao/src/page/home/index.vue

<!--  -->
<template>
  <div
    class="indexbox"
    v-loading="indexloading"
    element-loading-text="欢迎登录！加载中，请稍后..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255)"
  >
    <div class="menubox">
      <div class="index_title">
        <img
          v-if="imgurl"
          :src="
            imgurl.indexOf('http') == -1 ? this.$deriveData + imgurl : imgurl
          "
          alt=""
          class="menubox_logo_img"
        />
        <p>{{ headline }}</p>
      </div>
      <div class="index_out" style="display: flex; align-items: center;">
        <div class="index_out_info">
          <i class="el-icon-message-solid" @click="towarn"></i>
          <p class="dian" v-if="warntf"></p>
        </div>
        <div title="去大屏" v-if="hasNewHome">
          <router-link target="_blank" style="margin-right: 15px; font-size: 22px; color: #666666" to="/newHome/home"><i class="el-icon-monitor"></i></router-link>
        </div>
        <div
          class="iconfont icon-erweima"
          style="margin-right: 15px; font-size: 22px; color: #666666"
          @click="QRcode"
        ></div>
        <el-dropdown trigger="click" @command="quit">
          <span class="el-dropdown-link" style="cursor: pointer">
            <span>{{ username }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">更改密码</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <p><i class="el-icon-switch-button" @click="quit"></i></p> -->
      </div>
    </div>
    <div class="contentbox">
      <div
        class="menubox_item"
        :style="{ width: menunoneele ? '226px' : '0px' }"
      >
        <div class="elmenubox">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            background-color="#0D3756"
            text-color="#fff"
            :default-active="menuActiveId"
            active-text-color="#409EFF"
            :unique-opened="true"
          >
            <el-submenu
              v-for="item in infodata"
              :key="item.pur_id"
              :index="item.pur_id.toString()"
            >
              <template slot="title">
                <i :class="icon[item.pur_id]" style="color: #fff"></i>
                <span>{{ item.purview_name }}</span>
              </template>
              <template v-for="items in item.children">
                <el-submenu
                  :index="items.pur_id.toString()"
                  v-if="items.children"
                  :key="items.pur_id"
                  @click="skip('/index/' + items.menu)"
                >
                  <span slot="title">{{ items.purview_name }}</span>
                  <el-menu-item-group>
                    <el-menu-item
                      v-for="item2 in items.children"
                      :index="item2.pur_id.toString()"
                      :key="item2.pur_id"
                      @click="skip('/index/' + item2.menu)"
                    >
                      <span slot="title">{{ item2.purview_name }}</span>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item
                  :index="items.pur_id.toString()"
                  v-else
                  :key="items.pur_id"
                  @click="skip('/index/' + items.menu)"
                  class="el-menu-item2"
                >
                  <span slot="title"> {{ items.purview_name }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </el-menu>
        </div>
        <div
          class="operationbox"
          :style="{ left: menunoneele ? '226px' : '0px' }"
        >
          <img
            :src="
              menunoneele
                ? '../../../static/images/homepage/shou.png'
                : '../../../static/images/homepage/chu.png'
            "
            alt=""
            @click="menunone"
          />
        </div>
      </div>
      <div
        class="contentbox_right"
        :style="{ width: menunoneele ? 'calc(100% - 226px)' : '100%' }"
      >
        <div class="contentbox_crumbs">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in routerinfo"
              :key="item.pur_id"
            >
              <!-- <a
                v-if="
                  index == routerinfo.length - 2 &&
                    item.menu != '' &&
                    item.purview_name != '查看图片'
                "
                :href="'/#/index/' + item.menu"
                style="cursor: pointer"
                >{{ item.purview_name }}</a
              > -->
              <span>{{ item.purview_name }}</span></el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="contentbox_box">
          <router-view />
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="alterpassTF"
      width="500px"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="原始密码：" prop="oldpass">
            <el-input type="password" v-model="ruleForm.oldpass"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newpass">
            <el-input type="password" v-model="ruleForm.newpass"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码：" prop="newpasstrue">
            <el-input type="password" v-model="ruleForm.newpasstrue"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="扫描下载智网监测APP" :visible.sync="QRtf" width="300px">
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto"></div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import QRCode from 'qrcodejs2';
// import testData from './test';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    var validatePass = (rule, value, callback) => {
      console.log(value);
      if (value == this.ruleForm.newpass) {
        callback();
      } else {
        callback(new Error('俩次密码不一致，请重新确认密码！'));
      }
    };
    return {
      hasNewHome:false,
      infodata: [],
      username: '',
      routerdata: [],
      menuActiveId: '1',
      // menuOpeneds:["18"]
      routerinfo: [],
      options: [],
      value: '',
      imgurl: '', //系统logo
      headline: '', //系统标题
      alterpassTF: false, //修改密码框
      ruleForm: {
        oldpass: '',
        newpass: '',
        newpasstrue: ''
      },
      rules: {
        oldpass: [
          { required: true, message: '请输入原始密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        newpass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        newpasstrue: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          },
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      indexloading: false,
      pur_id: '',
      icon: {
        1: 'iconfont icon-minggaoshouye',
        4: 'iconfont icon-xietongzhihuidaping',
        10: 'iconfont icon-didian',
        20: 'iconfont icon-gongzuoguanli-dingdanguanli',
        22: 'iconfont icon-database-full',
        25: 'iconfont icon-shezhi1',
        45: 'iconfont icon-yujing1'
      },
      QRtf: false,
      app_url: '',
      menunoneele: true,
      warntf: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    '$route.path': function(newVal) {
      console.log(newVal);
      if (
        newVal == '/index/facilitydistribute' ||
        newVal == '/index/pestdistribute'
      ) {
        console.log('触发');
        this.menunone();
      }
      this.routemap(this.routerdata);
      // this.menuActiveId = this.$route.path;
    }
  },
  //方法集合
  methods: {
    handleOpen(e) {
      console.log(e);
      // localStorage.setItem("menuActiveId", e);
    },
    handleClose() {},
    // user.login.user_login_info
    getuserinfo() {
      this.indexloading = true;
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=sysmenage.usermanager.user_info'
      }).then(res => {
        // 测试代码 ---- start
        // res = { data: testData };
        // --- end
        this.indexloading = false;
        this.app_url = res.data.data.app_url;
        this.imgurl = res.data.data.theme_info.logo_url;
        this.headline = res.data.data.theme_info.sys_name;
        this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
        var titleList = [];
        res.data.data.children.forEach(item => {
          if (item.purview_name !== 'APP' && item.pur_id != 62) {
            titleList.push(item);
          }
        });
        this.hasNewHome = res.data.data.children.some(item => {
          return item.pur_id == 62
        })
        // this.infodata = res.data.data.children;
        this.infodata = titleList;
        console.log(
          this.routerdata,
          this.infodata,
          '-------------------------- get'
        );
        // this.infodata.shift();
        localStorage.setItem('userID', res.data.data.im_user_id); // 存储当前登录账号的ID
        this.username = res.data.data.username;
        localStorage.setItem('username', this.username);
        this.routemap(this.routerdata);
      });
    },
    quit(e) {
      // user.login.logout_user
      console.log(e);
      if (e == 'a') {
        this.alterpassTF = true;
      } else if (e == 'b') {
        this.outsystem();
      }
    },
    outsystem() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=sysmenage.usermanager.user_logout'
      }).then(res => {
        if (res.data.data) {
          localStorage.removeItem('session');
          // localStorage.removeItem("username");
          this.$router.push('/Login');
        }
      });
    },
    skip(path) {
      // console.log(this.$route);ssssss
      if (this.$route.path != path) {
        this.$router.push(path);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios({
            method: 'POST',
            url: '/api/api_gateway?method=app.my.app_change_pwd',
            data: this.qs.stringify({
              old_password: this.ruleForm.oldpass, //                必传      旧密码
              new_password: this.ruleForm.newpass, //                必传      新密码
              confirm_password: this.ruleForm.newpasstrue //            必传      再次确认新密码
            })
          }).then(res => {
            if (res.data.data) {
              this.alterpassTF = false;
              if (document.getElementsByClassName('el-message').length == 0) {
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
              }
              this.outsystem();
            } else {
              if (document.getElementsByClassName('el-message').length == 0) {
                this.$message({
                  message: '修改失败！' + res.data.data.message,
                  type: 'error'
                });
              }
            }
          });
        } else {
          if (document.getElementsByClassName('el-message').length == 0) {
            this.$message({
              message: '请完成信息填写！',
              type: 'warning'
            });
          }
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.alterpassTF = false;
    },
    QRcode() {
      this.QRtf = true;
      this.$nextTick(() => {
        console.log(this.$deriveData + this.app_url);
        if (!this.$refs.qrCodeUrl.firstChild) {
          new QRCode(this.$refs.qrCodeUrl, {
            text: this.$deriveData + this.app_url, // 需要转换为二维码的内容
            // text: "http://114.115.147.140:12345"+this.app_url,
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          });
        }
      });
    },
    routemap(routerdata) {
      var newrouter = this.$route.path;
      const pathList = newrouter.split('/').filter(item => !!item);
      // console.log(routerdata, 'route map', newrouter, pathList);
      var tf = routerdata.filter(item => {
        if (item.menu != '') {
          if (pathList.includes(item.menu)) {
            // 第一层菜单是否包含当前路由
            // var arr = [item.menu,item.pur_id]
            // console.log(item.pur_id)
            // return arr
            // var a = '111111111'
            return [item.menu, item.pur_id];
          } else {
            if (item.children) {
              this.routemap(item.children);
            }
          }
        } else {
          if (item.children) {
            this.routemap(item.children);
          }
        }
      });
      // console.log(tf, 'route map -----');
      if (tf.length != 0) {
        // console.log(tf);
        // this.menuActiveId = tf[0].pur_id.toString();
        this.routerinfo = [];
        this.routerinfo.unshift(tf[0]);
        var newpath = this.routerdata.filter(item => {
          // console.log(item)
          if (item.pur_id == tf[0].parent_perm_id) {
            return item.pur_id == tf[0].parent_perm_id;
          } else {
            var newpath2 = item.children.filter(items => {
              if (items.pur_id == tf[0].parent_perm_id) {
                return items.pur_id == tf[0].parent_perm_id;
              } else {
                if (items.children) {
                  var newpath3 = items.children.filter(itemsa => {
                    // console.log(itemsa.pur_id,tf[0].parent_perm_id)
                    if (itemsa.pur_id == tf[0].parent_perm_id) {
                      return itemsa.pur_id == tf[0].parent_perm_id;
                    } else {
                      // console.log(itemsa)
                      if (itemsa.children) {
                        var newpath4 = itemsa.children.filter(itemsaa => {
                          if (itemsaa.pur_id == tf[0].parent_perm_id) {
                            return itemsaa.pur_id == tf[0].parent_perm_id;
                          } else {
                          }
                        });
                        console.log(newpath4);
                        if (newpath4.length != 0) {
                          this.routerinfo.unshift(newpath4[0]);
                          return newpath4;
                        }
                      }
                    }
                  });
                  if (newpath3.length != 0) {
                    this.routerinfo.unshift(newpath3[0]);
                    return newpath3;
                  }
                }
              }
              // return items.pur_id == tf[0].parent_perm_id;
            });
            if (newpath2.length != 0) {
              this.routerinfo.unshift(newpath2[0]);
              return newpath2;
            }
          }
        });
        // console.log(newpath)
        this.routerinfo.unshift(newpath[0]);
        // console.log(this.routerinfo);
      } else {
        // console.log(this.routerinfo, 'home');
        var obj = {
          menu: '',
          parent_perm_id: '88',
          pur_id: '88',
          purview_name: '查看详情'
        };
        if (this.routerinfo[1] && !this.routerinfo[2]) {
          if (this.$route.path == '/index/taskRegulatorDetails') {
            this.routerinfo.push(obj);
          } else if (this.$route.path == '/index/superviseAdminDetails') {
            this.routerinfo.push(obj);
          } else if (this.$route.path == '/index/superviseDetails') {
            this.routerinfo.push(obj);
          } else if (this.$route.path == '/index/superviseLogDetails') {
            this.routerinfo.push(obj);
          }
        } else if (
          this.routerinfo.length === 3 &&
          this.$route.path === '/index/fillinrecord'
        ) {
          this.routerinfo.push({
            menu: '',
            purview_name: '填报记录'
          });
        }
      }
    },
    menunone() {
      this.menunoneele = !this.menunoneele;
    },
    towarn() {
      this.$router.push('/index/warningrecord');
    },
    getwarnnum() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=alert_manage.alert.alert_unread_num',
        data: this.qs.stringify({})
      })
        .then(res => {
          console.log(res);
          if (res.data.data.unread_num > 0) {
            this.warntf = true;
          } else {
            this.warntf = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.menuActiveId = localStorage.getItem("menuActiveId");
    this.getuserinfo();

    // console.log(this.$route.path)
    if (
      this.$route.path == '/Index/facilitydistribute' ||
      this.$route.path == '/Index/pestdistribute'
    ) {
      // console.log("触发")
      this.menunone();
    }
    this.getwarnnum();
    // this.menunone()
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
p {
  margin: 0;
}
.indexbox {
  // display: flex;
}
.index_out_info {
  position: relative;
  margin-right: 15px;
  i {
    font-size: 18px;
  }
  .dian {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: rgb(249, 63, 61);
    position: absolute;
    top: 20px;
    right: 0;
  }
}
.menubox {
  width: 100%;
  display: flex;
  height: 62px;
  line-height: 62px;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 3px -1px rgb(224, 219, 219); //底部阴影
  .index_title {
    display: flex;
    .menubox_logo_img {
      width: 40px;
      height: 40px;
      margin: 11px;
    }
    p {
      font-size: 18px;
      font-weight: 700;
    }
  }
}
.contentbox {
  // width: calc(100% - 240px);
  display: flex;
  .menubox_item {
    background-color: #0d3756;
    // overflow-x: visible;
    // width: 226px;
    // display: none;
    position: relative;
    transition: width 1s ease;
    .elmenubox {
      width: 100%;
      overflow-y: auto;
      height: calc(100vh - 62px);
    }
    .operationbox {
      width: 16px;
      height: 128px;
      position: absolute;
      top: 50%;
      margin-top: -64px;
      z-index: 1999;
      transition: all 1s ease;
    }
    /deep/.el-menu {
      border: 0;
    }
    /deep/.el-menu-vertical-demo {
      width: 220px;
    }
    /deep/.el-submenu__title {
      text-align: left;
      // padding-left: 67px !important;
    }
    /deep/.el-menu--inline {
      .el-submenu__title {
        text-align: left;
        padding-left: 67px !important;
      }
      .el-menu-item {
        padding-left: 80px !important;
      }
    }
    /deep/.el-submenu__title:hover {
      color: rgb(64, 158, 255) !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.is-opened > .el-submenu__title {
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.is-active {
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.el-menu-item {
      text-align: left;
      // background-color: rgba(0, 0, 0, 0.3) !important;
    }
    /deep/.el-menu-item:hover {
      color: rgb(64, 158, 255) !important;
    }
    /deep/.el-menu--inline > .el-menu-item2 {
      padding-left: 67px !important;
      background-color: transparent !important;
    }
    /deep/.el-menu-item-group__title {
      display: none;
    }
    /deep/.el-icon-arrow-down:before {
      content: '\E6DF';
      color: #fff;
      font-size: 16px;
    }
    .firstmenu {
      text-align: left;
      padding-left: 20px !important;
    }
  }
  /*滚动条样式*/
  ::-webkit-scrollbar {
    width: 6px;
    // margin-left: -1px;
    /*height: 4px;*/
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    // border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  .contentbox_right {
    // width: calc(100% - 226px);
    // width: 100%;
    margin: 10px auto 0;
    transition: width 1s ease;
    .contentbox_crumbs {
      width: 98%;
      margin: 0;
      /deep/.el-breadcrumb {
        margin: 0 0 0 20px;
        padding: 0 !important;
        background-color: transparent !important;
        font-size: 14px !important;
      }
    }
    .contentbox_box {
      width: 98%;
      height: calc(100vh - 100px);
      // background-color: chartreuse;
      margin: 15px auto 0;
      overflow-y: auto;
    }
  }
}
/deep/.qrcode {
  img {
    margin: 0 auto;
  }
}
</style>