Commit 11c2677f authored by xiexingan's avatar xiexingan

调整

parent 93f138a8
...@@ -26,11 +26,11 @@ export default { ...@@ -26,11 +26,11 @@ export default {
type: 'pie', type: 'pie',
radius: '50%', radius: '50%',
data: [ data: [
{ value: 1048, name: '搜索引擎' }, { value: 1048, name: '搜索引擎', itemStyle: { color: 'skyblue' } },
{ value: 735, name: '直接访问' }, { value: 735, name: '直接访问', itemStyle: { color: '#F2637B' } },
{ value: 580, name: '邮件营销' }, { value: 580, name: '邮件营销', itemStyle: { color: '#8EE0E0' } },
{ value: 484, name: '联盟广告' }, { value: 484, name: '联盟广告', itemStyle: { color: '#4ECB74' } },
{ value: 300, name: '视频广告' } { value: 300, name: '视频广告', itemStyle: { color: '#FFCC00' } }
] ]
} }
......
...@@ -4,112 +4,119 @@ ...@@ -4,112 +4,119 @@
<script> <script>
export default { export default {
data() { data() {
return { return {
legendData: [], legendData: [],
nameList: [ nameList: [
'赵', '赵',
'钱', '钱',
'孙', '孙',
'范', '范',
'屈', '屈',
'项', '项',
'祝', '祝',
'董', '董',
'梁', '梁',
'杜', '杜',
'阮', '阮',
'蓝', '蓝',
'闵', '闵',
'席', '席',
'季', '季',
'麻', '麻',
'强', '强',
'贾', '贾',
'路', '路',
'娄', '娄',
'危' '危'
], ],
list: {} list: {}
} }
}, },
created() { created() {
this.list = this.genData(30) // this.list = this.genData(30)
}, },
mounted() { mounted() {
this.ring() this.ring()
console.log(this.list) console.log(this.list)
}, },
methods: { methods: {
ring() { ring() {
let dom = document.getElementById('pie4') let dom = document.getElementById('pie4')
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item'
formatter: '{a} <br/>{b} : {c} ({d}%)' // formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: this.list.legendData,
selected: this.list.selected
},
series: [
{
name: '姓名',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: this.list.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myCharts.setOption(option)
}, },
genData(count) { legend: {
var legendData = [] type: 'scroll',
var seriesData = [] orient: 'vertical',
for (var i = 0; i < count; i++) { right: 10,
var name = top: 20,
Math.random() > 0.65 bottom: 20,
? this.makeWord(4, 1) + '·' + this.makeWord(3, 0) data: [1, 2, 3, 4, 5, 6],
: this.makeWord(2, 1)
legendData.push(name)
seriesData.push({
name: name,
value: Math.round(Math.random() * 100000)
})
}
return { selected: [1, 2, 3, 4, 5, 6]
legendData: legendData,
seriesData: seriesData
}
}, },
makeWord(max, min) { series: [
var nameLen = Math.ceil(Math.random() * max + min) {
var name = [] name: '姓名',
for (var i = 0; i < nameLen; i++) { type: 'pie',
name.push( radius: '55%',
this.nameList[ Math.round(Math.random() * this.nameList.length - 1) ] center: ['40%', '50%'],
) data: [
{ name: 1, value: '123' },
{ name: 1, value: '123' },
{ name: 1, value: '123' },
{ name: 1, value: '123' },
{ name: 1, value: '123' },
{ name: 1, value: '123' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
} }
return name.join('') }
} ]
}
myCharts.setOption(option)
},
genData(count) {
var legendData = []
var seriesData = []
for (var i = 0; i < count; i++) {
var name =
Math.random() > 0.65
? this.makeWord(4, 1) + '·' + this.makeWord(3, 0)
: this.makeWord(2, 1)
legendData.push(name)
seriesData.push({
name: name,
value: Math.round(Math.random() * 100000)
})
}
return {
legendData: legendData,
seriesData: seriesData
}
},
makeWord(max, min) {
var nameLen = Math.ceil(Math.random() * max + min)
var name = []
for (var i = 0; i < nameLen; i++) {
name.push(
this.nameList[Math.round(Math.random() * this.nameList.length - 1)]
)
}
return name.join('')
} }
}
} }
</script> </script>
......
export const tableColumsOne = [
{
align: 'center',
prop: 'A',
label: '设备名称',
width: 132
},
{
align: 'center',
prop: 'B',
label: '设备位置'
// width: 112,
},
{
align: 'center',
prop: 'C',
label: '控制方式',
width: 132
},
{
align: 'center',
prop: 'D',
label: '能耗统计',
width: 182
},
{
align: 'center',
prop: 'E',
label: '设备编号',
width: 132
}
]
export const tableDataOne = [
{
A: '多联空调A1',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: '多联空调A2',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: '多联空调A3',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: '多联空调A4',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: '多联空调A5',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: ' 多联空调A4',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: ' 多联空调A4',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: ' 多联空调A4',
B: '右侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: ' 多联空调A4',
B: '右侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: '多联空调A10',
B: '右侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: '多联空调A',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
}
]
export const tableDataTwo = [
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: ' 多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
},
{
A: ' 多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: ' 多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: ' 多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
},
{
A: '多联新风',
B: '屋面',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLX-1'
}
]
export const tableDataThree = [
{
A: '机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 机房空调',
B: '通信机械室',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 机房空调',
B: '右侧办公房屋',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '信息机房',
B: '右侧办公房屋',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '信息机房',
B: '左侧办公房屋',
C: '显示状态',
D: '今日用电量/本月用电量',
E: 'JK-1'
}
]
export const tableDataFour = [
{
A: '排风机',
B: '售票厅',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'PF-B5'
},
{
A: '排风机',
B: '消防泵房',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'PF-B4'
},
{
A: '排风机',
B: '车站备品间',
C: '开/关',
D: '今日用电量/本月用电量',
E: '厕所排风机1#'
},
{
A: '排风机',
B: '候车厅公共卫生间',
C: '开/关',
D: '今日用电量/本月用电量',
E: '厕所排风机2#'
},
{
A: '排风机',
B: '出站通道公共卫生间',
C: '开/关',
D: '今日用电量/本月用电量',
E: '厕所排风机3#'
},
{
A: ' 换气扇',
B: '吸氧间',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 换气扇',
B: '吸氧间',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 换气扇',
B: '吸氧间',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: ' 换气扇',
B: '吸氧间',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '换气扇',
B: '站长室',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'JK-1'
},
{
A: '换气扇',
B: 'VIP候车室',
C: '开/关',
D: '今日用电量/本月用电量',
E: 'JK-1'
}
]
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<cardList cardListTitle="候车大厅控制"> <cardList cardListTitle="候车大厅控制">
<div slot="content" > <div slot="content" >
<div> <div>
<el-form :inline="true" :model="formData" label-width="100"> <el-form :inline="true" :model="formData" label-width="100">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<!-- <el-button type="primary" >查询</el-button> --> <!-- <el-button type="primary" >查询</el-button> -->
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :md="12" :lg="4"> <el-col :md="12" :lg="4">
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
<!-- tabs --> <!-- tabs -->
<div style="margin-bottom: 20px"> <div style="margin-bottom: 20px">
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
<enTable v-on:handleBtnClick="handleBtnClick" :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true"> <enTable v-on:handleBtnClick="handleBtnClick" :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true">
<template v-slot:operation='scope'> <template v-slot:operation='scope'>
<el-button type="text" @click="hallModalVisible=true">编辑</el-button> <el-button type="text" @click="hallModalVisible=true">编辑</el-button>
</template> </template>
</enTable> </enTable>
</div> </div>
...@@ -100,201 +100,79 @@ ...@@ -100,201 +100,79 @@
</div> </div>
</template> </template>
<script> <script>
import cardList from "../../components/cardList"; import cardList from '../../components/cardList'
import enTable from "../../components/enTable"; import enTable from '../../components/enTable'
import enTabs from '../../components/enTabs' import enTabs from '../../components/enTabs'
import hallModal from './components/hallModal' import hallModal from './components/hallModal'
const tableColums = [ import { tableDataOne, tableColumsOne, tableDataTwo, tableDataThree, tableDataFour } from './config'
{
align: "center",
prop: "A",
label: "设备名称",
width: 112,
},
{
align: "center",
prop: "B",
label: "设备描述",
// width: 112,
},
{
align: "center",
prop: "C",
label: "运行状态",
width: 132,
},
{
align: "center",
prop: "D",
label: "当前频率",
width: 132,
},
{
align: "center",
prop: "E",
label: "故障报警",
width: 132,
},
{
align: "center",
prop: "F",
label: "说明",
width: 132,
},
{
align: "center",
prop: "G",
label: "设备编号",
width: 132,
},
];
const tableData = [
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
{
A: "A",
B: "YA01254N51",
C: "正常",
D: "110Hz",
E: "",
F: "说明",
G: "QY0001",
},
];
export default { export default {
components: { components: {
cardList, cardList,
enTable, enTable,
enTabs, enTabs,
hallModal, hallModal
},
watch: {
activeTab(val) {
switch (val) {
case '01':
this.tableColums = tableColumsOne
this.tableData = tableDataOne
break
case '02':
this.tableColums = tableColumsOne
this.tableData = tableDataTwo
break
case '03':
this.tableColums = tableColumsOne
this.tableData = tableDataThree
break
case '04':
this.tableColums = tableColumsOne
this.tableData = tableDataFour
break
}
}
}, },
data() { data() {
return { return {
tableColums, activeTab: '01',
tableData, tableData: tableDataOne,
activeTab:'01', tableColums: tableColumsOne,
formData: {}, formData: {},
tabList: [ tabList: [
{ {
value: "01", value: '01',
label: "热泵", label: '热泵'
}, },
{ {
value: "02", value: '02',
label: "风冷热泵机组", label: '风冷热泵机组'
}, },
{ {
value: "03", value: '03',
label: "室内机风柜", label: '室内机风柜'
}, },
{ {
value: "04", value: '04',
label: " 水泵", label: ' 水泵'
}, }
], ],
hallModalVisible:false, hallModalVisible: false
}; }
}, },
methods: { methods: {
cancelhandle(){ cancelhandle() {
this.$nextTick(()=>{ this.$nextTick(() => {
this.hallModalVisible = false this.hallModalVisible = false
}) })
}, },
handleBtnClick(){ handleBtnClick() {
this.hallModalVisible = true this.hallModalVisible = true
} }
}, }
}; }
</script> </script>
<style lang="scss" > <style lang="scss" >
.hall { .hall {
...@@ -318,4 +196,3 @@ export default { ...@@ -318,4 +196,3 @@ export default {
} }
</style> </style>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
></el-tab-pane> ></el-tab-pane>
</el-tabs> </el-tabs>
<div style="margin-top: 20px"></div> <div style="margin-top: 20px"></div>
<en-table :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true"> <en-table :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true">
<template v-slot:operation='scope'> <template v-slot:operation='scope'>
<el-button type="text">编辑</el-button> <el-button type="text">编辑</el-button>
</template> </template>
...@@ -167,65 +167,65 @@ ...@@ -167,65 +167,65 @@
// G: "QY0001", // G: "QY0001",
// }, // },
// ]; // ];
import cardList from "../../components/cardList"; import cardList from '../../components/cardList'
import enTabs from "../../components/enTabs"; import enTabs from '../../components/enTabs'
import enTable from "../../components/enTable"; import enTable from '../../components/enTable'
import { tableDataOne,tableColumsOne ,tableDataTwo,tableDataThree,tableDataFour} from './config' import { tableDataOne, tableColumsOne, tableDataTwo, tableDataThree, tableDataFour } from './config'
export default { export default {
name: "officeAreaControl", name: 'officeAreaControl',
components: { components: {
cardList, cardList,
enTabs, enTabs,
enTable, enTable
}, },
data() { data() {
return { return {
activeTab:'01', activeTab: '01',
tableData:tableDataOne, tableData: tableDataOne,
tableColums:tableColumsOne, tableColums: tableColumsOne,
officeTabList: [ officeTabList: [
{ {
value: "01", value: '01',
label: "多联空调", label: '多联空调'
}, },
{ {
value: "02", value: '02',
label: "多联新风", label: '多联新风'
}, },
{ {
value: "03", value: '03',
label: "机房空调", label: '机房空调'
}, },
{ {
value: "04", value: '04',
label: "排风机", label: '排风机'
}, }
], ]
}; }
}, },
watch:{ watch: {
activeTab(val){ activeTab(val) {
switch (val){ switch (val) {
case '01': case '01':
this.tableColums = tableColumsOne this.tableColums = tableColumsOne
this.tableData = tableDataOne this.tableData = tableDataOne
break; break
case '02': case '02':
this.tableColums = tableColumsOne this.tableColums = tableColumsOne
this.tableData = tableDataTwo this.tableData = tableDataTwo
break; break
case '03': case '03':
this.tableColums = tableColumsOne this.tableColums = tableColumsOne
this.tableData = tableDataThree this.tableData = tableDataThree
break; break
case '04': case '04':
this.tableColums = tableColumsOne this.tableColums = tableColumsOne
this.tableData = tableDataFour this.tableData = tableDataFour
break; break
} }
} }
} }
}; }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment