|
|
@@ -1,61 +1,202 @@
|
|
|
<template>
|
|
|
- <div class="container-bg">
|
|
|
- <el-container class="main-layout">
|
|
|
- <el-aside class="left-plate"><tree-list /></el-aside>
|
|
|
- <el-container class="right-plate">
|
|
|
- <el-header class="main-top">Header</el-header>
|
|
|
- <el-main class="main-cont">Main</el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- <!-- 测试弹窗 注释掉即可隐藏弹窗 -->
|
|
|
- <BulletBox :windowWidth="'150rem'" :windowHeight="'72rem'"></BulletBox>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ home
|
|
|
+ <button @click="detailsModal = true">测试打开模态框</button>
|
|
|
+ <!-- 详细信息 -->
|
|
|
+ <div>
|
|
|
+ <el-dialog :visible.sync="detailsModal" width="98%" top="1vh" :height="ceshi">
|
|
|
+ <div class="detailsTittle">
|
|
|
+ <span>xxx-详细信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="inDetailsBox">
|
|
|
+ <div class="inBoxLeft">
|
|
|
+ <el-input style="width: 300px;margin-top: 10px;" v-model="searchFast" placeholder="快速查找"></el-input>
|
|
|
+ <template v-for="(item, index) in modelLeftList">
|
|
|
+ <div class="leftMes" @click="insideBox(item)">
|
|
|
+ <span class="leftMesSpan">{{ item.ied_name }}</span>
|
|
|
+ <span>{{ item.desc }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="inBoxRight">
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <div class="navigationBox">
|
|
|
+ <template v-for="(item, index) in modalList">
|
|
|
+ <p :class="['tabCard', { active: selectedIndex === index }]" @click="goUrl(item, index)">
|
|
|
+ {{ item.name }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="detailsModal = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="detailsModal = false">确 定</el-button>
|
|
|
+ </span> -->
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {basicAreaList } from '@/api/dashboard'
|
|
|
-import BulletBox from "@/components/bulletBox/index.vue"
|
|
|
-import TreeList from '@/components/tree-list.vue'
|
|
|
+import { getscdlist,getiedmse } from "@/api/ied/ied"
|
|
|
+import { forGround } from "@/api/basic/basic"
|
|
|
export default {
|
|
|
- components: { TreeList, BulletBox},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- treeData:[
|
|
|
- {
|
|
|
- apmac: "",area_code: "pstype01/882",area_kind_cod: "154",area_level: "206",area_name: "安宁站",area_sort: "0",area_type: "pstype01",
|
|
|
- cr: "1",ct: "2023-06-19 13:51:38",id: "882",is_leaf: "0",jd: "0.0000000000000",live_num: "0",pi: "0",type_name: "变电站",wd: "0.0000000000000"
|
|
|
+ name: 'ScdProjectIndex',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detailsModal: false,
|
|
|
+ searchFast: "",//详情模态框内快速搜索
|
|
|
+ modalList: [
|
|
|
+ {
|
|
|
+ name: "装置关联关系",
|
|
|
+ url: "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "输入输出控制块",
|
|
|
+ url: "2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "虚端子关系",
|
|
|
+ url: "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "基础信息",
|
|
|
+ url: "4",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "定值条目",
|
|
|
+ url: "5"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息点表",
|
|
|
+ url: "6"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "源文件",
|
|
|
+ url: '7'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectedIndex: 0,//选中的背景
|
|
|
+ ceshi: "500px",
|
|
|
+ modelLeftList: [],//模态框内列表
|
|
|
+ stationCid:"",
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.forMesTo()
|
|
|
+ this.getAllIedLink()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goUrl(item, index) {
|
|
|
+ this.selectedIndex = index;
|
|
|
+ // 执行你的跳转逻辑
|
|
|
},
|
|
|
- {
|
|
|
- apmac: "",area_code: "pstype01/888",area_kind_cod: "156",area_level: "152",area_name: "高丰变",area_sort: "0",area_type: "pstype01",
|
|
|
- cr: "1",ct: "2023-06-19 13:51:38",id: "888",is_leaf: "0",jd: "0.0000000000000",live_num: "0",pi: "0",type_name: "变电站",wd: "0.0000000000000"
|
|
|
+ // 拿到首页左侧站点
|
|
|
+ async forMesTo() {
|
|
|
+ let res = await forGround({ pid: "0" })
|
|
|
+ this.modelLeftList = res.data
|
|
|
},
|
|
|
-
|
|
|
- {
|
|
|
- apmac: "",area_code: "pstype01/889",area_kind_cod: "156",area_level: "153",area_name: "海田变",area_sort: "0",area_type: "pstype01",
|
|
|
- cr: "1",ct: "2023-06-19 13:51:38",id: "889",is_leaf: "0",jd: "0.0000000000000",live_num: "0",pi: "0",type_name: "变电站",wd: "0.0000000000000"
|
|
|
+ // 根据站点id拿到站点信息
|
|
|
+ async getAllIedLink() {
|
|
|
+ let res = await getscdlist({ischeckinscd:'1',stationid:"888",pageno:"1"})
|
|
|
+ this.stationCid = res.data[0].id
|
|
|
+ this.getIdBy()
|
|
|
},
|
|
|
- {
|
|
|
- apmac: "",area_code: "pstype01/891",area_kind_cod: "154",area_level: "206",area_name: "红房变",area_sort: "0",area_type: "pstype01",
|
|
|
- cr: "1",ct: "2023-06-19 13:51:38",id: "890",is_leaf: "0",jd: "0.0000000000000",live_num: "0",pi: "0",type_name: "变电站",wd: "0.0000000000000"
|
|
|
+ // 根据站点id拿到站点下列表
|
|
|
+ async getIdBy(){
|
|
|
+ let res = await getiedmse({scd_id:this.stationCid})
|
|
|
+ this.modelLeftList = res.data
|
|
|
},
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {},
|
|
|
- created(){
|
|
|
- this.basicAreaList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async basicAreaList() {
|
|
|
- // const result = await basicAreaList({pid: 0,}).catch((err) => (console.log('err', err)))
|
|
|
- // if (!result) return
|
|
|
- // console.log('first', result)
|
|
|
+ // 切换盒子
|
|
|
+ insideBox(row){
|
|
|
+ console.log(row,'row');
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-@import "~@/styles/home.scss";
|
|
|
+<style scoped>
|
|
|
+/* 模态框内左侧盒子 */
|
|
|
+.inBoxLeft {
|
|
|
+ width: 320px;
|
|
|
+ height: 530px;
|
|
|
+ background-color: #F3F5FA;
|
|
|
+ text-align: center;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.inDetailsBox {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+/* 模态框内表头 */
|
|
|
+.detailsTittle {
|
|
|
+ width: 1400px;
|
|
|
+ height: 50px;
|
|
|
+ border-bottom: 1px solid blue;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 名称和信息 */
|
|
|
+.leftMes {
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.leftMes span {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.leftMes span:nth-child(1){
|
|
|
+ width: 65px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.leftMes span:nth-child(2){
|
|
|
+ width: 220px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内导航栏 */
|
|
|
+.tabCard {
|
|
|
+ width: 100px;
|
|
|
+ height: 25px;
|
|
|
+ margin: 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.tabCard:hover {
|
|
|
+ color: skyblue;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ width: 100px;
|
|
|
+ height: 25px;
|
|
|
+ background-color: blue;
|
|
|
+ color: white;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 内导航栏盒子 */
|
|
|
+.navigationBox {
|
|
|
+ width: 850px;
|
|
|
+ height: 30px;
|
|
|
+ border: 1px solid blue;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|