Compare commits

..

No commits in common. "eb3288b3edc49cae40a0a40c2229f1cb3023ab4c" and "8ea747cbbf66cd5bf5a4a2c58965c7fdc20c6d30" have entirely different histories.

12 changed files with 401 additions and 2463 deletions

View File

@ -2,7 +2,7 @@
* @Author: gtz * @Author: gtz
* @Date: 2021-11-19 10:10:51 * @Date: 2021-11-19 10:10:51
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-17 14:40:57 * @LastEditTime: 2021-12-15 17:19:13
* @Description: file content * @Description: file content
* @FilePath: \mt-qj-wms-ui\config\index.js * @FilePath: \mt-qj-wms-ui\config\index.js
*/ */
@ -22,7 +22,7 @@ module.exports = {
// 代理列表, 是否开启代理通过[./dev.env.js]配置 // 代理列表, 是否开启代理通过[./dev.env.js]配置
proxyTable: devEnv.OPEN_PROXY === false ? {} : { proxyTable: devEnv.OPEN_PROXY === false ? {} : {
'/proxyApi': { '/proxyApi': {
target: 'http://192.168.0.189:8080', target: 'http://192.168.0.183:8080',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/proxyApi': '/api' '^/proxyApi': '/api'

View File

@ -1,8 +1,8 @@
/* /*
* @Author: zwq * @Author: zwq
* @Date: 2021-11-15 08:20:28 * @Date: 2021-11-15 08:20:28
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-12-17 14:51:08 * @LastEditTime: 2021-12-16 10:25:29
* @Description: * @Description:
*/ */
/** /**
@ -65,12 +65,8 @@ const mainRoutes = {
{ path: '/energy-electric', component: _import('energy/electric'), name: 'energy-electric', meta: { title: '用电能源分析', isTab: true } }, { path: '/energy-electric', component: _import('energy/electric'), name: 'energy-electric', meta: { title: '用电能源分析', isTab: true } },
{ path: '/energy-kiln-electric', component: _import('energy/kiln-electric'), name: 'energy-kiln-electric', meta: { title: '窑炉用电分析', isTab: true } }, { path: '/energy-kiln-electric', component: _import('energy/kiln-electric'), name: 'energy-kiln-electric', meta: { title: '窑炉用电分析', isTab: true } },
{ path: '/energy-ammonia', component: _import('energy/ammonia'), name: 'energy-ammonia', meta: { title: '氨气流量分析', isTab: true } }, { path: '/energy-ammonia', component: _import('energy/ammonia'), name: 'energy-ammonia', meta: { title: '氨气流量分析', isTab: true } },
{ path: '/energy-methanol', component: _import('energy/methanol'), name: 'energy-methanol', meta: { title: '甲醇流量分析', isTab: true } },
{ path: '/energy-propane', component: _import('energy/propane'), name: 'energy-propane', meta: { title: '丙烷流量分析', isTab: true } },
{ path: '/energy-nitrogen', component: _import('energy/nitrogen'), name: 'energy-nitrogen', meta: { title: '氮气流量分析', isTab: true } }, { path: '/energy-nitrogen', component: _import('energy/nitrogen'), name: 'energy-nitrogen', meta: { title: '氮气流量分析', isTab: true } },
{ path: '/energy-electric-acquisition', component: _import('energy/electric-acquisition'), name: 'energy-electric-acquisition', meta: { title: '电能采集数据', isTab: true } }, { path: '/energy-electric-acquisition', component: _import('energy/electric-acquisition'), name: 'energy-electric-acquisition', meta: { title: '电能采集数据', isTab: true } },
{ path: '/energy-gas-acquisition', component: _import('energy/gas-acquisition'), name: 'energy-gas-acquisition', meta: { title: '用气采集数据', isTab: true } },
{ path: '/energy-temperature-acquisition', component: _import('energy/temperature-acquisition'), name: 'energy-temperature-acquisition', meta: { title: '温度采集数据', isTab: true } },
{ path: '/energy-process-temperature', component: _import('energy/process-temperature'), name: 'energy-process-temperature', meta: { title: '窑炉加工温度', isTab: true } }, { path: '/energy-process-temperature', component: _import('energy/process-temperature'), name: 'energy-process-temperature', meta: { title: '窑炉加工温度', isTab: true } },
{ path: '/energy-sump-temperature', component: _import('energy/sump-temperature'), name: 'energy-sump-temperature', meta: { title: '油槽温度', isTab: true } }, { path: '/energy-sump-temperature', component: _import('energy/sump-temperature'), name: 'energy-sump-temperature', meta: { title: '油槽温度', isTab: true } },
{ path: '/energy-ammonia-analysis', component: _import('energy/ammonia-analysis'), name: 'energy-ammonia-analysis', meta: { title: '使用氮气分析', isTab: true } }, { path: '/energy-ammonia-analysis', component: _import('energy/ammonia-analysis'), name: 'energy-ammonia-analysis', meta: { title: '使用氮气分析', isTab: true } },

View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-17 15:49:18 * @Date: 2021-11-17 15:49:18
* @LastEditors: gtz * @LastEditors: zwq
* @LastEditTime: 2021-12-17 17:02:25 * @LastEditTime: 2021-11-17 15:58:31
* @Description: * @Description:
--> -->
<template> <template>
@ -11,9 +11,7 @@
:visible.sync="visible"> :visible.sync="visible">
<el-table <el-table
:data="dataList" :data="dataList"
v-loading="formLoading" border
:stripe="true"
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
type="index" type="index"
@ -23,19 +21,19 @@
width="50"> width="50">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="idenCardNum" prop="id"
header-align="center" header-align="center"
align="center" align="center"
label="标识卡"> label="标识卡">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="customer" prop="id1"
header-align="center" header-align="center"
align="center" align="center"
label="客户信息"> label="客户信息">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="quantity" prop="number"
header-align="center" header-align="center"
align="center" align="center"
label="数量"> label="数量">
@ -58,27 +56,24 @@
data () { data () {
return { return {
visible: false, visible: false,
dataList: [], dataList: []
formLoading: false
} }
}, },
methods: { methods: {
init (id) { init (id) {
this.visible = true this.visible = true
this.formLoading = true
this.$nextTick(() => { this.$nextTick(() => {
if (id) { if (id) {
this.$http({ this.$http({
url: this.$http.adornUrl(`/outStock/get`), url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
method: 'post', method: 'get',
data: this.$http.adornData({ id }) params: this.$http.adornParams()
}).then(({data}) => { }).then(({data}) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataForm = data.data this.dataForm.paramKey = data.config.paramKey
} else { this.dataForm.paramValue = data.config.paramValue
this.$message.error(data.msg) this.dataForm.remark = data.config.remark
} }
this.formLoading = false
}) })
} }
}) })

View File

@ -1,24 +1,40 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-15 15:17:30 * @Date: 2021-11-15 15:17:30
* @LastEditors: gtz * @LastEditors: zwq
* @LastEditTime: 2021-12-17 17:05:22 * @LastEditTime: 2021-11-17 16:07:04
* @Description: * @Description:
--> -->
<template> <template>
<div v-loading="dataListLoading"> <div>
<div class="mainDiv" style="margin:10px 0 100px"> <div class="mainDiv" style="margin:10px 0 100px">
<div class="flexDiv">
<div <div
class="wareBox" class="wareBox"
:class="[ :class="[
item.empty === 1 ? 'enableBox' : 'disableBox', count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
{ active: item.locationId === isActive } { active: count === isActive }
]" ]"
@click="selectBox(item.locationId)" @click="selectBox(count)"
v-for="item in warehouseList" v-for="count in 10"
:key="item.locationId" v-bind:key="count"
> >
<div class="plat">{{ item.locationName }}</div> <div class="plat">库位{{ count }}</div>
</div>
</div>
<div class="flexDiv">
<div
class="wareBox"
:class="[
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
{ active: count + 10 === isActive }
]"
@click="selectBox(count + 10)"
v-for="count in 10"
v-bind:key="count"
>
<div class="plat">库位{{ count + 10 }}</div>
</div>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
@ -43,66 +59,31 @@ export default {
data () { data () {
return { return {
isActive: '', isActive: '',
ExWarehouseInfoVisible: false, ExWarehouseInfoVisible: false
dataListLoading: false,
warehouseList: []
} }
}, },
components: { components: {
ExWarehouseInfo ExWarehouseInfo
}, },
created () { created () {},
this.getWarehouseList()
},
methods: { methods: {
getWarehouseList () { selectBox (count) {
this.dataListLoading = true this.isActive = count
this.$http({
url: this.$http.adornUrl('/outStock/list'),
method: 'post'
}).then(({data}) => {
if (data && data.code === 0) {
this.warehouseList = data.data
} else {
this.warehouseList = []
}
this.dataListLoading = false
})
},
selectBox (id) {
this.isActive = id
this.ExWarehouseInfoVisible = true this.ExWarehouseInfoVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.ExWarehouseInfoRef.init(id) this.$refs.ExWarehouseInfoRef.init()
}) })
}, },
selectPlat (count) { selectPlat (count) {
if (this.isActive) { if (this.isActive) {
this.$confirm(`确认从库位id为[${this.isActive}]出库至提升台${count}?`, '提示', { this.$confirm(`确认从库位${this.isActive}出库至提升台${count}?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'info ' type: 'info '
}).then(() => { }).then(() => {
this.$http({
url: this.$http.adornUrl('/outStock/runOutTask'),
method: 'post',
data: this.$http.adornData({
code: count,
localtionId: this.isActive
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({ this.$message({
type: 'success', type: 'success',
message: '出库成功!', message: '出库成功!'
onClose: () => {
this.getWarehouseList()
}
})
} else {
this.$message.error(data.msg)
}
this.dataListLoading = false
}) })
}).catch(() => { }).catch(() => {
this.$message({ this.$message({
@ -151,7 +132,6 @@ export default {
.wareBox { .wareBox {
cursor: pointer; cursor: pointer;
margin: 10px; margin: 10px;
width: 100px;
height: 100px; height: 100px;
padding: 10px; padding: 10px;
line-height: 90px; line-height: 90px;

View File

@ -1,275 +1,319 @@
<!--
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: zwq
* @LastEditTime: 2021-12-17 16:10:47
* @Description:
-->
<template> <template>
<div class="chart-container"> <div class="mod-config">
<el-row> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-col :span="2"> <el-form-item>
<div class="kiln-electric-treebox"> <el-radio-group size="small" v-model="dataForm.type" @change="changeType">
<el-tree <el-radio-button label="日" />
:data="yaoluList" <el-radio-button label="周" />
@node-click="handleNode" <el-radio-button label="月" />
:highlight-current="true" <el-radio-button label="年" />
/>
</div>
</el-col>
<el-col :span="22">
<el-card class="base-container" style="min-height: 540px">
<el-row style="z-index: 10;float:right;margin-right:20px">
<el-radio-group
style="margin: 0 20px; position:relative; bottom: 2px"
size="small"
v-model="eleType"
@change="changeEleType"
>
<el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item>
<el-form-item size="small" label="选择时间">
<el-date-picker <el-date-picker
size="small" v-model="dataForm.date"
v-model="date" :type="datePickerType[dataForm.type].type"
:type="datePickerType[eleType].type" :format="datePickerType[dataForm.type].format"
:format="datePickerType[eleType].format" :placeholder="'选择' + datePickerType[dataForm.type].placeholder"
:placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
<el-button size="small" @click="getDataList()"> </el-form-item>
<icon-svg class="iconClass" name="sousuo"></icon-svg> <el-form-item>
查询 <el-button @click="getDataList()">查询</el-button>
</el-button> </el-form-item>
</el-row> </el-form>
<el-col style="height: 600px">
<el-table <el-table
:data="dataList" :data="dataList"
:stripe="true" border
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
height: '56px'
}"
v-loading="dataListLoading" v-loading="dataListLoading"
style="width: 100%;padding:20px" style="width: 100%;">
>
<el-table-column <el-table-column
type="index" prop="time"
header-align="center" header-align="center"
align="center" align="center"
label="序号" label="时间"
width="50" />
>
</el-table-column>
<el-table-column <el-table-column
prop="createTime" v-for="item in yaoluList"
:prop="item.id"
header-align="center" header-align="center"
align="center" align="center"
label="采集时间" :label="item.name"
> :key="item.id"
</el-table-column> />
<el-table-column prop="vehicleName" label="A相电压">
</el-table-column>
<el-table-column prop="code" label="B相电压"> </el-table-column>
<el-table-column prop="vehicleAlias" label="C相电压">
</el-table-column>
<el-table-column prop="anqi" label="A相电流"> </el-table-column>
<el-table-column prop="anqi" label="B相电流"> </el-table-column>
<el-table-column prop="anqi" label="C相电流"> </el-table-column>
<el-table-column prop="anqi" label="功率值"> </el-table-column>
</el-table> </el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</el-col>
</el-card>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <script>
//
const yaoluList = [
{
id: '1',
name: '窑炉1',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '2',
name: '窑炉2',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '3',
name: '窑炉3',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '4',
name: '窑炉4',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '5',
name: '窑炉5',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '6',
name: '窑炉6',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '7',
name: '窑炉7',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '8',
name: '窑炉8',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '9',
name: '窑炉9',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '10',
name: '窑炉10',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
},
{
id: '11',
name: '窑炉11',
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
]
}
]
// //
const datePickerType = { const datePickerType = {
: { '日': {
type: 'date', type: 'date',
format: '', format: '',
placeholder: '日期' placeholder: '日期'
}, },
: { '周': {
type: 'week', type: 'week',
format: 'yyyy 第 WW 周', format: 'yyyy 第 WW 周',
placeholder: '周' placeholder: '周'
}, },
: { '月': {
type: 'month', type: 'month',
format: '', format: '',
placeholder: '月' placeholder: '月'
}, },
: { '年': {
type: 'year', type: 'year',
format: '', format: '',
placeholder: '年' placeholder: '年'
} }
} }
//
const yaoluList = [
{
id: 1,
label: '窑炉1'
},
{
id: 2,
label: '窑炉2'
},
{
id: 3,
label: '窑炉3'
},
{
id: 4,
label: '窑炉4'
},
{
id: 5,
label: '窑炉5'
},
{
id: 6,
label: '窑炉6'
},
{
id: 7,
label: '窑炉7'
},
{
id: 8,
label: '窑炉8'
},
{
id: 9,
label: '窑炉9'
},
{
id: 10,
label: '窑炉10'
},
{
id: 11,
label: '窑炉11'
}
]
export default { export default {
name: 'gas-acquisition',
data () { data () {
return { return {
datePickerType, dataForm: {
yaoluList, type: '日',
date: new Date(), date: new Date()
eleType: '年', },
showId: 0,
yaoluIndex: 0,
yaoluName: '',
dataList: [], dataList: [],
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
dataListLoading: false dataListLoading: false,
orderDetailVisible: false,
yaoluList,
datePickerType
} }
}, },
mounted () { created () {
this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
},
activated () {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
// //
getDataList () { getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/vehicle/page'),
method: 'post',
data: this.$http.adornData({
'current': this.pageIndex,
'size': this.pageSize
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.data.records
this.totalPage = data.data.total
} else {
this.dataList = [] this.dataList = []
this.totalPage = 0 this.dataListLoading = true
} this.yaoluList.map((item, index) => {
this.dataListLoading = false if (index === 0) {
item.data.map(i => {
this.dataList.push({
time: i.time,
[item.id]: i.value
})
})
} else {
item.data.map((i, idx) => {
this.dataList[idx][item.id] = i.value
}) })
},
changeEleType (v) {
switch (v) {
case '日':
this.date = new Date()
break
case '周':
this.date = new Date()
break
case '月':
this.date = new Date()
break
case '年':
this.date = new Date()
break
} }
})
this.dataListLoading = false
}, },
// //
sizeChangeHandle (val) { changeType (v) {}
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
handleNode (obj, node, e) {
if (!obj.children) {
this.showId = obj.id
this.yaoluName = obj.label
}
}
} }
} }
</script> </script>
<style lang="scss" scoped>
.chart-container {
position: relative;
width: 100%;
min-height: calc(100vh - 138px);
}
</style>
<style lang="scss">
.chart-container {
.el-tabs__item {
height: 120px;
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
line-height: 120px;
}
}
</style>

View File

@ -1,272 +0,0 @@
<!--
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: zwq
* @LastEditTime: 2021-12-17 16:01:13
* @Description:
-->
<template>
<div class="chart-container">
<el-row>
<el-col :span="2">
<div class="kiln-electric-treebox">
<el-tree
:data="yaoluList"
@node-click="handleNode"
:highlight-current="true"
/>
</div>
</el-col>
<el-col :span="22">
<el-card class="base-container" style="min-height: 540px">
<el-row style="z-index: 10;float:right;margin-right:20px">
<el-radio-group
style="margin: 0 20px; position:relative; bottom: 2px"
size="small"
v-model="eleType"
@change="changeEleType"
>
<el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button>
</el-radio-group>
<el-date-picker
size="small"
v-model="date"
:type="datePickerType[eleType].type"
:format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder"
/>
<el-button size="small" @click="getDataList()">
<icon-svg class="iconClass" name="sousuo"></icon-svg>
查询
</el-button>
</el-row>
<el-col style="height: 600px">
<el-table
:data="dataList"
:stripe="true"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
height: '56px'
}"
v-loading="dataListLoading"
style="width: 100%;padding:20px"
>
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50"
>
</el-table-column>
<el-table-column
prop="createTime"
header-align="center"
align="center"
label="采集时间"
>
</el-table-column>
<el-table-column prop="vehicleName" label="氮气流量">
</el-table-column>
<el-table-column prop="code" label="甲醇流量"> </el-table-column>
<el-table-column prop="vehicleAlias" label="丙烷流量">
</el-table-column>
<el-table-column prop="anqi" label="氨气流量"> </el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</el-col>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
//
const datePickerType = {
: {
type: 'date',
format: '',
placeholder: '日期'
},
: {
type: 'week',
format: 'yyyy 第 WW 周',
placeholder: '周'
},
: {
type: 'month',
format: '',
placeholder: '月'
},
: {
type: 'year',
format: '',
placeholder: '年'
}
}
//
const yaoluList = [
{
id: 1,
label: '窑炉1'
},
{
id: 2,
label: '窑炉2'
},
{
id: 3,
label: '窑炉3'
},
{
id: 4,
label: '窑炉4'
},
{
id: 5,
label: '窑炉5'
},
{
id: 6,
label: '窑炉6'
},
{
id: 7,
label: '窑炉7'
},
{
id: 8,
label: '窑炉8'
},
{
id: 9,
label: '窑炉9'
},
{
id: 10,
label: '窑炉10'
},
{
id: 11,
label: '窑炉11'
}
]
export default {
name: 'gas-acquisition',
data () {
return {
datePickerType,
yaoluList,
date: new Date(),
eleType: '年',
showId: 0,
yaoluIndex: 0,
yaoluName: '',
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false
}
},
mounted () {
this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
},
activated () {
this.getDataList()
},
methods: {
//
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/vehicle/page'),
method: 'post',
data: this.$http.adornData({
'current': this.pageIndex,
'size': this.pageSize
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.data.records
this.totalPage = data.data.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
changeEleType (v) {
switch (v) {
case '日':
this.date = new Date()
break
case '周':
this.date = new Date()
break
case '月':
this.date = new Date()
break
case '年':
this.date = new Date()
break
}
},
//
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
handleNode (obj, node, e) {
if (!obj.children) {
this.showId = obj.id
this.yaoluName = obj.label
}
}
}
}
</script>
<style lang="scss" scoped>
.chart-container {
position: relative;
width: 100%;
min-height: calc(100vh - 138px);
}
</style>
<style lang="scss">
.chart-container {
.el-tabs__item {
height: 120px;
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
line-height: 120px;
}
}
</style>

View File

@ -1,737 +0,0 @@
<!--
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: zwq
* @LastEditTime: 2021-12-17 15:08:06
* @Description:
-->
<template>
<div class="chart-container">
<el-row>
<el-col :span="2">
<div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" />
</div>
</el-col>
<el-col :span="22">
<el-row>
<el-col :span="8">
<el-card class="base-container" style="height: 214px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>甲醇流量分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0">
<p
:title="'甲醇流量立方米123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="甲醇"></icon-svg>
甲醇流量立方米<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日甲醇流量(立方米)1145</p>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" />
</el-checkbox-group>
<el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button>
</el-radio-group>
<el-date-picker
size="small"
v-model="date"
:type="datePickerType[eleType].type"
:format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder"
/>
</el-row>
<el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="甲醇使用量(㎡)" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import Chart from '@/components/Charts/MixChart'
import ringChart from '@/components/Charts/RingChart'
import lineChart from '@/components/Charts/LineChart.1'
//
const eleDayList = [
{ time: '01:00', value: 22 },
{ time: '02:00', value: 12 },
{ time: '03:00', value: 32 },
{ time: '04:00', value: 52 },
{ time: '05:00', value: 22 },
{ time: '06:00', value: 12 },
{ time: '07:00', value: 42 },
{ time: '08:00', value: 32 },
{ time: '09:00', value: 22 },
{ time: '10:00', value: 12 },
{ time: '11:00', value: 12 },
{ time: '12:00', value: 52 },
{ time: '13:00', value: 62 },
{ time: '14:00', value: 62 },
{ time: '15:00', value: 32 },
{ time: '16:00', value: 22 },
{ time: '17:00', value: 12 },
{ time: '18:00', value: 2 },
{ time: '19:00', value: 92 },
{ time: '20:00', value: 12 },
{ time: '21:00', value: 52 },
{ time: '22:00', value: 26 },
{ time: '23:00', value: 21 },
{ time: '24:00', value: 28 }
]
//
const lastEleDayList = [
{ time: '01:00', value: 22 },
{ time: '02:00', value: 62 },
{ time: '03:00', value: 23 },
{ time: '04:00', value: 25 },
{ time: '05:00', value: 72 },
{ time: '06:00', value: 21 },
{ time: '07:00', value: 24 },
{ time: '08:00', value: 23 },
{ time: '09:00', value: 20 },
{ time: '10:00', value: 14 },
{ time: '11:00', value: 18 },
{ time: '12:00', value: 72 },
{ time: '13:00', value: 22 },
{ time: '14:00', value: 12 },
{ time: '15:00', value: 62 },
{ time: '16:00', value: 72 },
{ time: '17:00', value: 22 },
{ time: '18:00', value: 46 },
{ time: '19:00', value: 52 },
{ time: '20:00', value: 22 },
{ time: '21:00', value: 25 },
{ time: '22:00', value: 62 },
{ time: '23:00', value: 12 },
{ time: '24:00', value: 82 }
]
//
const eleWeekList = [
{ time: '周日', value: 22 },
{ time: '周一', value: 12 },
{ time: '周二', value: 32 },
{ time: '周三', value: 52 },
{ time: '周四', value: 22 },
{ time: '周五', value: 12 },
{ time: '周六', value: 42 }
]
//
const lastEleWeekList = [
{ time: '周日', value: 111 },
{ time: '周一', value: 72 },
{ time: '周二', value: 312 },
{ time: '周三', value: 52 },
{ time: '周四', value: 82 },
{ time: '周五', value: 152 },
{ time: '周六', value: 52 }
]
//
const eleMonthList = [
{ time: '1日', value: 12 },
{ time: '2日', value: 12 },
{ time: '3日', value: 32 },
{ time: '4日', value: 52 },
{ time: '5日', value: 22 },
{ time: '6日', value: 12 },
{ time: '7日', value: 42 },
{ time: '8日', value: 32 },
{ time: '9日', value: 75 },
{ time: '10日', value: 124 },
{ time: '11日', value: 234 },
{ time: '12日', value: 542 },
{ time: '13日', value: 644 },
{ time: '14日', value: 62 },
{ time: '15日', value: 32 },
{ time: '16日', value: 565 },
{ time: '17日', value: 12 },
{ time: '18日', value: 2 },
{ time: '19日', value: 92 },
{ time: '20日', value: 12 },
{ time: '21日', value: 52 },
{ time: '22日', value: 176 },
{ time: '23日', value: 21 },
{ time: '24日', value: 64 },
{ time: '25日', value: 92 },
{ time: '26日', value: 124 },
{ time: '27日', value: 44 },
{ time: '28日', value: 226 },
{ time: '29日', value: 17 },
{ time: '30日', value: 28 }
]
//
const lastEleMonthList = [
{ time: '1日', value: 22 },
{ time: '2日', value: 236 },
{ time: '3日', value: 32 },
{ time: '4日', value: 312 },
{ time: '5日', value: 22 },
{ time: '6日', value: 12 },
{ time: '7日', value: 42 },
{ time: '8日', value: 32 },
{ time: '9日', value: 22 },
{ time: '10日', value: 84 },
{ time: '11日', value: 25 },
{ time: '12日', value: 52 },
{ time: '13日', value: 122 },
{ time: '14日', value: 62 },
{ time: '15日', value: 32 },
{ time: '16日', value: 22 },
{ time: '17日', value: 12 },
{ time: '18日', value: 2 },
{ time: '19日', value: 92 },
{ time: '20日', value: 12 },
{ time: '21日', value: 52 },
{ time: '22日', value: 26 },
{ time: '23日', value: 81 },
{ time: '24日', value: 28 },
{ time: '25日', value: 52 },
{ time: '26日', value: 12 },
{ time: '27日', value: 47 },
{ time: '28日', value: 12 },
{ time: '29日', value: 21 },
{ time: '30日', value: 28 }
]
//
const eleYearList = [
{ time: '1月', value: 256 },
{ time: '2月', value: 12 },
{ time: '3月', value: 32 },
{ time: '4月', value: 52 },
{ time: '5月', value: 22 },
{ time: '6月', value: 12 },
{ time: '7月', value: 42 },
{ time: '8月', value: 32 },
{ time: '9月', value: 22 },
{ time: '10月', value: 12 },
{ time: '11月', value: 12 },
{ time: '12月', value: 52 }
]
//
const lastEleYearList = [
{ time: '1月', value: 22 },
{ time: '2月', value: 12 },
{ time: '3月', value: 42 },
{ time: '4月', value: 52 },
{ time: '5月', value: 224 },
{ time: '6月', value: 12 },
{ time: '7月', value: 42 },
{ time: '8月', value: 32 },
{ time: '9月', value: 44 },
{ time: '10月', value: 12 },
{ time: '11月', value: 168 },
{ time: '12月', value: 51 }
]
//
const datePickerType = {
'日': {
type: 'date',
format: '',
placeholder: '日期'
},
'周': {
type: 'week',
format: 'yyyy 第 WW 周',
placeholder: '周'
},
'月': {
type: 'month',
format: '',
placeholder: '月'
},
'年': {
type: 'year',
format: '',
placeholder: '年'
}
}
//
const yaoluList = [
{
id: 1,
label: '窑炉1',
value: 63,
percent: 11,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 2,
label: '窑炉2',
value: 44,
percent: 8,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 3,
label: '窑炉3',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 4,
label: '窑炉4',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 5,
label: '窑炉5',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 6,
label: '窑炉6',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 7,
label: '窑炉7',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 8,
label: '窑炉8',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 9,
label: '窑炉9',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 10,
label: '窑炉10',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 11,
label: '窑炉11',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
}
]
export default {
name: 'methanol',
components: { Chart, ringChart, lineChart },
data () {
return {
eleDayList,
eleWeekList,
eleMonthList,
eleYearList,
lastEleDayList,
lastEleWeekList,
lastEleMonthList,
lastEleYearList,
datePickerType,
yaoluList,
date: new Date(),
dataList: [],
lastDataList: [],
chartType: ['柱状'],
eleType: '年',
showId: 0,
yaoluIndex: 0,
yaoluName: ''
}
},
mounted () {
this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
},
methods: {
changeEleType (v) {
switch (v) {
case '日':
this.dataList = this.eleDayList
this.lastDataList = this.lastEleDayList
this.date = new Date()
break
case '周':
this.dataList = this.eleWeekList
this.lastDataList = this.lastEleWeekList
this.date = new Date()
break
case '月':
this.dataList = this.eleMonthList
this.lastDataList = this.lastEleMonthList
this.date = new Date()
break
case '年':
this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList
this.date = new Date()
break
}
},
handleNode (obj, node, e) {
if (!(obj.children)) {
this.showId = obj.id
this.yaoluName = obj.label
}
}
}
}
</script>
<style lang="scss" scoped>
.chart-container {
position: relative;
width: 100%;
min-height: calc(100vh - 138px);
}
</style>
<style lang="scss">
.chart-container {
.el-tabs__item{
height: 120px;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
line-height: 120px;
}
}
</style>

View File

@ -1,737 +0,0 @@
<!--
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: zwq
* @LastEditTime: 2021-12-17 15:08:36
* @Description:
-->
<template>
<div class="chart-container">
<el-row>
<el-col :span="2">
<div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" />
</div>
</el-col>
<el-col :span="22">
<el-row>
<el-col :span="8">
<el-card class="base-container" style="height: 214px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>丙烷流量分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0">
<p
:title="'丙烷流量立方米123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="丙烷"></icon-svg>
丙烷流量立方米<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日丙烷流量(立方米)1145</p>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" />
</el-checkbox-group>
<el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button>
</el-radio-group>
<el-date-picker
size="small"
v-model="date"
:type="datePickerType[eleType].type"
:format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder"
/>
</el-row>
<el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="丙烷使用量(㎡)" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import Chart from '@/components/Charts/MixChart'
import ringChart from '@/components/Charts/RingChart'
import lineChart from '@/components/Charts/LineChart.1'
//
const eleDayList = [
{ time: '01:00', value: 22 },
{ time: '02:00', value: 12 },
{ time: '03:00', value: 32 },
{ time: '04:00', value: 52 },
{ time: '05:00', value: 22 },
{ time: '06:00', value: 12 },
{ time: '07:00', value: 42 },
{ time: '08:00', value: 32 },
{ time: '09:00', value: 22 },
{ time: '10:00', value: 12 },
{ time: '11:00', value: 12 },
{ time: '12:00', value: 52 },
{ time: '13:00', value: 62 },
{ time: '14:00', value: 62 },
{ time: '15:00', value: 32 },
{ time: '16:00', value: 22 },
{ time: '17:00', value: 12 },
{ time: '18:00', value: 2 },
{ time: '19:00', value: 92 },
{ time: '20:00', value: 12 },
{ time: '21:00', value: 52 },
{ time: '22:00', value: 26 },
{ time: '23:00', value: 21 },
{ time: '24:00', value: 28 }
]
//
const lastEleDayList = [
{ time: '01:00', value: 22 },
{ time: '02:00', value: 62 },
{ time: '03:00', value: 23 },
{ time: '04:00', value: 25 },
{ time: '05:00', value: 72 },
{ time: '06:00', value: 21 },
{ time: '07:00', value: 24 },
{ time: '08:00', value: 23 },
{ time: '09:00', value: 20 },
{ time: '10:00', value: 14 },
{ time: '11:00', value: 18 },
{ time: '12:00', value: 72 },
{ time: '13:00', value: 22 },
{ time: '14:00', value: 12 },
{ time: '15:00', value: 62 },
{ time: '16:00', value: 72 },
{ time: '17:00', value: 22 },
{ time: '18:00', value: 46 },
{ time: '19:00', value: 52 },
{ time: '20:00', value: 22 },
{ time: '21:00', value: 25 },
{ time: '22:00', value: 62 },
{ time: '23:00', value: 12 },
{ time: '24:00', value: 82 }
]
//
const eleWeekList = [
{ time: '周日', value: 22 },
{ time: '周一', value: 12 },
{ time: '周二', value: 32 },
{ time: '周三', value: 52 },
{ time: '周四', value: 22 },
{ time: '周五', value: 12 },
{ time: '周六', value: 42 }
]
//
const lastEleWeekList = [
{ time: '周日', value: 111 },
{ time: '周一', value: 72 },
{ time: '周二', value: 312 },
{ time: '周三', value: 52 },
{ time: '周四', value: 82 },
{ time: '周五', value: 152 },
{ time: '周六', value: 52 }
]
//
const eleMonthList = [
{ time: '1日', value: 12 },
{ time: '2日', value: 12 },
{ time: '3日', value: 32 },
{ time: '4日', value: 52 },
{ time: '5日', value: 22 },
{ time: '6日', value: 12 },
{ time: '7日', value: 42 },
{ time: '8日', value: 32 },
{ time: '9日', value: 75 },
{ time: '10日', value: 124 },
{ time: '11日', value: 234 },
{ time: '12日', value: 542 },
{ time: '13日', value: 644 },
{ time: '14日', value: 62 },
{ time: '15日', value: 32 },
{ time: '16日', value: 565 },
{ time: '17日', value: 12 },
{ time: '18日', value: 2 },
{ time: '19日', value: 92 },
{ time: '20日', value: 12 },
{ time: '21日', value: 52 },
{ time: '22日', value: 176 },
{ time: '23日', value: 21 },
{ time: '24日', value: 64 },
{ time: '25日', value: 92 },
{ time: '26日', value: 124 },
{ time: '27日', value: 44 },
{ time: '28日', value: 226 },
{ time: '29日', value: 17 },
{ time: '30日', value: 28 }
]
//
const lastEleMonthList = [
{ time: '1日', value: 22 },
{ time: '2日', value: 236 },
{ time: '3日', value: 32 },
{ time: '4日', value: 312 },
{ time: '5日', value: 22 },
{ time: '6日', value: 12 },
{ time: '7日', value: 42 },
{ time: '8日', value: 32 },
{ time: '9日', value: 22 },
{ time: '10日', value: 84 },
{ time: '11日', value: 25 },
{ time: '12日', value: 52 },
{ time: '13日', value: 122 },
{ time: '14日', value: 62 },
{ time: '15日', value: 32 },
{ time: '16日', value: 22 },
{ time: '17日', value: 12 },
{ time: '18日', value: 2 },
{ time: '19日', value: 92 },
{ time: '20日', value: 12 },
{ time: '21日', value: 52 },
{ time: '22日', value: 26 },
{ time: '23日', value: 81 },
{ time: '24日', value: 28 },
{ time: '25日', value: 52 },
{ time: '26日', value: 12 },
{ time: '27日', value: 47 },
{ time: '28日', value: 12 },
{ time: '29日', value: 21 },
{ time: '30日', value: 28 }
]
//
const eleYearList = [
{ time: '1月', value: 256 },
{ time: '2月', value: 12 },
{ time: '3月', value: 32 },
{ time: '4月', value: 52 },
{ time: '5月', value: 22 },
{ time: '6月', value: 12 },
{ time: '7月', value: 42 },
{ time: '8月', value: 32 },
{ time: '9月', value: 22 },
{ time: '10月', value: 12 },
{ time: '11月', value: 12 },
{ time: '12月', value: 52 }
]
//
const lastEleYearList = [
{ time: '1月', value: 22 },
{ time: '2月', value: 12 },
{ time: '3月', value: 42 },
{ time: '4月', value: 52 },
{ time: '5月', value: 224 },
{ time: '6月', value: 12 },
{ time: '7月', value: 42 },
{ time: '8月', value: 32 },
{ time: '9月', value: 44 },
{ time: '10月', value: 12 },
{ time: '11月', value: 168 },
{ time: '12月', value: 51 }
]
//
const datePickerType = {
'日': {
type: 'date',
format: '',
placeholder: '日期'
},
'周': {
type: 'week',
format: 'yyyy 第 WW 周',
placeholder: '周'
},
'月': {
type: 'month',
format: '',
placeholder: '月'
},
'年': {
type: 'year',
format: '',
placeholder: '年'
}
}
//
const yaoluList = [
{
id: 1,
label: '窑炉1',
value: 63,
percent: 11,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 2,
label: '窑炉2',
value: 44,
percent: 8,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 3,
label: '窑炉3',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 4,
label: '窑炉4',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 5,
label: '窑炉5',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 6,
label: '窑炉6',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 7,
label: '窑炉7',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 8,
label: '窑炉8',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 9,
label: '窑炉9',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 10,
label: '窑炉10',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
},
{
id: 11,
label: '窑炉11',
value: 56,
percent: 9,
data: [
{ time: '0:00', value: 24 },
{ time: '2:00', value: 43 },
{ time: '4:00', value: 33 },
{ time: '6:00', value: 25 },
{ time: '8:00', value: 44 },
{ time: '10:00', value: 46 },
{ time: '12:00', value: 16 },
{ time: '14:00', value: 47 },
{ time: '16:00', value: 86 },
{ time: '18:00', value: 22 },
{ time: '20:00', value: 25 },
{ time: '22:00', value: 27 }
],
lastData: [
{ time: '0:00', value: 54 },
{ time: '2:00', value: 13 },
{ time: '4:00', value: 63 },
{ time: '6:00', value: 85 },
{ time: '8:00', value: 14 },
{ time: '10:00', value: 26 },
{ time: '12:00', value: 56 },
{ time: '14:00', value: 37 },
{ time: '16:00', value: 36 },
{ time: '18:00', value: 12 },
{ time: '20:00', value: 35 },
{ time: '22:00', value: 17 }
]
}
]
export default {
name: 'propane',
components: { Chart, ringChart, lineChart },
data () {
return {
eleDayList,
eleWeekList,
eleMonthList,
eleYearList,
lastEleDayList,
lastEleWeekList,
lastEleMonthList,
lastEleYearList,
datePickerType,
yaoluList,
date: new Date(),
dataList: [],
lastDataList: [],
chartType: ['柱状'],
eleType: '年',
showId: 0,
yaoluIndex: 0,
yaoluName: ''
}
},
mounted () {
this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
},
methods: {
changeEleType (v) {
switch (v) {
case '日':
this.dataList = this.eleDayList
this.lastDataList = this.lastEleDayList
this.date = new Date()
break
case '周':
this.dataList = this.eleWeekList
this.lastDataList = this.lastEleWeekList
this.date = new Date()
break
case '月':
this.dataList = this.eleMonthList
this.lastDataList = this.lastEleMonthList
this.date = new Date()
break
case '年':
this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList
this.date = new Date()
break
}
},
handleNode (obj, node, e) {
if (!(obj.children)) {
this.showId = obj.id
this.yaoluName = obj.label
}
}
}
}
</script>
<style lang="scss" scoped>
.chart-container {
position: relative;
width: 100%;
min-height: calc(100vh - 138px);
}
</style>
<style lang="scss">
.chart-container {
.el-tabs__item{
height: 120px;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
line-height: 120px;
}
}
</style>

View File

@ -1,274 +0,0 @@
<!--
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: zwq
* @LastEditTime: 2021-12-17 16:11:06
* @Description:
-->
<template>
<div class="chart-container">
<el-row>
<el-col :span="2">
<div class="kiln-electric-treebox">
<el-tree
:data="yaoluList"
@node-click="handleNode"
:highlight-current="true"
/>
</div>
</el-col>
<el-col :span="22">
<el-card class="base-container" style="min-height: 540px">
<el-row style="z-index: 10;float:right;margin-right:20px">
<el-radio-group
style="margin: 0 20px; position:relative; bottom: 2px"
size="small"
v-model="eleType"
@change="changeEleType"
>
<el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button>
</el-radio-group>
<el-date-picker
size="small"
v-model="date"
:type="datePickerType[eleType].type"
:format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder"
/>
<el-button size="small" @click="getDataList()">
<icon-svg class="iconClass" name="sousuo"></icon-svg>
查询
</el-button>
</el-row>
<el-col style="height: 600px">
<el-table
:data="dataList"
:stripe="true"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
height: '56px'
}"
v-loading="dataListLoading"
style="width: 100%;padding:20px"
>
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50"
>
</el-table-column>
<el-table-column
prop="createTime"
header-align="center"
align="center"
label="采集时间"
>
</el-table-column>
<el-table-column prop="vehicleName" label="实际温度">
</el-table-column>
<el-table-column prop="code" label="设定温度"> </el-table-column>
<el-table-column prop="vehicleAlias" label="实际碳势">
</el-table-column>
<el-table-column prop="anqi" label="设定碳势"> </el-table-column>
<el-table-column prop="anqi" label="油槽实际温度"> </el-table-column>
<el-table-column prop="anqi" label="油槽设定温度"> </el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</el-col>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
//
const datePickerType = {
: {
type: 'date',
format: '',
placeholder: '日期'
},
: {
type: 'week',
format: 'yyyy 第 WW 周',
placeholder: '周'
},
: {
type: 'month',
format: '',
placeholder: '月'
},
: {
type: 'year',
format: '',
placeholder: '年'
}
}
//
const yaoluList = [
{
id: 1,
label: '窑炉1'
},
{
id: 2,
label: '窑炉2'
},
{
id: 3,
label: '窑炉3'
},
{
id: 4,
label: '窑炉4'
},
{
id: 5,
label: '窑炉5'
},
{
id: 6,
label: '窑炉6'
},
{
id: 7,
label: '窑炉7'
},
{
id: 8,
label: '窑炉8'
},
{
id: 9,
label: '窑炉9'
},
{
id: 10,
label: '窑炉10'
},
{
id: 11,
label: '窑炉11'
}
]
export default {
name: 'gas-acquisition',
data () {
return {
datePickerType,
yaoluList,
date: new Date(),
eleType: '年',
showId: 0,
yaoluIndex: 0,
yaoluName: '',
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false
}
},
mounted () {
this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
},
activated () {
this.getDataList()
},
methods: {
//
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/vehicle/page'),
method: 'post',
data: this.$http.adornData({
'current': this.pageIndex,
'size': this.pageSize
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.data.records
this.totalPage = data.data.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
changeEleType (v) {
switch (v) {
case '日':
this.date = new Date()
break
case '周':
this.date = new Date()
break
case '月':
this.date = new Date()
break
case '年':
this.date = new Date()
break
}
},
//
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
handleNode (obj, node, e) {
if (!obj.children) {
this.showId = obj.id
this.yaoluName = obj.label
}
}
}
}
</script>
<style lang="scss" scoped>
.chart-container {
position: relative;
width: 100%;
min-height: calc(100vh - 138px);
}
</style>
<style lang="scss">
.chart-container {
.el-tabs__item {
height: 120px;
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
line-height: 120px;
}
}
</style>

View File

@ -161,26 +161,6 @@
></icon-svg> ></icon-svg>
<span slot="title">二氧化硫流量分析</span> <span slot="title">二氧化硫流量分析</span>
</el-menu-item> </el-menu-item>
<el-menu-item
index="methanol"
@click="$router.push({ name: 'energy-methanol' })"
>
<icon-svg
name="tubiao"
class="site-sidebar__menu-icon"
></icon-svg>
<span slot="title">甲醇流量分析</span>
</el-menu-item>
<el-menu-item
index="propane"
@click="$router.push({ name: 'energy-propane' })"
>
<icon-svg
name="tubiao"
class="site-sidebar__menu-icon"
></icon-svg>
<span slot="title">丙烷流量分析</span>
</el-menu-item>
<el-menu-item <el-menu-item
index="ammonia" index="ammonia"
@click="$router.push({ name: 'energy-ammonia' })" @click="$router.push({ name: 'energy-ammonia' })"
@ -209,20 +189,6 @@
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg> <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">电能采集数据</span> <span slot="title">电能采集数据</span>
</el-menu-item> </el-menu-item>
<el-menu-item
index="gas-acquisition"
@click="$router.push({ name: 'energy-gas-acquisition' })"
>
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">用气采集数据</span>
</el-menu-item>
<el-menu-item
index="temperature-acquisition"
@click="$router.push({ name: 'energy-temperature-acquisition' })"
>
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">温度采集数据</span>
</el-menu-item>
<el-submenu index="temperature"> <el-submenu index="temperature">
<template slot="title"> <template slot="title">
<icon-svg <icon-svg

View File

@ -1,18 +1,18 @@
<template> <template>
<div class="mod-config"> <div class="mod-log">
<el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<el-select size="small" v-model="dataForm.equipmentId" clearable filterable placeholder="车辆名称"> <el-select v-model="dataForm.key" filterable placeholder="车辆名称">
<el-option <el-option
v-for="item in carList" v-for="item in options"
:key="item.id" :key="item.value"
:label="item.vehicleName" :label="item.label"
:value="item.id" :value="item.value"
> >
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item> <el-form-item>
<el-date-picker <el-date-picker
v-model="dataForm.time" v-model="dataForm.time"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
@ -22,15 +22,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
> >
</el-date-picker> </el-date-picker>
</el-form-item> --> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table
:data="dataList" :data="dataList"
:stripe="true" border
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
v-loading="dataListLoading" v-loading="dataListLoading"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
@ -41,19 +40,27 @@
width="50"> width="50">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="equipmentName" prop="username"
header-align="center"
align="center"
label="车辆名称"> label="车辆名称">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="createTime" prop="operation"
header-align="center"
align="center"
label="报警时间"> label="报警时间">
</el-table-column> </el-table-column>
<!-- <el-table-column
prop="time"
label="报警级别">
</el-table-column> -->
<el-table-column <el-table-column
prop="alarmInfo" prop="time"
header-align="center"
align="center"
label="报警级别">
</el-table-column>
<el-table-column
prop="ip"
header-align="center"
align="center"
label="报警内容"> label="报警内容">
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -74,7 +81,8 @@
data () { data () {
return { return {
dataForm: { dataForm: {
equipmentId: null key: '',
time: []
}, },
dataList: [], dataList: [],
options: [], options: [],
@ -82,49 +90,28 @@
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
dataListLoading: false, dataListLoading: false,
selectionDataList: [], selectionDataList: []
carList: []
} }
}, },
created () { created () {
this.getCarList() this.getDataList()
}, },
methods: { methods: {
//
getCarList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/vehicle/page'),
method: 'post',
data: this.$http.adornData({
current: 1,
size: 999
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.carList = data.data.records
this.getDataList()
} else {
this.carList = []
}
})
},
// //
getDataList () { getDataList () {
this.dataListLoading = true this.dataListLoading = true
this.$http({ this.$http({
url: this.$http.adornUrl('/alarmInfo/page'), url: this.$http.adornUrl('/sys/log/list'),
method: 'post', method: 'get',
data: this.$http.adornData({ params: this.$http.adornParams({
current: this.pageIndex, 'page': this.pageIndex,
size: this.pageSize, 'limit': this.pageSize,
type: 1, 'key': this.dataForm.key
equipmentId: this.dataForm.equipmentId
}) })
}).then(({data}) => { }).then(({data}) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataList = data.data.records this.dataList = data.page.list
this.totalPage = data.data.total this.totalPage = data.page.totalCount
} else { } else {
this.dataList = [] this.dataList = []
this.totalPage = 0 this.totalPage = 0

View File

@ -1,20 +1,23 @@
<template> <template>
<div class="mod-config"> <div class="mod-log">
<el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item> <el-form-item>
<el-select size="small" v-model="dataForm.equipmentId" clearable filterable placeholder="窑炉名称"> <el-select v-model="dataForm.key" filterable placeholder="窑炉名称">
<el-option <el-option
v-for="item in kilnList" v-for="item in options"
:key="item.id" :key="item.value"
:label="item.kilnName" :label="item.label"
:value="item.id" :value="item.value"
> >
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item> <el-form-item>
<el-date-picker <el-date-picker
size="small"
v-model="dataForm.time" v-model="dataForm.time"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
type="daterange" type="daterange"
@ -23,15 +26,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
> >
</el-date-picker> </el-date-picker>
</el-form-item> --> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">查询</el-button> <el-button @click="getDataList()">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table
:data="dataList" :data="dataList"
:stripe="true" border
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
v-loading="dataListLoading" v-loading="dataListLoading"
style="width: 100%" style="width: 100%"
> >
@ -44,22 +46,30 @@
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="equipmentName" prop="username"
header-align="center"
align="center"
label="窑炉名称" label="窑炉名称"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="createTime" prop="operation"
header-align="center"
align="center"
label="报警时间" label="报警时间"
> >
</el-table-column> </el-table-column>
<!-- <el-table-column <el-table-column
prop="time" prop="time"
header-align="center"
align="center"
label="报警级别" label="报警级别"
> --> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="alarmInfo" prop="ip"
header-align="center"
align="center"
label="报警内容" label="报警内容"
> >
</el-table-column> </el-table-column>
@ -82,7 +92,8 @@ export default {
data () { data () {
return { return {
dataForm: { dataForm: {
equipmentId: null key: '',
time: []
}, },
dataList: [], dataList: [],
options: [], options: [],
@ -90,49 +101,28 @@ export default {
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
dataListLoading: false, dataListLoading: false,
selectionDataList: [], selectionDataList: []
kilnList: []
} }
}, },
created () { created () {
this.getKilnList() this.getDataList()
}, },
methods: { methods: {
//
getKilnList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/kilnInfo/page'),
method: 'post',
data: this.$http.adornData({
current: 1,
size: 999
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.kilnList = data.data.records
this.getDataList()
} else {
this.kilnList = []
}
})
},
// //
getDataList () { getDataList () {
this.dataListLoading = true this.dataListLoading = true
this.$http({ this.$http({
url: this.$http.adornUrl('/alarmInfo/page'), url: this.$http.adornUrl('/sys/log/list'),
method: 'post', method: 'get',
data: this.$http.adornData({ params: this.$http.adornParams({
current: this.pageIndex, page: this.pageIndex,
size: this.pageSize, limit: this.pageSize,
type: 0, key: this.dataForm.key
equipmentId: this.dataForm.equipmentId
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataList = data.data.records this.dataList = data.page.list
this.totalPage = data.data.total this.totalPage = data.page.totalCount
} else { } else {
this.dataList = [] this.dataList = []
this.totalPage = 0 this.totalPage = 0