|
|
@@ -9,9 +9,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- 用户 -->
|
|
|
- <div class="userinfo">
|
|
|
- 欢迎您,{{ username }}
|
|
|
- </div>
|
|
|
+ <div class="userinfo">欢迎您,{{ username }}</div>
|
|
|
<!-- 标题 -->
|
|
|
<div class="sysName">
|
|
|
<h2 v-if="userinfo.user_header">{{ userinfo.user_header }}</h2>
|
|
|
@@ -27,19 +25,73 @@
|
|
|
<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">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- <ul class="header_ul" style="margin: -55px 85px 0 0">
|
|
|
+ <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> -->
|
|
|
</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="200px">
|
|
|
+ <!-- 选中站点标题 -->
|
|
|
+ <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="rgb(0, 0, 0)"
|
|
|
>
|
|
|
<el-menu-item index="/index/monitor">
|
|
|
@@ -55,14 +107,86 @@
|
|
|
<span slot="title">用户管理</span>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
+
|
|
|
+ <div 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: 13px; height: 13px; margin: 3px 3px 0 0"
|
|
|
+ src="../assets/images/zhankai.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div style="font-weight: 550; font-size: 14px; margin: 0px 0px 0px 4px;">站点管理</div>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ style="
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ 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
|
|
|
+ :data="data"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ @node-contextmenu="rightClick"
|
|
|
+ ></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></router-view>
|
|
|
+ <router-view ref="mychild"></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 {
|
|
|
@@ -77,11 +201,95 @@ export default {
|
|
|
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",
|
|
|
+ },
|
|
|
+
|
|
|
+ menuVisible: false,
|
|
|
+ operateObj: {}, // 右键点击时获取当前的数据信息
|
|
|
+
|
|
|
+ siteNameTitle: '全 部',
|
|
|
+ req: '', // 站点列表是否显示有无设备的站点
|
|
|
+ equip_type: '' //选中的设备类型
|
|
|
};
|
|
|
},
|
|
|
created: function () {
|
|
|
this.getuserinfo();
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ 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: {
|
|
|
hCheckFun() {
|
|
|
this.flag = !this.flag;
|
|
|
@@ -104,6 +312,212 @@ export default {
|
|
|
localStorage.setItem("staff", this.userinfo.staff); // 1是admin
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ console.log(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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取站点名称列表
|
|
|
+ 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;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 树形插件右键点击事件
|
|
|
+ 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,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取到当前点击菜单的数据
|
|
|
+ handleOpen(key, keyPath) {
|
|
|
+ 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 {
|
|
|
+ this.req = ''
|
|
|
+ this.equip_type = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击获取全部站点名称列表
|
|
|
+ allSiteListData() {
|
|
|
+ this.req = ''
|
|
|
+ this.equip_type = ''
|
|
|
+ this.siteListData()
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -113,7 +527,7 @@ export default {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 177px !important;
|
|
|
- border-bottom: 2px solid #272b3a;
|
|
|
+ // border-bottom: 2px solid #272b3a;
|
|
|
background: #397b0c no-repeat center / 100% 100%
|
|
|
url(../assets/images/monitor/h_bg.jpg);
|
|
|
.userinfo {
|
|
|
@@ -172,8 +586,8 @@ export default {
|
|
|
}
|
|
|
.site {
|
|
|
position: absolute;
|
|
|
- right: 90px;
|
|
|
- bottom: 10px;
|
|
|
+ right: 8px;
|
|
|
+ top: 33px;
|
|
|
z-index: 888;
|
|
|
font-size: 14px;
|
|
|
color: #ffffff;
|
|
|
@@ -196,7 +610,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.el-aside {
|
|
|
- background: #f0f0f0;
|
|
|
+ // background: #f0f0f0;
|
|
|
+ background: #fff;
|
|
|
i {
|
|
|
color: #000;
|
|
|
}
|
|
|
@@ -221,4 +636,43 @@ export default {
|
|
|
.el-main {
|
|
|
padding: 0;
|
|
|
}
|
|
|
+
|
|
|
+// 新改
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+// 右键信息
|
|
|
+#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>
|