feat: 新效果大屏暂存
This commit is contained in:
wangjr
parent
fa85e41008
commit
cdccfbfdd1
@ -1,3 +1,4 @@
|
||||
NODE_ENV=development
|
||||
VUE_APP_PREVIEW=true
|
||||
VUE_APP_API_BASE_URL=http://localhost:82
|
||||
VUE_APP_API_BASE_URL=http://47.94.254.249:3182
|
||||
VUE_APP_API_BASE_URL_PSPACE=/pspace-server
|
||||
49
src/api/modular/largeScreen/pSpaceApi.js
Normal file
49
src/api/modular/largeScreen/pSpaceApi.js
Normal file
@ -0,0 +1,49 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV === 'development'
|
||||
|
||||
export const getPSpaceData = async (url, params) => {
|
||||
// const data = JSON.stringify(params)
|
||||
try {
|
||||
const res = await axios({
|
||||
baseURL: isDevelopment ? undefined : process.env.VUE_APP_PSPACE_API_BASE_URL,
|
||||
url: isDevelopment ? `/pspace-server${url}` : url,
|
||||
method: 'get',
|
||||
headers: {
|
||||
'ngrok-skip-browser-warning': 'true'
|
||||
},
|
||||
params
|
||||
})
|
||||
return res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 炉温变化率（炉温变化率DELTA*10000/AVG得出万分之几，大屏上显示万分之：）（炉温稳定率-百分比）
|
||||
*/
|
||||
export function getFurnaceTemperatureChangeRate (parameter) {
|
||||
return getPSpaceData('/HistDataByAggre', parameter)
|
||||
}
|
||||
|
||||
/**
|
||||
* 中心炉底温度变化量（炉温变化曲线，每个炉子一条）（炉温稳定率-柱状图）
|
||||
*/
|
||||
export function getFurnaceTemperatureChangeRateBar (parameter) {
|
||||
return getPSpaceData('/HistAggreData', parameter)
|
||||
}
|
||||
|
||||
/**
|
||||
* 每天耗电量（1单位耗电量用这个除以每天产品产量，2总耗电量指标把日期调成每月1号）（单位电耗）
|
||||
*/
|
||||
export function getDailyPowerConsumption (parameter) {
|
||||
return getPSpaceData('/HistAggreData', parameter)
|
||||
}
|
||||
|
||||
/**
|
||||
* 能耗与电耗（Kvar无功功率 Kvarh无功电量 KW有功功率 KWh有功电量 cos功率因数（大屏左边第一块用这个））（能耗与电耗数据）
|
||||
*/
|
||||
export function getEnergyAndElectricityConsumption(parameter) {
|
||||
return getPSpaceData('/HistDataByAggre', parameter)
|
||||
}
|
||||
@ -13,3 +13,36 @@ export function productionCommandCenterPage (parameter) {
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
const commonParams = {
|
||||
charset: 'utf-8',
|
||||
archived: 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 炉温
|
||||
*/
|
||||
export function getFurnaceTemperature (parameter) {
|
||||
return axios({
|
||||
url: '/HistAtTime',
|
||||
method: 'post',
|
||||
params: {
|
||||
...parameter,
|
||||
...commonParams
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 功率因数（每月和每小时功率因数，用这个平均值调整时间）
|
||||
*/
|
||||
export function getHistAggreData (parameter) {
|
||||
return axios({
|
||||
url: '/HistAggreData',
|
||||
method: 'get',
|
||||
params: {
|
||||
...parameter,
|
||||
...commonParams
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/big-screen/bg-danger.png
Normal file
BIN
src/assets/big-screen/bg-danger.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/big-screen/bg-energy.png
Normal file
BIN
src/assets/big-screen/bg-energy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 966 KiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 2.1 MiB |
BIN
src/assets/big-screen/bg-warning.png
Normal file
BIN
src/assets/big-screen/bg-warning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/big-screen/icon-energy.png
Normal file
BIN
src/assets/big-screen/icon-energy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/assets/big-screen/icon-lanzhou-coal.png
Normal file
BIN
src/assets/big-screen/icon-lanzhou-coal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 B |
BIN
src/assets/big-screen/icon-petroleum-coke.png
Normal file
BIN
src/assets/big-screen/icon-petroleum-coke.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 684 B |
BIN
src/assets/big-screen/icon-silica.png
Normal file
BIN
src/assets/big-screen/icon-silica.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 931 B |
@ -3,6 +3,13 @@
|
||||
import PieChart from './components/PieChart.vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
|
||||
import {
|
||||
getFurnaceTemperatureChangeRate,
|
||||
getDailyPowerConsumption,
|
||||
getFurnaceTemperatureChangeRateBar,
|
||||
getEnergyAndElectricityConsumption
|
||||
} from '@/api/modular/largeScreen/pSpaceApi'
|
||||
// import { getFurnaceTemperatureChangeRate } from '@/api/modular/largeScreen/productionCommandCenterManage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -10,7 +17,137 @@ export default {
|
||||
BarChart,
|
||||
ElectrodeConsumption
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 累计用电量
|
||||
totalElectricityConsumption: 0,
|
||||
// 单位电耗
|
||||
unitElectricityConsumption: 0,
|
||||
// 发电厂发电量
|
||||
totalPowerGeneration: 0,
|
||||
// 功率因数
|
||||
powerFactor: 0,
|
||||
productionData: [
|
||||
{
|
||||
icon: 'icon-guimeng',
|
||||
value: '2,234',
|
||||
unit: 't',
|
||||
description: '耗电量:999kavrh',
|
||||
silica: '120.05',
|
||||
petroleumCoke: '120.05',
|
||||
lanzhouCoal: '120.05'
|
||||
},
|
||||
{
|
||||
icon: 'icon-getie',
|
||||
value: '10.4',
|
||||
unit: 't',
|
||||
description: '耗电量:999kavrh',
|
||||
silica: '120.05',
|
||||
petroleumCoke: '120.05',
|
||||
lanzhouCoal: '120.05'
|
||||
},
|
||||
{
|
||||
icon: 'icon-guitie',
|
||||
value: '20.5',
|
||||
unit: 't',
|
||||
description: '耗电量:999kavrh',
|
||||
silica: '120.05',
|
||||
petroleumCoke: '120.05',
|
||||
lanzhouCoal: '120.05'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getFurnaceTemperatureChangeRate()
|
||||
// this.getFurnaceTemperatureChangeRateBar()
|
||||
// this.getDailyPowerConsumption()
|
||||
// this.getEnergyAndElectricityConsumption()
|
||||
},
|
||||
methods: {
|
||||
// 炉温稳定率（百分比）
|
||||
async getFurnaceTemperatureChangeRate() {
|
||||
const parameter = {
|
||||
'btime': '2025-08-07 16:00:00',
|
||||
'etime': '2025-08-08 16:00:10',
|
||||
'aggredata':
|
||||
[{
|
||||
'aggfunc': 'AVG',
|
||||
'tagnames': '/corp/factory1/boiler/luwen/中心炉底温度'
|
||||
}, {
|
||||
'aggfunc': 'DELTA',
|
||||
'tagnames': '/corp/factory1/boiler/luwen/中心炉底温度'
|
||||
}],
|
||||
'interval': 3600,
|
||||
'charset': 'utf-8',
|
||||
'archived': 0
|
||||
}
|
||||
const data = await getFurnaceTemperatureChangeRate(parameter)
|
||||
console.log(data)
|
||||
},
|
||||
// 炉温稳定率（柱状图）
|
||||
async getFurnaceTemperatureChangeRateBar() {
|
||||
const parameter = {
|
||||
'btime': '2025-08-07 16:00:00',
|
||||
'etime': '2025-08-08 16:00:10',
|
||||
'aggredata':
|
||||
{
|
||||
'aggfunc': 'DELTA',
|
||||
'tagnames': '/corp/factory1/boiler/luwen/中心炉底温度'
|
||||
},
|
||||
'interval': 3600,
|
||||
'charset': 'utf-8',
|
||||
'archived': 0
|
||||
}
|
||||
const data = await getFurnaceTemperatureChangeRateBar(parameter)
|
||||
console.log(data)
|
||||
},
|
||||
// 单位电耗
|
||||
async getDailyPowerConsumption() {
|
||||
const parameter = {
|
||||
'btime': '2025-08-07 16:00:10',
|
||||
'etime': '2025-08-08 16:00:00',
|
||||
'aggredata':
|
||||
{
|
||||
'aggfunc': 'DELTA',
|
||||
'tagnames': '/corp/factory1/boiler/yibiao/kWh'
|
||||
},
|
||||
'interval': 86400,
|
||||
'charset': 'utf-8',
|
||||
'archived': 0
|
||||
}
|
||||
const data = await getDailyPowerConsumption(parameter)
|
||||
console.log(data)
|
||||
},
|
||||
// 能耗与电耗
|
||||
async getEnergyAndElectricityConsumption() {
|
||||
const parameter = {
|
||||
'btime': '2025-08-07 16:00:00',
|
||||
'etime': '2025-08-07 18:00:10',
|
||||
'aggredata':
|
||||
[{
|
||||
'aggfunc': 'AVG',
|
||||
'tagnames': '/corp/factory1/boiler/yibiao/kW'
|
||||
}, {
|
||||
'aggfunc': 'AVG',
|
||||
'tagnames': '/corp/factory1/boiler/yibiao/Kvarh'
|
||||
}, {
|
||||
'aggfunc': 'AVG',
|
||||
'tagnames': '/corp/factory1/boiler/yibiao/cos'
|
||||
}, {
|
||||
'aggfunc': 'DELTA',
|
||||
'tagnames': '/corp/factory1/boiler/yibiao/kWh'
|
||||
}, {
|
||||
'aggfunc': 'DELTA',
|
||||
'tagnames': '/corp/factory1/boiler/yibiao/Kvarh'
|
||||
}],
|
||||
'interval': 3600,
|
||||
'charset': 'utf-8',
|
||||
'archived': 0
|
||||
}
|
||||
const data = await getEnergyAndElectricityConsumption(parameter)
|
||||
console.log(data)
|
||||
},
|
||||
getItemStyle(item) {
|
||||
return {
|
||||
backgroundImage: `url(${require('@/assets/big-screen/nav/' + item + '.png')})`,
|
||||
@ -36,23 +173,25 @@ export default {
|
||||
|
||||
<div class="container-content-top">
|
||||
<div class="title-box yunxingzhuangtai"></div>
|
||||
<div class="box-container">
|
||||
<div class="line-item bg">
|
||||
<div class="box-container first">
|
||||
<div class="line-item bg tc">
|
||||
<div class="lint-item-title">本月累计产量</div>
|
||||
<div class="icon"><img src="@/assets/big-screen/icon-chanliang.png" alt="" /><</div>
|
||||
<div class="value">432,928<span class="unit">t</span></div>
|
||||
<div class="end-time">截止到8-20</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>
|
||||
</div>
|
||||
<div class="line-item bg">
|
||||
<div class="lint-item-title">产品回收率</div>
|
||||
<div style="width: 100%; height: calc(100% - 60px);">
|
||||
<PieChart></PieChart>
|
||||
<div style="width: 100%; height: calc(100% - 150px);">
|
||||
<PieChart color="blue" :data="75"></PieChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-item bg">
|
||||
<div class="lint-item-title">炉温稳定率</div>
|
||||
<div style="width: 100%; height: calc(100% - 60px);">
|
||||
<PieChart></PieChart>
|
||||
<div style="width: 100%; height: calc(100% - 150px);">
|
||||
<PieChart color="orange" :data="75"></PieChart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -69,10 +208,44 @@ export default {
|
||||
<div class="lint-item-title">硅铁合计</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-container title-box">
|
||||
<div class="line-item bg"></div>
|
||||
<div class="line-item bg"></div>
|
||||
<div class="line-item bg"></div>
|
||||
<div class="box-container title-box chanliang-item">
|
||||
<div class="line-item bg" v-for="(item, index) in productionData" :key="index">
|
||||
<div class="production-card">
|
||||
<div class="card-icon" v-if="item.icon">
|
||||
<img :src="require(`@/assets/big-screen/${item.icon}.png`)" alt="" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-value">
|
||||
<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>
|
||||
</div>
|
||||
<div class="production-item-card">
|
||||
<div>
|
||||
<div class="tl">
|
||||
<img src="@/assets/big-screen/icon-silica.png" alt="">
|
||||
<span>硅石</span>
|
||||
</div>
|
||||
<div class="tr">{{ item.silica }} <span>吨</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tl">
|
||||
<img src="@/assets/big-screen/icon-petroleum-coke.png" alt="">
|
||||
<span>石油焦</span>
|
||||
</div>
|
||||
<div class="tr">{{ item.petroleumCoke }} <span>吨</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tl">
|
||||
<img src="@/assets/big-screen/icon-lanzhou-coal.png" alt="">
|
||||
<span>兰炭</span>
|
||||
</div>
|
||||
<div class="tr">{{ item.lanzhouCoal }} <span>吨</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -89,15 +262,35 @@ export default {
|
||||
</div>
|
||||
|
||||
<div class="right-container">
|
||||
<div class="container-content" style="display: flex;">
|
||||
<div class="container-content" style="display: flex; justify-content: space-evenly;">
|
||||
|
||||
<div class="left">
|
||||
<div class="container-content-top">
|
||||
<div class="title-box xiaohaoshuju"></div>
|
||||
<div class="box-container">
|
||||
<div class="line-item">1</div>
|
||||
<div class="line-item">2</div>
|
||||
<div class="line-item">3</div>
|
||||
<div class="box-container xiaohaoshuju">
|
||||
<div class="line-item">
|
||||
<div class="tl">
|
||||
<p class="t-blue">本月累计用电量</p>
|
||||
<p>{{ totalElectricityConsumption }}kWh</p>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<p class="t-blue">单位电耗</p>
|
||||
<p>{{ unitElectricityConsumption }}mkWh/t</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-item" style="display: flex; justify-content: center;">
|
||||
<img src="@/assets/big-screen/icon-energy.png"/>
|
||||
</div>
|
||||
<div class="line-item">
|
||||
<div class="tr">
|
||||
<p class="t-blue">发电厂发电量</p>
|
||||
<p>{{ totalPowerGeneration }}kWh</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<p class="t-blue">功率因数</p>
|
||||
<p>{{ powerFactor }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container danweidianhao">
|
||||
@ -114,12 +307,12 @@ export default {
|
||||
|
||||
<div class="chart-container anquanjiance">
|
||||
<div>
|
||||
<div>2022-11-23 11:37:25</div>
|
||||
<div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
|
||||
<div class="time">2022-11-23 11:37:25</div>
|
||||
<div class="content danger">xxxx段发生严重xx，请立即前往处理!</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>2022-11-23 09:37:25</div>
|
||||
<div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
|
||||
<div class="time">2022-11-23 09:37:25</div>
|
||||
<div class="content warning">xxxx段发生严重xx，请立即前往处理!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -139,14 +332,39 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tc {
|
||||
text-align: center;
|
||||
}
|
||||
.tl {
|
||||
text-align: left;
|
||||
}
|
||||
.tr {
|
||||
text-align: right;
|
||||
}
|
||||
.t-white {
|
||||
color: #fff;
|
||||
}
|
||||
.t-blue {
|
||||
color: #40a9ff !important;
|
||||
}
|
||||
.t-light-blue {
|
||||
color: #40ccff;
|
||||
}
|
||||
.bg-image-mixin(@image-path) {
|
||||
background-image: url(@image-path);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.lint-item-title {
|
||||
color: #40a9ff;
|
||||
font-size: 2rem;
|
||||
.first {
|
||||
.line-item {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
.lint-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 65%;
|
||||
}
|
||||
}
|
||||
.line-item {
|
||||
width: 32%;
|
||||
@ -154,10 +372,70 @@ export default {
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
font-size: 2rem;
|
||||
&.bg, .bg {
|
||||
.bg-image-mixin('~@/assets/big-screen/bg-line-item.png');
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
.production-card {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
img {
|
||||
width: 5rem;
|
||||
height: 6rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.production-item-card {
|
||||
color: #40a9ff;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
img {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
border-bottom: 1px solid #234c6d87;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lint-item-title {
|
||||
color: #40a9ff;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.icon {
|
||||
img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
font-size: 3rem;
|
||||
font-family: 'DingTalk JinBuTi';
|
||||
font-weight: 700;
|
||||
}
|
||||
.unit {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.end-time {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
position: relative;
|
||||
@ -178,15 +456,15 @@ export default {
|
||||
.center-container {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
width: 36%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
margin-left: -18%;
|
||||
margin-left: -25%;
|
||||
}
|
||||
.left-container, .right-container {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
width: 36%;
|
||||
width: 28%;
|
||||
height: 100%;
|
||||
background-image: url('~@/assets/big-screen/bg-right.png');
|
||||
background-size: 100% 100%;
|
||||
@ -196,7 +474,7 @@ export default {
|
||||
.container-content {
|
||||
width: 90%;
|
||||
height: 91%;
|
||||
margin: 7% 5% 2%;
|
||||
margin: 9% 5% 2%;
|
||||
background-image: url('~@/assets/big-screen/bg-border-right.png');
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
@ -207,11 +485,11 @@ export default {
|
||||
padding-right: 5%;
|
||||
}
|
||||
.container-content-top {
|
||||
height: 60%;
|
||||
height: 70%;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
.container-content-bottom {
|
||||
height: 40%;
|
||||
height: 30%;
|
||||
}
|
||||
}
|
||||
.title-chart-box {
|
||||
@ -237,6 +515,13 @@ export default {
|
||||
&.chanliang {
|
||||
background-image: url('~@/assets/big-screen/title-chanliang.png');
|
||||
}
|
||||
&.chanliang-item {
|
||||
height: 40%;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
&.xiaohaoshuju {
|
||||
background-image: url('~@/assets/big-screen/title-xiaohaoshuju.png');
|
||||
}
|
||||
@ -252,6 +537,32 @@ export default {
|
||||
&.title {
|
||||
height: 5rem;
|
||||
}
|
||||
&.xiaohaoshuju {
|
||||
height: 35%;
|
||||
.line-item {
|
||||
display: block;
|
||||
> div {
|
||||
background-image: url('~@/assets/big-screen/bg-energy.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 1rem;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 98%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
@ -271,29 +582,54 @@ export default {
|
||||
}
|
||||
&.danweidianhao {
|
||||
padding-top: 0.5rem;
|
||||
height: 40%;
|
||||
height: 50%;
|
||||
background-image: url('~@/assets/big-screen/border-danweidianhao.png');
|
||||
}
|
||||
&.anquanjiance {
|
||||
height: 77%;
|
||||
background-image: url('~@/assets/big-screen/border-anquanjiance.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
> div {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 5%;
|
||||
.time {
|
||||
color: #40a9ff;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.content {
|
||||
padding-left: 20%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
&.danger {
|
||||
background-image: url('~@/assets/big-screen/bg-danger.png');
|
||||
}
|
||||
&.warning {
|
||||
background-image: url('~@/assets/big-screen/bg-warning.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-container {
|
||||
.container-content {
|
||||
background: none;
|
||||
margin-right: 15px;
|
||||
width: 100%;
|
||||
.left, .right {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.left {
|
||||
width: 70%;
|
||||
width: 74%;
|
||||
}
|
||||
.right {
|
||||
width: 26%;
|
||||
width: 25%;
|
||||
}
|
||||
.left {
|
||||
background-image: url('~@/assets/big-screen/bg-border-right.png');
|
||||
|
||||
@ -9,13 +9,19 @@ import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'PieChart',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'blue'
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
productionData: {
|
||||
dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
||||
values: [7000, 5000, 6000, 4500, 3000, 5000, 9000, 4500, 6000, 3500, 2000, 6500, 4500, 7500, 5000, 5000, 4500, 6000, 3000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
}
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -25,112 +31,114 @@ export default {
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart)
|
||||
if (this.productionChart) {
|
||||
this.productionChart.dispose()
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const [color1, color2] = this.color === 'blue' ? ['#0060D5', '#85EDFF'] : ['#DD8323', '#FFEE9A']
|
||||
const data = [this.data]
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
const option = {
|
||||
title: [
|
||||
{
|
||||
{
|
||||
x: 'center',
|
||||
top: '55%',
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '100'
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '100'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '75%',
|
||||
},
|
||||
{
|
||||
text: `${this.data}%`,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: '60',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: 'DINAlternate-Bold, DINAlternate',
|
||||
foontWeight: '600'
|
||||
}
|
||||
fontSize: '60',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: 'DINAlternate-Bold, DINAlternate',
|
||||
foontWeight: '600'
|
||||
}
|
||||
}
|
||||
],
|
||||
polar: {
|
||||
radius: ['42%', '52%'],
|
||||
center: ['50%', '50%']
|
||||
radius: ['70%', '90%'],
|
||||
center: ['50%', '50%']
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false
|
||||
max: 100,
|
||||
show: false
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
roundCap: true,
|
||||
barWidth: 30,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(66, 66, 66, .3)'
|
||||
color: 'rgba(66, 66, 66, .3)'
|
||||
},
|
||||
data: [60],
|
||||
data,
|
||||
coordinateSystem: 'polar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
{
|
||||
offset: 0,
|
||||
color: '#16CEB9'
|
||||
},
|
||||
{
|
||||
color: color1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#6648FF'
|
||||
}
|
||||
color: color2
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 80,
|
||||
radius: ['56%'],
|
||||
radius: ['86%'],
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: 'rgba(66, 66, 66, .1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#5269EE'
|
||||
color: 'rgba(66, 66, 66, .1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#5269EE'
|
||||
},
|
||||
data: [100]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 80,
|
||||
radius: ['38%'],
|
||||
radius: ['68%'],
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: 'rgba(66, 66, 66, .1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#5269EE'
|
||||
color: 'rgba(66, 66, 66, .1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#5269EE'
|
||||
},
|
||||
data: [100]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
|
||||
@ -19,11 +19,26 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chartMixins from './chartMixins'
|
||||
|
||||
export default {
|
||||
name: 'ProductData',
|
||||
mixins: [chartMixins],
|
||||
data() {
|
||||
return {
|
||||
pspaceApiInfo: {
|
||||
url: '/HistAggreData',
|
||||
params: {
|
||||
btime: '2025-09-01 00:00:00',
|
||||
etime: '2025-09-30 23:59:59',
|
||||
aggredata: {
|
||||
aggfunc: 'count'
|
||||
},
|
||||
interval: 86400,
|
||||
charset: 'utf-8',
|
||||
archived: 0
|
||||
}
|
||||
},
|
||||
productionData: {
|
||||
monthlyProduction: '432,928',
|
||||
date: '8-20',
|
||||
@ -34,11 +49,11 @@ export default {
|
||||
temperatureStabilityChart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initQualifiedRateChart()
|
||||
this.initTemperatureStabilityChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.initQualifiedRateChart()
|
||||
this.initQualifiedRateChart()
|
||||
},
|
||||
initQualifiedRateChart() {
|
||||
this.qualifiedRateChart = echarts.init(this.$refs.qualifiedRateChart)
|
||||
const option = {
|
||||
|
||||
21
src/views/largeScreen/components/chartMixins.js
Normal file
21
src/views/largeScreen/components/chartMixins.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { getPSpaceData } from '@/api/modular/largeScreen/pSpaceApi'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pspaceApiInfo: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {},
|
||||
async getData() {
|
||||
const { url, params } = this.pspaceApiInfo
|
||||
const res = await getPSpaceData(
|
||||
url,
|
||||
params
|
||||
)
|
||||
console.log('getPSpaceData', res)
|
||||
this.initChart(res)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -101,6 +101,14 @@ const vueConfig = {
|
||||
pathRewrite: {
|
||||
'^/api': '' // 需要rewrite的,
|
||||
}
|
||||
},
|
||||
'/pspace-server': {
|
||||
target: 'https://c3abc956bca5.ngrok-free.app',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
pathRewrite: {
|
||||
'^/pspace-server': '/',
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user