<template>
<div>
<el-row :gutter="10">
<el-col>
<el-card class="box-card" :body-style="{background:'#3300cc'}">
<div slot="header" class="clearfix" >
<span> 快照趋势图 </span>
<el-button-group style="float: right; padding: 3px 0" >
<el-button type="primary" plain size="mini"> 一周 </el-button>
<el-button plain size="mini"> 半年 </el-button>
<el-button plain size="mini"> 一年 </el-button>
</el-button-group>
</div>
<line-chartts height="200px" width="100%" id="snapshot" :data="dashboradData.Computer"></line-chartts>
</el-card>
</el-col>
<el-col >
<el-card class="box-card">
<char-map height="400px" width="100%" id="map" :data="dashboradData.map"></char-map>
</el-card>
</el-col>
<el-button @click="handlecc"> 提交 </el-button>
<el-col>
<el-input-number v-model="num1" @change="handleChange" :precision="0" :step="1" :min="0" :max="3000" label="描述文字"></el-input-number>
</el-col>
</el-row>
<br><br><br><br><br><br>
<el-col :span="4">
<el-card class="box-card">
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
ref="reference"
:highlight-current="true"
>
<span class="custom-tree-node" slot-scope="{node, data}">
<span>{{node.label}}</span>
<span v-show="node.level === 1">
<el-button type="text" size="mini" @click.native.stop="() => append(data)"> <i class="el-icon-plus"></i> </el-button>
<el-button type="text" size="mini" @click.native.stop="() => remove(node, data)"> <i class="el-icon-delete"></i> </el-button>
</span>
<span v-show="node.level === 2">
<el-button type="text" size="mini" @click.native.stop="() => remove(node, data)"> <i class="el-icon-delete"></i> </el-button>
</span>
</span>
</el-tree>
</el-card>
</el-col>
<add-tree :add-data="z_addTreeData"></add-tree>
<br><br><br><br><br><br><br><br><br><br><br>
<div style="width:1200px;marginLeft:20px">
<el-col :span="10">
<el-slider
v-model="value6"
:min='1' :max='10' :step="1" :show-tooltip="false"
>
</el-slider>
<div class="box">
<span v-for="(item,index) in timeList" :key="index">{{item.text}}</span>
</div>
</el-col>
</div>
<br><br><br><br><br><br><br><br><br><br><br></div>
</template>
<script>
import LineChartts from ‘../components/line-charts/LineCharts.vue’
import charMap from ‘../components/charMap/charMap.vue’
import cc from ‘../components/cc.vue’
import addTree from ‘./addAtree.vue’
export default {
data() {
return {
dashboradData: {
Computer:{keys: ["2018-11", "2018-12", "2019-01", "2019-02", "2019-03", "2019-04"],
values: [{data: [10, 30, 80, 20, 90, 10], name: "合计"},{data: [90, 10, 50, 60, 10, 20], name: "合计 0"},{data: [10, 70, 50, 60, 90, 20], name: "合计 3"}]
},
map: [
{
name: '北京',
value: [116.46, 39.92]
},
{
name: '大庆',
value: [125.03, 46.58]
},
{
name: '分店 3',
value: [120.38, 37.35, 142]
},
{
name: '分店 4',
value: [122.207216, 29.985295, 123]
},
{
name: '分店 5',
value: [110.245672, 30.7787677, 566]
}
]
},
bb: {
a: '',
b: ''
},
num1: 0,
cici: [
{name: 'cscs'},
{name: 'cmc'},
{name: 'cscc'},
{name: 'cscs1'},
{name: 'cscs'}
],
data: [{
label: '一级 1',
id: 1,
children: [{
label: '二级 1-1',
children: [{label: '三级 1-1-1'}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{label: '三级 2-1-1'}]
}, {
label: '二级 2-2',
children: [{label: '三级 2-2-1'}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{label: '三级 3-1-1'}]
}, {
label: '二级 3-2',
children: [{label: '三级 3-2-1'}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
z_addTreeData: {data: {},
dialog: false
},
value6: '',
timeList:[
{
type:'MINUTE',
text:'1 时',
duration:60
},
{
type:'HOUR',
text:'4 时',
duration:4
},
{
type:'HOUR',
text:'12 时',
duration:12
},
{
type:'HOUR',
text:'1 天',
duration:24
},
{
type:'DAY',
text:'3 天',
duration:3
},
{
type:'DAY',
text:'5 天',
duration:5
},
{
type:'DAY',
text:'1 周',
duration:7
},
{
type:'DAY',
text:'2 周',
duration:14
},
{
type:'DAY',
text:'1 月',
duration:30
},
{
type:'DAY',
text:'3 月',
duration:90
}
]
}},
components: {
LineChartts,
charMap,
cc,
addTree},
created () {
this.handlecc();
this.$nextTick(item => {this.$refs.reference.setCurrentKey(1)
})
// 第一种方法 for 循环方法 冒泡排序
// for(let i = 0; i < this.cici.length; i++) {// for (let k = i+1; k < this.cici.length; k++) {// if (this.cici[i].name == this.cici[k].name) {
// this.$notify({
// title: '警告',
// message: '名称一样啦',
// type: 'warning'
// });
// console.log(this.cici[i].name)
// break;
// }
// }
// }},
methods: {
handlecc () {
setTimeout(item => {
this.bb = {
a: true,
b: 'wanglipin'
}
},2000)
},
handleChange (value) {console.log(value);
},
cicis () {let cc = this.cici.every((item,index,element) => {for (let i = index+1; i < element.length; i++) {if (item.name == element[i].name) {
this.$notify({
title: '警告',
message: '名称一样啦',
type: 'warning'
});
return false
}
}
})
},
zhengze () {
const num = 10;
let res = /^[1-9]+$/;
},
handleNodeClick () {console.log('111')
},
append(data) {
this.z_addTreeData.dialog = true;
// console.log(data)
// let ids = 10
// const newChild = {id: ++ids, label: '儿子', children: [] };
// if (!data.children) {// this.$set(data, 'children', []);
// }
// data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},},
mounted () {
this.cicis();
this.zhengze();}
}
</script>
<style lang=”less” >
.box-card {
width: 850px;
height: 100%;
background: ‘#132845’;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.box{
margin: -5px 0 30px 0;
position: relative;}
.box span{
display: inline-block;
width: 55px;
font-size: 10px;}
.box span:nth-child(1){
margin-left: -8px;}
.box span:nth-child(10){
display: inline;
position: absolute;
right: -47px;
top:2px;}
.btn_box{
width: 200px;
margin: 20px auto 0;}
.slider_box{
padding: 0 6px;}
</style>