RT_MQ_2.0/src/components/Index.vue

<template>
  <el-container class="container" style="height: 100%">
    <el-header class="header">
      <img class="RTlogo" src="../assets/images/RTlogo.png" />
      <!-- <div v-if="userinfo.logo">
        <img
          :src="userinfo.logo"
          alt=""
          style="position: absolute; left: 20px; top: 20px; width: 250px"
        />
      </div> -->
      <!-- 用户 -->
      <div class="userinfo">欢迎您，{{ username }}</div>
      <!-- 标题 -->
      <div class="sysName">
        <h2 v-if="userinfo.user_header">{{ userinfo.user_header }}</h2>
        <h2 v-else>苗情监测应用系统</h2>
        <p style="font-size: 12px;letter-spacing: 0px;">Plants Growth Status Monitoring System</p>
      </div>
      <div class="site" v-if="userinfo.site">
        <i class="iconfont icon-jidi" style="color: white;font-size: 26px;"></i>
        <span style="letter-spacing: 1px;font-size: 22px;">{{ userinfo.site }}</span>
      </div>
      <span class="header_btn" @click="toggle">{{flag?'隐藏':'展开'}}</span>
    </el-header>
    <!-- <el-header class="header2" v-show="!flag">
      <h3 v-if="userinfo.user_header">{{ userinfo.user_header }}</h3>
      <h3 v-else>苗情监测应用系统</h3>
      <div class="site" v-if="userinfo.site && flag">
        <i class="iconfont icon-jidi"></i>
        <span>{{ userinfo.site }}</span>
      </div>
      <span class="header_btn" @click="hCheckFun">[展开]</span>
    </el-header> -->

    <!-- <div style="background: #397b0c" v-show="flag">
      <ul class="header_ul">
        <li
          style="padding: 15px 20px 15px 20px; color: #fff; cursor: pointer"
          @click="headerTitle(index)"
          :class="{ indexActive: tltIndex == index }"
          v-for="(item, index) in menuList1"
          :key="index"
        >
          {{ item.purview_name }}
        </li>
      </ul>
    </div> -->
    <el-container style="overflow: auto">
      <el-aside width="250px">
        <!-- 选中站点标题 -->
        <!-- <div
          style="
            background: #397b0c;
            line-height: 46px;
            height: 46px;
            color: #fff;
          "
        >
          <img
            style="
              width: 12px;
              height: 16px;
              margin: -3.5px 0 0 12.5%;
              vertical-align: middle;
              cursor: pointer;
            "
            src="../assets/images/dingwei.png"
            title="点击获取全部站点名称列表"
            @click="allSiteListData()"
            alt=""
          />
          <span style="font-size: 13px; margin: 0 0 0 -0.5px">{{
            siteNameTitle
          }}</span>
        </div> -->

        <el-menu
          :default-active="$route.path"
          :collapse-transition="false"
          class="el-menu-vertical-demo"
          :router="isRouter"
          @select="handleOpen"
          active-text-color="#fff"
          style="padding-top: 20px;background-color: initial;width: 100%;"
        >
          <el-menu-item index="/index/monitor">
            <i :class="iconObj[20]"></i>
            <span slot="title">苗情监测应用系统</span>
          </el-menu-item>
          <el-menu-item index="/index/list">
            <i :class="iconObj[22]"></i>
            <span slot="title">设备列表</span>
          </el-menu-item>
          <el-menu-item index="/index/userManger">
            <i :class="iconObj[23]"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>

        <div v-if="isTree" style="margin: 13px 0 0 0; width: 95%">
          <ul>
            <li style="display: flex; justify-content: space-between">
              <div style="display: flex; margin: 0 0 0 5px">
                <img
                style="width: 20px; height: 20px; margin: 4px 3px 0 0"
                  src="../assets/images/zhankai.png"
                  alt=""
                />
                <div
                  style="
                    font-weight: 550;
                    font-size: 20px;
                    color: white;
                    margin: 0px 0px 0px 4px;
                  "
                >
                  站点管理
                </div>
              </div>
              <img
                style="
									width: 22px;
									height: 22px;
									margin: 3px 0 0 0;
									cursor: pointer;
								"
                src="../assets/images/tianjia.png"
                alt=""
                @click="addStation"
                v-if="userinfo.staff == '1'"
              />
            </li>
            <li id="tree">
              <el-tree
                ref="treeRef"
                :data="data"
                :props="defaultProps"
                node-key="id"
                :current-node-key="firstItem"
                :default-expand-all="true"
                @node-click="handleNodeClick"
                @node-contextmenu="rightClick"
                highlight-current
                style="background-color: transparent;color: rgba(255, 255, 255, 0.5);"
              ></el-tree>
            </li>
          </ul>
        </div>
      </el-aside>

      <!-- 右键信息 -->
      <div v-show="menuVisible">
        <ul id="menuList" class="menu">
          <li class="menu_item" @click="addrInformation()">增加</li>
        </ul>
      </div>
      <el-main>
        <router-view ref="mychild" :siteId="firstItem" :flag="dataObj"></router-view>
      </el-main>
    </el-container>

    <!-- 添加站点 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="新增站点"
      :visible.sync="addSite"
      width="25%"
    >
      <ul>
        <li style="margin: 10px 0 0 0">
          <span>站点名称：</span>
          <el-input style="width: 49%" v-model="siteName"></el-input>
        </li>
        <li style="margin: 10px 0 0 0">
          <span>站点地址：</span>
          <el-cascader
            clearable
            v-model="siteAddr"
            :options="options"
          ></el-cascader>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addSite = false">取 消</el-button>
        <el-button type="primary" @click="addrData()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import city from "../components/citydata.js";
