Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-dev/pulls/40pull/47/head
@@ -97,6 +97,22 @@ export default { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'shadow' | |||
}, | |||
formatter: function(params) { | |||
return ( | |||
params[0].axisValue + | |||
`<br>` + | |||
params.map((item) => { | |||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>` | |||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>` | |||
let value = item.value ? item.value : '-' | |||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>` | |||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px"> | |||
<span>${str}${seriesNameStr}</span> | |||
<span>${valueStr}</span> | |||
</span>` | |||
}).join(``) | |||
) | |||
} | |||
}, | |||
grid: { | |||
@@ -106,7 +122,11 @@ export default { | |||
containLabel: true | |||
}, | |||
legend: { | |||
data: legendData | |||
data: legendData, | |||
right: '1%', | |||
icon: 'rect', | |||
itemHeight: 8, | |||
itemWidth: 8 | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
@@ -103,7 +103,8 @@ export default { | |||
containLabel: true | |||
}, | |||
legend: { | |||
data: legendData | |||
data: legendData, | |||
right: '1%' | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
@@ -425,7 +425,7 @@ export default { | |||
} | |||
} | |||
</script> | |||
<style> | |||
<style lang='scss'> | |||
/* 时间整点 */ | |||
.noneMinute .el-time-spinner__wrapper { | |||
width: 100%; | |||
@@ -433,6 +433,16 @@ export default { | |||
.noneMinute .el-scrollbar:nth-of-type(2) { | |||
display: none; | |||
} | |||
.demo-form-inline { | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
.demo-form-inline { | |||
@@ -446,8 +456,6 @@ export default { | |||
margin-top: 12px; | |||
} | |||
} | |||
</style> | |||
<style scoped> | |||
.searchBarBox .foldClass { | |||
position: absolute; | |||
top: 14px; | |||
@@ -15,7 +15,7 @@ export default { | |||
return { | |||
chartDom: '', | |||
chart: '', | |||
chartHeight: this.tableHeight(350) | |||
chartHeight: this.tableHeight(370) | |||
} | |||
}, | |||
props: { | |||
@@ -34,7 +34,7 @@ export default { | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.chartHeight = this.tableHeight(350) | |||
this.chartHeight = this.tableHeight(370) | |||
}) | |||
}, | |||
methods: { | |||
@@ -86,17 +86,35 @@ export default { | |||
} | |||
} | |||
var option = { | |||
// title: { | |||
// text: 'World Population' | |||
// }, | |||
color:['#288AFF','#8EF0AB'], | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'shadow' | |||
}, | |||
formatter: function(params) { | |||
return ( | |||
params[0].axisValue + | |||
`<br>` + | |||
params.map((item) => { | |||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>` | |||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>` | |||
let value = item.value ? item.value : '-' | |||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>` | |||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px"> | |||
<span>${str}${seriesNameStr}</span> | |||
<span>${valueStr}</span> | |||
</span>` | |||
}).join(``) | |||
) | |||
} | |||
}, | |||
legend: {}, | |||
legend: { | |||
right: '1%', | |||
icon: 'rect', | |||
itemHeight: 8, | |||
itemWidth: 8 | |||
}, | |||
grid: { | |||
left: '1%', | |||
right: '1%', | |||
@@ -194,13 +194,23 @@ export default { | |||
} | |||
} | |||
</script> | |||
<style> | |||
<style lang='scss'> | |||
/* 级联选择器 */ | |||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio { | |||
display: none; | |||
} | |||
.demo-form-inline { | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
} | |||
</style> | |||
<style scoped> | |||
<style lang="scss" scoped> | |||
.separateStyle { | |||
display: inline-block; | |||
width: 1px; | |||
@@ -208,8 +218,6 @@ export default { | |||
background: #E8E8E8; | |||
vertical-align: middle; | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
.demo-form-inline { | |||
.blue-block { | |||
display: inline-block; | |||
@@ -9,7 +9,8 @@ | |||
:table-data="list" | |||
class="qoq-out-table" | |||
/> | |||
<div style='width: 100%;height: 300px;padding-top: 30px;'> | |||
<div class="chartTitle">环比分析图</div> | |||
<div style='width: 100%'> | |||
<line-chart ref="analysisLineChart" :chartData="chartData"/> | |||
</div> | |||
</div> | |||
@@ -111,4 +112,21 @@ export default { | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss' scoped> | |||
.chartTitle { | |||
font-size: 16px; | |||
color: #000; | |||
margin-top: 20px; | |||
} | |||
.chartTitle::before { | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 18px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
vertical-align: bottom; | |||
} | |||
</style> |
@@ -68,12 +68,6 @@ export default { | |||
} | |||
var option = { | |||
color:['#288AFF'], | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'shadow' | |||
} | |||
}, | |||
grid: { | |||
left: '4%', | |||
right: '1%', | |||
@@ -70,9 +70,9 @@ export default { | |||
var option = { | |||
color:['#288AFF'], | |||
tooltip: { | |||
trigger: 'axis' | |||
}, | |||
// tooltip: { | |||
// trigger: 'axis' | |||
// }, | |||
grid: { | |||
left: '4%', | |||
right: '1%', | |||
@@ -385,7 +385,7 @@ export default { | |||
} | |||
} | |||
</script> | |||
<style> | |||
<style lang='scss'> | |||
/* 级联选择器 */ | |||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio { | |||
display: none; | |||
@@ -397,6 +397,16 @@ export default { | |||
.noneMinute .el-scrollbar:nth-of-type(2) { | |||
display: none; | |||
} | |||
.demo-form-inline { | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
.demo-form-inline { | |||
@@ -410,8 +420,6 @@ export default { | |||
margin-top: 12px; | |||
} | |||
} | |||
</style> | |||
<style scoped> | |||
.searchBarBox .foldClass { | |||
position: absolute; | |||
top: 14px; | |||
@@ -77,7 +77,8 @@ export default { | |||
var option = { | |||
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'], | |||
legend: { | |||
data: keys | |||
data: keys, | |||
right:'1%' | |||
}, | |||
tooltip: { | |||
trigger: 'axis' | |||
@@ -143,19 +143,20 @@ export default { | |||
} | |||
} | |||
</script> | |||
<style> | |||
<style lang='scss'> | |||
/* 级联选择器 */ | |||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio { | |||
display: none; | |||
} | |||
</style> | |||
<style scoped> | |||
.separateStyle { | |||
display: inline-block; | |||
width: 1px; | |||
height: 24px; | |||
background: #E8E8E8; | |||
vertical-align: middle; | |||
.demo-form-inline { | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
@@ -170,4 +171,11 @@ export default { | |||
margin-top: 10px; | |||
} | |||
} | |||
.separateStyle { | |||
display: inline-block; | |||
width: 1px; | |||
height: 24px; | |||
background: #E8E8E8; | |||
vertical-align: middle; | |||
} | |||
</style> |
@@ -3,6 +3,7 @@ | |||
<!-- 搜索工作栏 --> | |||
<search-area @submit="getList" @exportD="exportData"/> | |||
<div v-show='chartData.length'> | |||
<div class="chartTitle">同比分析图</div> | |||
<div style='width: 100%;height: 400px;'> | |||
<line-chart ref="analysisLineChart" :chartData="chartData"/> | |||
</div> | |||
@@ -33,12 +34,12 @@ export default { | |||
chartData: [], | |||
tableProps: [], | |||
list: [], | |||
tableH: this.tableHeight(600) | |||
tableH: this.tableHeight(640) | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(600) | |||
this.tableH = this.tableHeight(640) | |||
}) | |||
}, | |||
methods: { | |||
@@ -122,4 +123,20 @@ export default { | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss' scoped> | |||
.chartTitle { | |||
font-size: 16px; | |||
color: #000; | |||
} | |||
.chartTitle::before { | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 18px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
vertical-align: bottom; | |||
} | |||
</style> |
@@ -130,7 +130,7 @@ export default { | |||
this.plcTableName = data.plcTableName | |||
this.objName = data.objName | |||
this.getList() | |||
if (title === 'view') { | |||
if (title === 'detail') { | |||
this.showBtn = false | |||
this.tableBtn = [] | |||
} else { | |||
@@ -113,22 +113,22 @@ export default { | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:energy-plc-connect:bind') | |||
? { | |||
type: 'connect', | |||
btnName: '绑定' | |||
} | |||
: undefined, | |||
{ | |||
type: 'detail', | |||
btnName: '详情' | |||
}, | |||
this.$auth.hasPermi('base:energy-plc-connect:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
{ | |||
type: 'view', | |||
btnName: '查看' | |||
}, | |||
this.$auth.hasPermi('base:energy-plc-connect:bind') | |||
? { | |||
type: 'connect', | |||
btnName: '绑定' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-plc-connect:delete') | |||
? { | |||
type: 'delete', | |||
@@ -205,10 +205,10 @@ export default { | |||
case 'delete': | |||
this.handleDelete(val.data) | |||
break | |||
case 'view': | |||
case 'detail': | |||
this.paramVisible = true | |||
this.$nextTick(() => { | |||
this.$refs.plcParam.init(val.data, 'view') | |||
this.$refs.plcParam.init(val.data, 'detail') | |||
}) | |||
break | |||
default: | |||
@@ -1,54 +1,72 @@ | |||
<template> | |||
<el-form ref="form" :rules="rules" label-width="110px" :model="form"> | |||
<el-form-item label="监控对象" prop="objectId"> | |||
<el-cascader | |||
style='width: 100%;' | |||
v-model="objIds" | |||
:options="objList" | |||
:props="{ checkStrictly: true, value: 'id', label: 'name' }" | |||
popper-class="cascaderParent" | |||
@change="selectObj" | |||
clearable></el-cascader> | |||
</el-form-item> | |||
<el-form-item label="能源类型" prop="energyTypeId"> | |||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType"> | |||
<el-option | |||
v-for="item in this.energyTypeList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="监控模式" prop="type"> | |||
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange"> | |||
<el-option label="合并" :value= "1" ></el-option> | |||
<el-option label="详细" :value= "2" ></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2"> | |||
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail"> | |||
<el-option | |||
v-for="item in detailList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="指标类型" prop="limitType"> | |||
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;"> | |||
<el-option | |||
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="消耗量阈值" prop="limitValue"> | |||
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number> | |||
</el-form-item> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="监控对象" prop="objectId"> | |||
<el-cascader | |||
style='width: 100%;' | |||
v-model="objIds" | |||
:options="objList" | |||
:props="{ checkStrictly: true, value: 'id', label: 'name' }" | |||
popper-class="cascaderParent" | |||
@change="selectObj" | |||
clearable></el-cascader> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="能源类型" prop="energyTypeId"> | |||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType"> | |||
<el-option | |||
v-for="item in this.energyTypeList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="监控模式" prop="type"> | |||
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange"> | |||
<el-option label="合并" :value= "1" ></el-option> | |||
<el-option label="详细" :value= "2" ></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2"> | |||
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail"> | |||
<el-option | |||
v-for="item in detailList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="指标类型" prop="limitType"> | |||
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;"> | |||
<el-option | |||
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="消耗量阈值" prop="limitValue"> | |||
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
@@ -124,7 +124,7 @@ export default { | |||
this.energyType = data.energyType | |||
this.energyTypeId = data.energyTypeId | |||
this.getList() | |||
if (title === 'view') { | |||
if (title === 'detail') { | |||
this.showBtn = false | |||
this.tableBtn = [] | |||
} else { | |||
@@ -111,22 +111,22 @@ export default { | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('monitoring:energy-statistics:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
{ | |||
type: 'view', | |||
btnName: '查看' | |||
}, | |||
this.$auth.hasPermi('monitoring:energy-statistics:bind') | |||
? { | |||
type: 'connect', | |||
btnName: '绑定' | |||
} | |||
: undefined, | |||
{ | |||
type: 'detail', | |||
btnName: '详情' | |||
}, | |||
this.$auth.hasPermi('monitoring:energy-statistics:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('monitoring:energy-statistics:delete') | |||
? { | |||
type: 'delete', | |||
@@ -199,9 +199,9 @@ export default { | |||
case 'delete': | |||
this.handleDelete(val.data) | |||
break | |||
case 'view': | |||
case 'detail': | |||
this.$nextTick(() => { | |||
this.$refs.plcParam.init(val.data, 'view') | |||
this.$refs.plcParam.init(val.data, 'detail') | |||
}) | |||
break | |||
default: | |||
@@ -37,7 +37,7 @@ | |||
@cancel="handleCancel" | |||
@confirm="handleConfirm" | |||
:before-close="handleCancel" | |||
width='70%' | |||
width='50%' | |||
> | |||
<group-class-add ref="classList" @successSubmit="successSubmit" /> | |||
</base-dialog> | |||
@@ -108,12 +108,6 @@ export default { | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:group-classes:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
{ | |||
type: 'cancel', | |||
btnName: '作废', | |||
@@ -128,6 +122,12 @@ export default { | |||
] | |||
} | |||
}, | |||
this.$auth.hasPermi('base:group-classes:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:group-classes:delete') | |||
? { | |||
type: 'delete', | |||
@@ -1,17 +1,29 @@ | |||
<template> | |||
<el-form ref="form" :rules="rules" label-width="80px" :model="form"> | |||
<el-form-item label="班组名称" prop="name"> | |||
<el-input v-model="form.name"></el-input> | |||
</el-form-item> | |||
<el-form-item label="班组编码" prop="code"> | |||
<el-input v-model="form.code" disabled></el-input> | |||
</el-form-item> | |||
<el-form-item label="班组人数" prop="num"> | |||
<el-input-number v-model="form.num" :min="1" :max="99999999" style="width: 100%;"></el-input-number> | |||
</el-form-item> | |||
<el-form-item label="班组组长" prop="leaderName"> | |||
<el-input v-model="form.leaderName"></el-input> | |||
</el-form-item> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="班组名称" prop="name"> | |||
<el-input v-model="form.name"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="班组编码" prop="code"> | |||
<el-input v-model="form.code" disabled></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="班组人数" prop="num"> | |||
<el-input-number v-model="form.num" :min="1" :max="99999999" style="width: 100%;"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="班组组长" prop="leaderName"> | |||
<el-input v-model="form.leaderName"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
@@ -308,6 +308,16 @@ export default { | |||
} | |||
</script> | |||
<style lang='scss'> | |||
.demo-form-inline { | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
} | |||
.groupTeamScheduling { | |||
background-color: #F2F4F9; | |||
.operationArea { | |||