杆塔信息和线路信息
fanluyan
2 years ago
parent
2a79105436
commit
9c1152b86c
@ -1,43 +1,47 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
#app,
|
#app,
|
||||||
.wrapper {
|
.wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
font-family: "PingFang SC", "Helvetica Neue", Helvetica, "microsoft yahei",
|
||||||
|
arial, STHeiTi, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 表格样式*/
|
||||||
|
.el-table-column--selection .cell {
|
||||||
|
padding-left: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
/*滚动条样式*/
|
/*滚动条样式*/
|
||||||
/* 整个滚动条 */
|
/* 整个滚动条 */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 滚动条上的滚动滑块 */
|
/* 滚动条上的滚动滑块 */
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #49b1f5;
|
background-color: #49b1f5;
|
||||||
/* 关键代码 */
|
/* 关键代码 */
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 滚动条轨道 */
|
/* 滚动条轨道 */
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,153 +1,217 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="lineInformation">
|
<div class="lineInformation">
|
||||||
<div class="lineBtnGroup">
|
<div class="lineBtnGroup">
|
||||||
<el-button type="primary">新增</el-button>
|
<el-button type="primary" @click="handleAddLine()">新增</el-button>
|
||||||
<el-button type="primary">批量添加</el-button>
|
<el-button type="primary" @click="handleResive()">修改</el-button>
|
||||||
<el-button type="primary">修改</el-button>
|
<!-- <el-button type="primary">批量添加</el-button> -->
|
||||||
<el-button type="primary">修改公司</el-button>
|
<el-button type="primary" @click="handleDelete()">删除</el-button>
|
||||||
<el-button type="primary">删除</el-button>
|
|
||||||
<el-button type="primary">查询</el-button>
|
<!-- <el-button type="primary">查询</el-button> -->
|
||||||
<el-button type="primary">导入</el-button>
|
|
||||||
<el-button type="primary">导入模板下载</el-button>
|
|
||||||
<el-button type="primary">导出</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="searchForm">
|
|
||||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
||||||
<el-form-item label="单位:">
|
|
||||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
|
||||||
<el-option label="区域一" value="shanghai"></el-option>
|
|
||||||
<el-option label="区域二" value="beijing"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="DY等级:">
|
|
||||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
|
||||||
<el-option label="区域一" value="shanghai"></el-option>
|
|
||||||
<el-option label="区域二" value="beijing"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="XL名称:">
|
|
||||||
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否为采集">
|
|
||||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
|
||||||
<el-option label="区域一" value="shanghai"></el-option>
|
|
||||||
<el-option label="区域二" value="beijing"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="PMS编号:">
|
|
||||||
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="lineTable">
|
|
||||||
<el-table
|
|
||||||
ref="multipleTable"
|
|
||||||
:data="tableData"
|
|
||||||
tooltip-effect="dark"
|
|
||||||
style="width: 100%"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="index" width="55"> </el-table-column>
|
|
||||||
<el-table-column type="selection" width="55"> </el-table-column>
|
|
||||||
<el-table-column label="单位">
|
|
||||||
<template slot-scope="scope">{{ scope.row.date }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="name" label="XL名称"> </el-table-column>
|
|
||||||
<el-table-column prop="address" label="DY等级" show-overflow-tooltip> </el-table-column>
|
|
||||||
<el-table-column prop="name" label="起始GT"> </el-table-column>
|
|
||||||
<el-table-column prop="name" label="终止GT"> </el-table-column>
|
|
||||||
<el-table-column prop="name" label="PMS编号"> </el-table-column>
|
|
||||||
<el-table-column prop="name" label="备注"> </el-table-column>
|
|
||||||
<el-table-column prop="name" label="排序号"> </el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="searchForm">
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="单位:">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="DY等级:">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="XL名称:">
|
||||||
|
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否为采集">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="PMS编号:">
|
||||||
|
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div> -->
|
||||||
|
<div class="lineTable">
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="lineTableData"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
border
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column type="index" width="55"> </el-table-column>
|
||||||
|
<el-table-column type="selection" width="55"> </el-table-column>
|
||||||
|
<el-table-column label="单位" show-overflow-tooltip>
|
||||||
|
<template slot-scope="scope">{{ scope.row.bsManufacturer }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="id" label="线路id" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
label="XL名称"
|
||||||
|
min-width="95"
|
||||||
|
show-overflow-tooltip
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dyLevel" label="DY等级" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<!-- 新增线路 -->
|
||||||
|
<add-lineDialog
|
||||||
|
:lineDialog="lineDialog"
|
||||||
|
:lineDialogTitle="lineDialogTitle"
|
||||||
|
:formItem="formLineInfo"
|
||||||
|
@lineDialogClose="lineDialogClose"
|
||||||
|
></add-lineDialog>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import { getLineListJoggle, deleteLineJoggle } from "@/utils/api/index";
|
||||||
|
import addLineDialog from "./components/addLineDialog.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
components: {
|
||||||
return {
|
addLineDialog,
|
||||||
formInline: {
|
},
|
||||||
user: '',
|
data() {
|
||||||
region: ''
|
return {
|
||||||
},
|
formInline: {
|
||||||
tableData: [
|
user: "",
|
||||||
{
|
region: "",
|
||||||
date: '2016-05-03',
|
},
|
||||||
name: '王小虎',
|
lineDialogTitle: "", //弹窗标题
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
lineDialog: false,
|
||||||
},
|
formLineInfo: {}, //弹窗传值
|
||||||
{
|
lineTableData: [],
|
||||||
date: '2016-05-02',
|
multipleSelection: [], //获取当前选中
|
||||||
name: '王小虎',
|
//删除数组
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
deleteArr: [],
|
||||||
},
|
};
|
||||||
{
|
},
|
||||||
date: '2016-05-04',
|
methods: {
|
||||||
name: '王小虎',
|
//获取线路列表数据
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
lineList() {
|
||||||
},
|
getLineListJoggle()
|
||||||
{
|
.then((res) => {
|
||||||
date: '2016-05-01',
|
console.log(res);
|
||||||
name: '王小虎',
|
this.lineTableData = res.data.list;
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
})
|
||||||
},
|
.catch((err) => {
|
||||||
{
|
console.log(err); //代码错误、请求失败捕获
|
||||||
date: '2016-05-08',
|
});
|
||||||
name: '王小虎',
|
},
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
//点击行选中
|
||||||
},
|
handleRowClick(row, column, event) {
|
||||||
{
|
this.$refs.multipleTable.toggleRowSelection(row);
|
||||||
date: '2016-05-06',
|
// console.log(column, row, event);
|
||||||
name: '王小虎',
|
},
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
//获取选中的行
|
||||||
},
|
handleSelectionChange(val) {
|
||||||
{
|
this.multipleSelection = val;
|
||||||
date: '2016-05-07',
|
},
|
||||||
name: '王小虎',
|
|
||||||
address: '上海市普陀区金沙江路 1518 弄'
|
// 新建弹窗
|
||||||
}
|
handleAddLine() {
|
||||||
],
|
this.lineDialog = true;
|
||||||
multipleSelection: []
|
this.lineDialogTitle = "新增";
|
||||||
};
|
},
|
||||||
|
|
||||||
|
//handleResive 修改线路数据
|
||||||
|
handleResive() {
|
||||||
|
if (this.multipleSelection.length !== 1) {
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message: "请选择要操作的记录最多只能选择一条！",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log(this.multipleSelection);
|
||||||
|
this.lineDialogTitle = "修改";
|
||||||
|
this.formLineInfo = Object.assign({}, this.multipleSelection[0]);
|
||||||
|
this.lineDialog = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//新建弹窗取消按钮 关闭弹窗
|
||||||
|
lineDialogClose(flag) {
|
||||||
|
if (flag) {
|
||||||
|
//更新列表
|
||||||
|
this.lineList();
|
||||||
|
}
|
||||||
|
this.lineDialog = false;
|
||||||
},
|
},
|
||||||
methods: {
|
//删除数据
|
||||||
onSubmit() {
|
handleDelete() {
|
||||||
console.log('submit!');
|
if (this.multipleSelection.length == 0) {
|
||||||
},
|
this.$message({
|
||||||
toggleSelection(rows) {
|
showClose: true,
|
||||||
if (rows) {
|
message: "请选择要操作的记录！",
|
||||||
rows.forEach((row) => {
|
type: "warning",
|
||||||
this.$refs.multipleTable.toggleRowSelection(row);
|
});
|
||||||
});
|
} else {
|
||||||
} else {
|
console.log(this.multipleSelection);
|
||||||
this.$refs.multipleTable.clearSelection();
|
for (let i in this.multipleSelection) {
|
||||||
}
|
console.log(i);
|
||||||
},
|
this.deleteArr.push({
|
||||||
handleSelectionChange(val) {
|
id: this.multipleSelection[i].id,
|
||||||
this.multipleSelection = val;
|
});
|
||||||
}
|
}
|
||||||
}
|
console.log(this.deleteArr);
|
||||||
|
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// 行设置向后台请求删除数据
|
||||||
|
deleteLineJoggle({ list: this.deleteArr }).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.lineList(); //刷新
|
||||||
|
});
|
||||||
|
this.$message({
|
||||||
|
type: "success",
|
||||||
|
message: "删除成功!",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消删除",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.lineList();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.lineInformation {
|
.lineInformation {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: @color-white;
|
background: @color-white;
|
||||||
.lineBtnGroup {
|
.lineBtnGroup {
|
||||||
padding: 16px 8px;
|
padding: 16px 8px;
|
||||||
}
|
}
|
||||||
.searchForm {
|
.searchForm {
|
||||||
padding: 0px 8px;
|
padding: 0px 8px;
|
||||||
.el-form {
|
.el-form {
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
.lineTable {
|
|
||||||
padding: 16px 8px 0 8px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.lineTable {
|
||||||
|
padding: 16px 8px 0 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,138 +1,149 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="monitor-container">
|
<div class="monitor-container">
|
||||||
<!-- 左侧数据列表树 -->
|
<!-- 左侧数据列表树 -->
|
||||||
<div class="sideBar">
|
<div class="sideBar">
|
||||||
<!-- <treeSide></treeSide> -->
|
<!-- <treeSide></treeSide> -->
|
||||||
<!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
|
<!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
|
||||||
<el-tree
|
|
||||||
:data="barData"
|
|
||||||
:props="defaultProps"
|
|
||||||
:current-node-key="current_node_key"
|
|
||||||
ref="tree"
|
|
||||||
node-key="id"
|
|
||||||
highlight-current
|
|
||||||
:default-expanded-keys="defaultKey"
|
|
||||||
check-on-click-node
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
>
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
|
||||||
<!-- <router-view></router-view> -->
|
|
||||||
<!-- 中心内容 -->
|
|
||||||
|
|
||||||
<picturemain :photoData="photoData" v-if="showBigPic"></picturemain>
|
<el-tree
|
||||||
<!-- 带参数的中心内容右侧参数区 -->
|
:data="lineTreeData"
|
||||||
<div class="picSetBox" v-else>
|
:props="defaultProps"
|
||||||
<div class="swiperBox">
|
:expand-on-click-node="false"
|
||||||
<carouselChart></carouselChart>
|
ref="tree"
|
||||||
</div>
|
node-key="id"
|
||||||
<paramArea></paramArea>
|
highlight-current
|
||||||
</div>
|
@node-click="handleNodeClick"
|
||||||
|
:current-node-key="currentNodekey"
|
||||||
|
>
|
||||||
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <router-view></router-view> -->
|
||||||
|
<!-- 中心内容 -->
|
||||||
|
|
||||||
|
<picturemain :photoData="photoData" v-if="showBigPic"></picturemain>
|
||||||
|
<!-- 带参数的中心内容右侧参数区 -->
|
||||||
|
<div class="picSetBox" v-else>
|
||||||
|
<div class="swiperBox">
|
||||||
|
<carouselChart></carouselChart>
|
||||||
|
</div>
|
||||||
|
<paramArea></paramArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import { getHostDeviceDataByVoltage } from '@/utils/api/index';
|
import {
|
||||||
import carouselChart from '../components/carouselChart.vue';
|
getLineTreeListJoggle,
|
||||||
import treeSide from './components/treeSide.vue';
|
getTerminalPhotoListJoggle,
|
||||||
import picturemain from './picturemain.vue'; //照片展示
|
} from "@/utils/api/index";
|
||||||
import paramArea from './paramArea.vue'; //右侧参数区
|
import carouselChart from "../components/carouselChart.vue";
|
||||||
import testjson from '../../testjson';
|
import treeSide from "./components/treeSide.vue";
|
||||||
|
import picturemain from "./picturemain.vue"; //照片展示
|
||||||
|
import paramArea from "./paramArea.vue"; //右侧参数区
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
treeSide,
|
treeSide,
|
||||||
picturemain,
|
picturemain,
|
||||||
paramArea,
|
paramArea,
|
||||||
carouselChart
|
carouselChart,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
photoData: '',
|
photoData: "",
|
||||||
childData: '',
|
childData: "",
|
||||||
currentNodekey: '',
|
currentNodekey: "",
|
||||||
showBigPic: true,
|
showBigPic: true,
|
||||||
defaultKey: '',
|
defaultKey: "",
|
||||||
|
lineTreeData: [],
|
||||||
barData: [],
|
defaultProps: {
|
||||||
defaultProps: {
|
//指定参数格式回显数据
|
||||||
//指定参数格式回显数据
|
children: "list",
|
||||||
children: 'children',
|
label: "name",
|
||||||
label: 'text'
|
},
|
||||||
},
|
currentNodekey: "", //默认选中的节点树,
|
||||||
current_node_key: '2e24a182-b1a5-4135-b473-b8eee2c5193e'
|
};
|
||||||
};
|
},
|
||||||
},
|
watch: {},
|
||||||
watch: {},
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {},
|
||||||
this.$nextTick(() => {
|
created() {
|
||||||
var currentData = testjson.data[0].children[0].children[0];
|
this.getLineTreeList();
|
||||||
this.handleNodeClick(currentData);
|
},
|
||||||
this.defaultKey = [currentData.id];
|
|
||||||
|
methods: {
|
||||||
|
//获取左侧树结构
|
||||||
|
getLineTreeList() {
|
||||||
|
getLineTreeListJoggle()
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.lineTreeData = res.data.list;
|
||||||
|
console.log(this.lineTreeData);
|
||||||
|
if (this.lineTreeData.length > 0) {
|
||||||
|
this.currentNodekey = this.lineTreeData[0].id;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err); //代码错误、请求失败捕获
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
created() {
|
//获取图片
|
||||||
this.getTree();
|
getTerminalPhotoList() {},
|
||||||
//装置数量统计
|
//点击获取当前点击的tree数据
|
||||||
// getHostDeviceDataByVoltage().then((res) => {
|
handleNodeClick(data, node) {
|
||||||
// console.log(res);
|
console.log(data, node);
|
||||||
// });
|
if (data.list) {
|
||||||
|
this.$refs.tree.setCurrentKey(data.list[0].id);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
methods: {
|
|
||||||
handleNodeClick(data) {
|
|
||||||
console.log(data);
|
|
||||||
if (data.children.length === 0 && data.dataType === 'tower') {
|
|
||||||
// this.photoData = data;
|
|
||||||
this.showBigPic = false;
|
|
||||||
this.childData = data.text;
|
|
||||||
} else if (data.children.length && data.dataType === 'line') {
|
|
||||||
this.showBigPic = true;
|
|
||||||
this.photoData = data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTree() {
|
|
||||||
this.barData = testjson.data;
|
|
||||||
console.log(this.barData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||||
|
// 设置颜色
|
||||||
|
color: #fff;
|
||||||
|
background: #2d8cf0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node > .el-tree-node__content:hover {
|
||||||
|
background-color: #c1ddf0;
|
||||||
|
}
|
||||||
|
|
||||||
.monitor-container {
|
.monitor-container {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid @border-color-base;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: @color-white;
|
||||||
|
.sideBar {
|
||||||
|
width: 300px;
|
||||||
|
border-right: 1px solid @border-color-base;
|
||||||
|
overflow: auto;
|
||||||
|
.el-tree {
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picSetBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 1px solid @border-color-base;
|
//background: #fcc;
|
||||||
box-sizing: border-box;
|
flex: 1;
|
||||||
background: @color-white;
|
overflow: hidden;
|
||||||
.sideBar {
|
.swiperBox {
|
||||||
width: 300px;
|
-webkit-box-flex: 1;
|
||||||
border-right: 1px solid @border-color-base;
|
-ms-flex: 1;
|
||||||
overflow: auto;
|
flex: 1;
|
||||||
.el-tree {
|
width: auto;
|
||||||
|
overflow: hidden;
|
||||||
.el-tree-node__content {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.picSetBox {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
//background: #fcc;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
.swiperBox {
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
-ms-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
width: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue