feat: 新效果大屏接口调用
This commit is contained in:
wangjr
parent
cdccfbfdd1
commit
20ca0cd974
1
.env
1
.env
@ -1,3 +1,4 @@
|
||||
NODE_ENV=production
|
||||
VUE_APP_PREVIEW=true
|
||||
VUE_APP_API_BASE_URL=http://localhost:82
|
||||
VUE_APP_API_BASE_URL_PSPACE=https://c3abc956bca5.ngrok-free.app
|
||||
@ -14,35 +14,46 @@ export function productionCommandCenterPage (parameter) {
|
||||
})
|
||||
}
|
||||
|
||||
const commonParams = {
|
||||
charset: 'utf-8',
|
||||
archived: 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 炉温
|
||||
* 产品数据：本月累计产量、回收率、单位单耗
|
||||
*/
|
||||
export function getFurnaceTemperature (parameter) {
|
||||
export function getProductData (parameter) {
|
||||
return axios({
|
||||
url: '/HistAtTime',
|
||||
method: 'post',
|
||||
params: {
|
||||
...parameter,
|
||||
...commonParams
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 功率因数（每月和每小时功率因数，用这个平均值调整时间）
|
||||
*/
|
||||
export function getHistAggreData (parameter) {
|
||||
return axios({
|
||||
url: '/HistAggreData',
|
||||
url: 'scrProduction/driQuery',
|
||||
method: 'get',
|
||||
params: {
|
||||
...parameter,
|
||||
...commonParams
|
||||
}
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全与异常事件
|
||||
*/
|
||||
export function getSafetyExceptionEvent (parameter) {
|
||||
return axios({
|
||||
url: '/scrSecurity/driQuery',
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 各炉号产量贡献
|
||||
*/
|
||||
export function getProductContribution (parameter) {
|
||||
return axios({
|
||||
url: 'scrProduction/driQhQuery',
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 各产品合计产量
|
||||
*/
|
||||
export function getProductTotalProduction (parameter) {
|
||||
return axios({
|
||||
url: 'scrProduction/driMaterQuery',
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!-- 4096*2160版本 6个图表 iframe作为背景-->
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import PieChart from './components/PieChart.vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
|
||||
@ -9,7 +10,19 @@ import {
|
||||
getFurnaceTemperatureChangeRateBar,
|
||||
getEnergyAndElectricityConsumption
|
||||
} from '@/api/modular/largeScreen/pSpaceApi'
|
||||
// import { getFurnaceTemperatureChangeRate } from '@/api/modular/largeScreen/productionCommandCenterManage'
|
||||
import {
|
||||
getProductData,
|
||||
getSafetyExceptionEvent,
|
||||
// getProductContribution,
|
||||
getProductTotalProduction
|
||||
} from '@/api/modular/largeScreen/productionCommandCenterManage'
|
||||
|
||||
const currentDate = moment()
|
||||
const today = currentDate.format('YYYY-MM-DD')
|
||||
const currentMonth = currentDate.format('YYYY-MM')
|
||||
const currentYear = currentDate.format('YYYY')
|
||||
const startOfMonth = currentDate.startOf('month').format('YYYY-MM-DD')
|
||||
const endOfMonth = currentDate.endOf('month').format('YYYY-MM-DD')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -19,6 +32,18 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
today,
|
||||
currentMonth,
|
||||
currentYear,
|
||||
startOfMonth,
|
||||
// 安全与异常事件
|
||||
safetyExceptionEventList: [],
|
||||
// 本月累计产量
|
||||
currentMonthCumulativeProduction: 0,
|
||||
// 产品回收率
|
||||
productRecoveryRate: 0,
|
||||
// 本月累计产量截止时间
|
||||
endOfMonth,
|
||||
// 累计用电量
|
||||
totalElectricityConsumption: 0,
|
||||
// 单位电耗
|
||||
@ -30,30 +55,33 @@ export default {
|
||||
productionData: [
|
||||
{
|
||||
icon: 'icon-guimeng',
|
||||
value: '2,234',
|
||||
name: '硅锰',
|
||||
value: 0,
|
||||
unit: 't',
|
||||
description: '耗电量:999kavrh',
|
||||
silica: '120.05',
|
||||
petroleumCoke: '120.05',
|
||||
lanzhouCoal: '120.05'
|
||||
description: 0,
|
||||
silica: 0,
|
||||
petroleumCoke: 0,
|
||||
lanzhouCoal: 0
|
||||
},
|
||||
{
|
||||
icon: 'icon-getie',
|
||||
value: '10.4',
|
||||
name: '铬铁',
|
||||
value: 0,
|
||||
unit: 't',
|
||||
description: '耗电量:999kavrh',
|
||||
silica: '120.05',
|
||||
petroleumCoke: '120.05',
|
||||
lanzhouCoal: '120.05'
|
||||
description: 0,
|
||||
silica: 0,
|
||||
petroleumCoke: 0,
|
||||
lanzhouCoal: 0
|
||||
},
|
||||
{
|
||||
icon: 'icon-guitie',
|
||||
value: '20.5',
|
||||
name: '硅铁',
|
||||
value: 0,
|
||||
unit: 't',
|
||||
description: '耗电量:999kavrh',
|
||||
silica: '120.05',
|
||||
petroleumCoke: '120.05',
|
||||
lanzhouCoal: '120.05'
|
||||
description: 0,
|
||||
silica: 0,
|
||||
petroleumCoke: 0,
|
||||
lanzhouCoal: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -63,8 +91,80 @@ export default {
|
||||
// this.getFurnaceTemperatureChangeRateBar()
|
||||
// this.getDailyPowerConsumption()
|
||||
// this.getEnergyAndElectricityConsumption()
|
||||
this.getProductData()
|
||||
this.getSafetyExceptionEvent()
|
||||
// this.getProductContribution()
|
||||
this.getProductTotalProduction()
|
||||
},
|
||||
methods: {
|
||||
// 产品数据：本月累计产量、回收率、单位单耗
|
||||
async getProductData() {
|
||||
const {
|
||||
data: {
|
||||
production,
|
||||
passRate,
|
||||
units
|
||||
}
|
||||
} = await getProductData({
|
||||
// productionDay: today
|
||||
year: currentYear
|
||||
// month: currentMonth,
|
||||
// startDate: startOfMonth,
|
||||
// endDate: endOfMonth
|
||||
})
|
||||
this.currentMonthCumulativeProduction = production ?? 0
|
||||
this.productRecoveryRate = passRate ?? 0
|
||||
this.unitElectricityConsumption = units ?? 0
|
||||
},
|
||||
// 安全与异常事件
|
||||
async getSafetyExceptionEvent() {
|
||||
const { data } = await getSafetyExceptionEvent({
|
||||
// productionDay: today
|
||||
year: currentYear
|
||||
// month: currentMonth,
|
||||
// startDate: startOfMonth,
|
||||
// endDate: endOfMonth
|
||||
})
|
||||
this.safetyExceptionEventList = data
|
||||
},
|
||||
// FIXME: 目前没有，各炉号产量贡献
|
||||
// async getProductContribution() {
|
||||
// const data = await getProductContribution({
|
||||
// // productionDay: today
|
||||
// year: currentYear
|
||||
// // month: currentMonth,
|
||||
// // startDate: startOfMonth,
|
||||
// // endDate: endOfMonth
|
||||
// })
|
||||
// console.log('getProductContribution: 各炉号产量贡献', data)
|
||||
// },
|
||||
// 各产品合计产量
|
||||
async getProductTotalProduction() {
|
||||
const { data } = await getProductTotalProduction({
|
||||
// productionDay: today
|
||||
year: currentYear
|
||||
// month: currentMonth,
|
||||
// startDate: startOfMonth,
|
||||
// endDate: endOfMonth
|
||||
})
|
||||
if (data && Array.isArray(data)) {
|
||||
const positionMap = {
|
||||
'硅锰': 0,
|
||||
'铬铁': 1,
|
||||
'硅铁': 2
|
||||
}
|
||||
data.forEach(({ title, consumption, power, list }) => {
|
||||
Object.assign(this.productionData[positionMap[title]], {
|
||||
value: consumption ?? 0,
|
||||
description: power ?? 0,
|
||||
silica: list?.find(item => item.title === '硅石')?.consumption ?? 0,
|
||||
petroleumCoke: list?.find(item => item.title === '石油焦')?.consumption ?? 0,
|
||||
lanzhouCoal: list?.find(item => item.title === '兰炭')?.consumption ?? 0
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
// ---------------------------pspace---------------------------------
|
||||
// 炉温稳定率（百分比）
|
||||
async getFurnaceTemperatureChangeRate() {
|
||||
const parameter = {
|
||||
@ -178,14 +278,14 @@ export default {
|
||||
<div class="lint-item-title">本月累计产量</div>
|
||||
<div class="lint-item-content">
|
||||
<div class="icon"><img src="@/assets/big-screen/icon-chanliang.png"/></div>
|
||||
<div class="value t-white">432,928<span class="unit t-light-blue">t</span></div>
|
||||
<div class="end-time t-light-blue">截止到8-20</div>
|
||||
<div class="value t-white">{{ currentMonthCumulativeProduction }}<span class="unit t-light-blue">t</span></div>
|
||||
<div class="end-time t-light-blue">截止到{{ endOfMonth }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-item bg">
|
||||
<div class="lint-item-title">产品回收率</div>
|
||||
<div style="width: 100%; height: calc(100% - 150px);">
|
||||
<PieChart color="blue" :data="75"></PieChart>
|
||||
<PieChart color="blue" :data="productRecoveryRate"></PieChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-item bg">
|
||||
@ -219,7 +319,7 @@ export default {
|
||||
<span class="value-number t-white">{{ item.value }}</span>
|
||||
<span class="value-unit t-light-blue">{{ item.unit }}</span>
|
||||
</div>
|
||||
<div class="card-description t-light-blue">{{ item.description }}</div>
|
||||
<div class="card-description t-light-blue">耗电量:{{ item.description }}kavrh</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="production-item-card">
|
||||
@ -306,13 +406,12 @@ export default {
|
||||
<div class="title-box anquanjiance"></div>
|
||||
|
||||
<div class="chart-container anquanjiance">
|
||||
<div>
|
||||
<div class="time">2022-11-23 11:37:25</div>
|
||||
<div class="content danger">xxxx段发生严重xx，请立即前往处理!</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="time">2022-11-23 09:37:25</div>
|
||||
<div class="content warning">xxxx段发生严重xx，请立即前往处理!</div>
|
||||
<div v-for="(item, index) in safetyExceptionEventList" :key="index">
|
||||
<div class="time">{{ item.happenTime }}</div>
|
||||
<div
|
||||
class="content ell"
|
||||
:class="{'danger': item.eventType === '2级', 'warning': item.eventType === '1级'}"
|
||||
>{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -332,6 +431,20 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #0b3b6c;
|
||||
&-thumb {
|
||||
background: #40a9ff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.ell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tc {
|
||||
text-align: center;
|
||||
}
|
||||
@ -587,17 +700,14 @@ export default {
|
||||
}
|
||||
&.anquanjiance {
|
||||
height: 77%;
|
||||
overflow-y: auto;
|
||||
background-image: url('~@/assets/big-screen/border-anquanjiance.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
> div {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 5%;
|
||||
height: 12rem;
|
||||
padding: 2rem 5% 1rem;
|
||||
.time {
|
||||
color: #40a9ff;
|
||||
font-size: 2.5rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user