<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>