export default {
  data() {
    return {
      isTree:true,
      firstItem: "",
      firstShow: true,
      isRouter: true,
      iconObj: {
        20: "iconfont icon-jiankong",
        22: "iconfont icon-shebei",
        23: "iconfont icon-xitong",
      },
      flag: true,
      active: 1,
      userinfo: {},
      username: "",
      userphoto: "",

      // 站点
      menuList1: [
        {
          purview_name: "苗情监测应用系统",
          menu: "monitor",
          parent_perm_id: 1,
          pur_id: 1,
        },
        {
          purview_name: "设备列表",
          menu: "list",
          parent_perm_id: 2,
          pur_id: 2,
        },
        {
          purview_name: "用户管理",
          menu: "userManger",
          parent_perm_id: 3,
          pur_id: 3,
        },
      ],
      tltIndex: 0,
      siteName: "", // 站点名称
      siteAddr: [], // 站点地址
      options: [],
      addSite: false,
      data: [], // 树形插件数据
      defaultProps: {
        children: "children",
        label: "label",
      },
      dataObj: {
        flag: true,
        siteID: null,
        allList: [],
        cid :null,
        siteNameTitle:this.siteNameTitle
      },

      menuVisible: false,
      operateObj: {}, // 右键点击时获取当前的数据信息

      siteNameTitle: "全 部",
      req: "", // 站点列表是否显示有无设备的站点
      equip_type: "", //选中的设备类型
    };
  },
  created: function () {
    this.getuserinfo();
  },
  mounted() {
    document.querySelector('.header').style.height = '250px'

		// this.$nextTick(()=>{
			document.querySelector('.header').style.transition = '.4s'
		// })
    this.siteListData();
    if (sessionStorage.getItem("tltIndex")) {
      this.tltIndex = sessionStorage.getItem("tltIndex");
    }
    this.options = city;

    var url = this.$route.path;
    url = url.split("/index", 2);
    // 获取当前点击的设备类型
    if (url[1] == "/monitor") {
      // 性诱测报
      this.req = "hide";
      this.equip_type = "6";
    } else {
      this.req = "";
      this.equip_type = "";
    }
  },
  watch: {
    addSite(val) {
      if (val == false) {
        this.siteName = "";
        this.siteAddr = [];
        this.operateObj = {};
      }
      // else if (val == true) {
      // 	if (this.operateObj.label) {
      // 		console.log(this.operateObj)

      // 	} else {
      // 	}
      // }
    },
    // 监听路由变化，如果变化就将展示选中的站点名称归零为全部
    $route(to, from) {
      this.siteNameTitle = "全 部";
    },

    equip_type(val) {
      console.log(val);
      this.siteListData();
    },
  },
  methods: {
    toggle(){
			this.flag = !this.flag
			if(!this.flag){
				document.querySelector('.header').style.height = '140px'
				this.dataObj.flag = this.flag
			} else{
				document.querySelector('.header').style.height = '250px'
				setTimeout(()=>{
					this.dataObj.flag = this.flag
				},400)
			}
			
			
		},
    hCheckFun() {
      this.flag = !this.flag;
    },
    getuserinfo() {
      this.$axios({
        method: "post",
        url: "userinfo_",
      }).then((res) => {
        this.username = res.data.username;
        this.userphoto = res.data.userphoto;
        localStorage.setItem("username", res.data.username); // 0管理员  1用户
      });
      this.$axios({
        method: "get",
        url: "user_detail",
      }).then((res) => {
        this.userinfo = res.data;
        localStorage.setItem("have_type", this.userinfo.have_type); // 0管理员  1用户
        localStorage.setItem("staff", this.userinfo.staff); // 1是admin
        localStorage.setItem('site_id', this.userinfo.site_id) // 站点id
				localStorage.setItem('siteName', this.userinfo.site) // 站点name
      });
    },

    headerTitle(i) {
      this.tltIndex = i;
      console.log(i);
      sessionStorage.setItem("tltIndex", i);
      this.$router.push("/index/" + this.menuList1[i].menu);
    },

    // 添加新站点
    addStation() {
      this.addSite = true;
    },

    // 树形插件
    handleNodeClick(data) {
      // this.operateObj = data
      // this.$refs.mychild.getEquipList(data, 1)

      var url = this.$route.path;
      this.siteNameTitle = data.label;
      url = url.split("/index/", 2);
      console.log(url);
      if (url[1] == "monitor") {
        this.$refs.mychild.getJkList(data, 1);
      } else {
        this.$refs.mychild.getList(data, 1);
      }
      this.dataObj.siteNameTitle = data.label
    },

    // 获取站点名称列表
    siteListData() {
      this.$axios({
        method: "GET",
        url: "site_manage",
        params: {
          req: this.req,
          equip_type: this.equip_type,
          jk_type: "1",
        },
      })
        .then((res) => {
          if (res.data) {
            var data = res.data;
            console.log("数据数据", this.firstItem, res.data);
            var arrList = [];
            var list = data.forEach((item) => {
              if (
                item.self_site_name !== undefined &&
                item.self_site_name == ""
              ) {
              } else {
                if (item.self_site_name == undefined) {
                  if (item.child) {
                    var obj = {};
                    var a = [];
                    obj["label"] = item.site_name;
                    obj["id"] = item.site_id;
                    for (var j in item.child) {
                      var obja = {};
                      obja["label"] = item.child[j].site_name;
                      obja["id"] = item.child[j].site_id;
                      if (
                        item.child[j].child &&
                        item.child[j].child.length == 0
                      ) {
                        obja["children"] = item.child[j].child;
                      } else if (
                        item.child[j].child &&
                        item.child[j].child.length !== 0
                      ) {
                        for (var k in item.child[j].child) {
                          var objb = {};
                          objb["label"] = item.child[j].child[k].site_name;
                          objb["id"] = item.child[j].child[k].site_id;
                        }
                        obja["children"] = [objb];
                      }
                      a.push(obja);
                      obj["children"] = a;
                    }
                  }
                  arrList.push(obj);
                } else if (item.self_site_name !== undefined) {
                }
              }
            });
            this.data = arrList;
            console.log(arrList);
            // 默认选中第一个站点
            // this.siteNameTitle = data[0].child[0].site_name;
            // this.firstItem = data[0].child[0].site_id;
            if(localStorage.getItem('siteName')=='超级管理员'){
							this.siteNameTitle = "瑞通集团总站"
						}else{
							this.siteNameTitle = localStorage.getItem('siteName');
						}
            if(localStorage.getItem('site_id')=="0"){
	              this.firstItem = ""
            }else{
              this.firstItem = localStorage.getItem('site_id');
            }
            let data = {};
						this.treeIterator(arrList,res => {
							if(res.id==this.firstItem){
								data = res
							}
						})
            this.$nextTick(() => {
              this.$refs.treeRef.setCurrentKey(this.firstItem);
              // const childrenItem = arrList[0].children[0];
              const childrenItem = data;
              if (this.firstShow) {
                this.handleNodeClick(childrenItem);
                this.firstShow = false;
              }
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    treeIterator(tree, func) {
			let node, curTree = [...tree]
			while ((node = curTree.shift())) {
			func(node)
			node.children && curTree.push(...node.children)
			}
		},
    // 树形插件右键点击事件
    rightClick(MouseEvent, object, Node, element) {
      console.log(object);
      this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector("#menuList");
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      menu.style.display = "block";
      menu.style.left = MouseEvent.clientX - 0 + "px";
      menu.style.top = MouseEvent.clientY - 0 + "px";
      this.operateObj = object;
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    // 指定新增
    addrInformation() {
      this.addSite = true;
    },

    addrData() {
      if (this.siteName == "") {
        this.$message({
          message: "未填写站点名称，请填写！",
          type: "warning",
          duration: 1500,
        });
      } else if (this.siteAddr.length == 0) {
        this.$message({
          message: "未填写站点地址，请填写！",
          type: "warning",
          duration: 1500,
        });
      } else {
        if (this.siteAddr.length < 3) {
          var sheng = "";
          var shi = this.siteAddr[0];
          var xian = this.siteAddr[1];
        } else {
          var sheng = this.siteAddr[0];
          var shi = this.siteAddr[1];
          var xian = this.siteAddr[2];
        }
        var postData = this.qs.stringify({
          site_name: this.siteName, // 站点名称
          site_pro: sheng, // 省
          site_city: shi, // 市
          site_area: xian, // 县或区
          site_parent_id:
            this.operateObj.id !== undefined ? this.operateObj.id : "", // id
        });
        this.$axios({
          method: "POST",
          url: "/site_manage",
          data: postData,
        })
          .then((res) => {
            console.log(res.data);
            if (res.data.status == 0) {
              this.$message({
                message: res.data.msg,
                type: "success",
                duration: 1500,
              });
              this.addSite = false;
              this.siteListData();
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              message: "添加失败请重试！",
              type: "error",
              duration: 1500,
            });
          });
      }
    },

    // 获取到当前点击菜单的数据userManger
    handleOpen(key, keyPath) {
        this.isTree = true;
      var data = key;
      var typeIndex = data.split("/index/");
      if (typeIndex[1] == "monitor") {
        // 性诱测报
        // this.req = 'hide'
        // this.equip_type = '4'

        // 苗情
        this.req = "hide";
        this.equip_type = "6";
      } else if(typeIndex[1]=='userManger'){
        this.isTree = false;
      }
      else {
        this.req = "";
        this.equip_type = "";
      }
    },

    // 点击获取全部站点名称列表
    allSiteListData() {
      this.req = "";
      this.equip_type = "";
      this.siteListData();
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: relative;
  width: 100%;
  height: 250px;
  // border-bottom: 2px solid #272b3a;
  // background: #397b0c no-repeat center / 100% 100%
    // url(../assets/images/monitor/h_bg.jpg);
    .RTlogo{
      position: absolute;
      width: 90px;
      left: 190px;
      top: 30px;
    }
  .userinfo {
    color: #fff;
    font-size: 22px;
    text-align: right;
    margin-top: 10px;
    position: relative;
    top: 20px;
    .userheadImg {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 6px;
    }
  }
  .sysName {
    // font-size: 30px;
    color: #fff;
    text-align: left;
    margin-top: 7px;
    padding-left: 280px;
    font-size: 16px;
    letter-spacing: 0.5px;
    
    h2 {
      font-size: 30px;
      line-height: 46px;
      font-weight: 700;
      letter-spacing: 7px;
      margin: 0;
    }
    p {
      font-size: 14px;
    }
  }
  .logInfo {
    color: #fff;
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: auto;
      height: 40px;
    }
    h3 {
      margin: 0;
      margin-left: 20px;
    }
  }
}
.container{
	background: url(../assets/images/headBj.png) no-repeat center top;
	background-size: 100% 250px;
}
.header2 {
  border-bottom: 2px solid #397b0c;
  position: relative;
  background-color: #397b0c;
  color: #fff;
}
.site {
  position: absolute;
  right: 16px;
  top: 70px;
  z-index: 8;
  font-size: 14px;
  color: #ffffff;
  span {
    color: #fff;
    letter-spacing: 1px;
    font-size: 13px;
  }
}
.header_btn {
  position: absolute;
  color: #fff;
  font-size: 20px;
  right: 20px;
  bottom: 10px;
  // z-index: 999;
  cursor: pointer;
}
.header_btn:hover {
  color: #fff;
}

.el-aside {
  color: #333;
  background: url(../assets/images/asideBG.png) no-repeat center;
  background-size: cover;
  .el-menu{
    background: transparent;
  }
  .el-menu-item {
    color: rgba(255, 255, 255, 0.5);
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    .iconfont{
      // color: rgba(255, 255, 255, 0.5);
      color: inherit;
      font-size: 24px;
      position: relative;
      top: 1px;
      margin-right: 10px;
    }
  }
  .is-active {
    background: #409EFF;
    font-weight: bold;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    // color: #39f9be;
    background: #409EFF;
    i {
      // color: #39f9be;
      
    }
  }
  i {
    color: #000;
  }
  // .is-active {
  //   span {
  //     color: #fff;
  //   }
  //   background: #5aae22;
  //   i {
  //     color: #fff;
  //   }
  // }
  // .el-menu-item:focus,
  // .el-menu-item:hover {
  //   i {
  //     color: #fff;
  //   }
  //   color: #fff;
  //   background: #5aae22;
  // }
}

.el-aside::-webkit-scrollbar {/*滚动条整体样式*/
	width: 6px;
	/* height: 10px; */
}
/*滚动条轨道样式*/
.el-aside::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}
/*滚动条滑块样式*/
.el-aside::-webkit-scrollbar-thumb {
	background-color: #4983FB;
	border-radius: 5px;
}
/*滚动条按钮样式*/
.el-aside::-webkit-scrollbar-button {
	background-color: #4983FB;
}
/*滚动条角样式*/
.el-aside::-webkit-scrollbar-corner {
	background-color: #4983FB;
}
/*滚动条上下箭头样式*/
.el-aside::-webkit-scrollbar-arrow {
	background-color: #4983FB;
}
/*滚动条下拉按钮样式*/
.el-aside::-webkit-scrollbar-dropdown {
	background-color: #4983FB;
}
/*滚动条滑块被点击时的样式*/
.el-aside::-webkit-scrollbar-thumb:active {
	background-color: #4983FB;
}
/*滚动条滑块被hover时的样式*/
.el-aside::-webkit-scrollbar-thumb:hover {
	background-color: #4983FB;
}



.el-main {
  padding: 0;
}

/*滚动条整体样式*/
.el-main::-webkit-scrollbar {
	width: 6px;
	/* height: 10px; */
}
/*滚动条轨道样式*/
.el-main::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}
/*滚动条滑块样式*/
.el-main::-webkit-scrollbar-thumb {
	background-color: #4983FB;
	border-radius: 5px;
}
/*滚动条按钮样式*/
.el-main::-webkit-scrollbar-button {
	background-color: #4983FB;
}
/*滚动条角样式*/
.el-main::-webkit-scrollbar-corner {
	background-color: #4983FB;
}
/*滚动条上下箭头样式*/
.el-main::-webkit-scrollbar-arrow {
	background-color: #4983FB;
}
/*滚动条下拉按钮样式*/
.el-main::-webkit-scrollbar-dropdown {
	background-color: #4983FB;
}
/*滚动条滑块被点击时的样式*/
.el-main::-webkit-scrollbar-thumb:active {
	background-color: #4983FB;
}
/*滚动条滑块被hover时的样式*/
.el-main::-webkit-scrollbar-thumb:hover {
	background-color: #4983FB;
}

// 新改
.header_ul {
  display: flex;
  justify-content: flex-end;
  margin: 0 85px 0 0;
}

.indexActive {
  border-bottom: 2px solid #fff;
}

#tree {
  margin: 15px 0 0 0;
  div {
    background: #474e60;
  }
  /deep/.el-tree-node__content{
    background: transparent;
  }
  /deep/.is-current{
    color: white;
  }
}

// 右键信息
#menuList {
  height: 40px;
  width: 80px;
  position: absolute;
  border-radius: 10px;
  border: 1px solid #d8d6d6;
  background-color: #fff;
  z-index: 1;
  .menu_item {
    line-height: 20px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
  }
  li:hover {
    background-color: #14a478;
    color: white;
  }
  li {
    font-size: 15px;
  }
}
</style>