dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

电器BI调整 q=6接口代码

This commit is contained in:
xielue 2025-08-07 10:15:18 +08:00
parent 5f1bc5f444
commit e08955ad09
12 changed files with 320 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
View File

@ -29,6 +29,15 @@ export default {
created() {
this.dataType = dataTypeParam;
if (this.dataType == '6') {
api.post2('/api/web/getBiData', ["yx_v_llzj", "yx_v_cpzj", "yx_v_zlkb", "yx_v_cpzj", "yx_v_byblv", "yx_v_byblzb"]).then(res => {
console.log(res);
});
}
if (this.dataType == '3') {
this.init();
} else {
@ -37,9 +46,9 @@ export default {
this.currentComponent = 'datav2';
} else if (this.dataType == '5') {
this.currentComponent = 'datav3';
} else if (this.dataType == '6'){
} else if (this.dataType == '6') {
this.currentComponent = 'datav2';
} else{
} else {
this.currentComponent = 'datav';
}
}

12
src/api.js
View File

@ -8,9 +8,17 @@ const api = {
baseURL3: 'http://36.139.158.169:9261',
// baseURL: 'http://ppjlar.demo.natool.cn',
baseURL: 'http://xynzix.demo.natool.cn',
baseURL: 'http://39.101.165.228:9009',
//堡座
baseURL4: 'http://39.101.165.228:9009',
//尚博
baseURL5: 'http://39.101.203.37:9001',
baseURL6: 'http://127.0.0.1:9162',
// baseURL: '',
get (url) {
return new Promise((resolve, reject) => {

100
src/assets/index.html Normal file
View File

File diff suppressed because one or more lines are too long

1
src/assets/index_files/index.2da1efab.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/index_files/index01_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/index_files/index04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

35
src/components/dianfanbao-demo/index.vue
View File

@ -9,18 +9,18 @@
<NewContain :resData="resData" style="width:100%;height:100%" />
</div>
<div class="main-container" style="width: 32%;">
<NewContain2 :resData="resData" style="width:100%;height:100%"/>
<NewContain2 :resData="resData" style="width:100%;height:100%" />
</div>
<div class="main-container" style="width: 32%;">
<NewContain3 :resData="resData" style="width:100%;height:100%"/>
<NewContain3 :resData="resData" style="width:100%;height:100%" />
</div>
</div>
<div v-if="resData" style="display:flex;height: 44%;justify-content: space-around;">
<div class="main-container" style="width: 48%;">
<NewContain4 :resData="resData" style="width:100%;height:100%"/>
<NewContain4 :resData="resData" style="width:100%;height:100%" />
</div>
<div class="main-container" style="width: 48%;">
<NewContain5 :resData="resData" style="width:100%;height:100%"/>
<NewContain5 :resData="resData" style="width:100%;height:100%" />
</div>
</div>
@ -52,23 +52,32 @@ export default {
},
created() {
// 获取 URL 查询参数并设置 dataType
// const queryParams = new URLSearchParams(window.location.search);
// const dataTypeParam = queryParams.get('q');
this.$api.post('/api/pg/GetBIDemo',{
code:'11'
}).then(res=>{
const queryParams = new URLSearchParams(window.location.search);
const dataTypeParam = queryParams.get('q');
let loadData = () => {
this.$api.post('/api/pg/GetBIData', {
code: dataTypeParam
}).then(res => {
console.log(res.data)
if(res.code == 200){
if (res.code == 200) {
this.resData = res.data;
}
})
};
loadData();
setInterval(() => {
loadData();
}, 1000 * 60);
},
data() {
return {
resData:null,
dataType:'',
dataType2:'整机',
resData: null,
dataType: '',
dataType2: '整机',
switchType: 2
}
}

19
src/components/dianfanbao-demo/newContain.vue
View File

@ -11,21 +11,10 @@
<p style="margin: 0;font-size: 19px;text-align: center;font-weight: bold;">BASIC INFORMATION</p>
</div>
<div class="ncbmc-content">
<div class="text-item">
<p class="item-left">总人数:</p>
<p class="item-right">{{resData.info.PersonNumber}}人</p>
</div>
<!-- <div class="text-item">
<p class="item-left">订单数量:</p>
<p class="item-right">{{ resData.info.OrderQuantity }}</p>
</div>
<div class="text-item">
<p class="item-left">完成数:</p>
<p class="item-right">{{ resData.info.DoneQuantity }}</p>
</div> -->
<div class="text-item" v-for="(item,index) in resData.info.Contacts" :key="'person'+index">
<p class="item-left">负责人:</p>
<p class="item-right">{{item.Name}}：{{ item.Phone }}</p>
<div class="text-item" v-for="(item,index) in resData.info.Infos" :key="'info'+index">
<p class="item-left">{{item.name}}:</p>
<p class="item-right">{{ item.content }}</p>
</div>
</div>

6
src/components/dianfanbao-demo/newContain2.vue
View File

@ -13,11 +13,11 @@
<div class="ncb-currenttask">
<div class="current-title">
<span class="title-decoration"></span>
<span style="color: aqua;">当前工单：</span>WOOLA12134422
<span style="color: aqua;">当前工单：</span>{{resData.info.OrderCode}}
</div>
<div class="current-item">
<span class="current-item-name">产品编码：</span>
<span class="current-item-value">{{resData.info.OrderCode}}</span>
<span class="current-item-value">{{resData.info.InventoryCode}}</span>
</div>
<div class="current-item">
<span class="current-item-name">产品名称：</span>
@ -37,7 +37,7 @@
<div style="display: flex;">
<div class="current-item">
<span class="current-item-name">完工进度：</span>
<span class="current-item-value">{{resData.info.DoneRate * 100}}%</span>
<span class="current-item-value">{{parseFloat(resData.info.DoneRate * 100).toFixed(1)}}%</span>
</div>
<div class="current-item">
<span class="current-item-name">备料齐套进度：</span>

111
src/components/dianfanbao-demo/newContain4.vue
View File

@ -14,39 +14,58 @@
</div>
</div>
</template>
<script>
<script>
import LabelTag from './LabelTag'
import * as echarts from 'echarts';
import * as echarts from 'echarts'
import testRes from './test'
console.log(testRes)
export default {
name: 'CenterCmp',
components: {
LabelTag,
},
props: {
resData:{
type:Object,
resData: {
type: Object,
required: true,
default: () => ({})
},
dataType: {
type: String,
default: ''
}
},
data () {
return {}
data() {
return {
chart: null
}
},
mounted() {
this.initMixedChart()
this.initChart()
window.addEventListener('resize', this.resizeChart)
},
watch: {
// 监听 resData 的变化，重新渲染图表
resData: {
deep: true,
handler(newData) {
this.updateChart(newData)
}
}
},
methods: {
initMixedChart() {
const chartDom = document.getElementById('nbc-line1');
const myChart = echarts.init(chartDom);
const actualData = this.resData.productionData.actual;
const targetData = this.resData.productionData.target;
initChart() {
const chartDom = document.getElementById('nbc-line1')
this.chart = echarts.init(chartDom)
this.updateChart(this.resData)
},
updateChart(data) {
if (!this.chart) return
const actualData = data.productionData.actual || []
const targetData = data.productionData.target || []
const timeSlots = data.productionData.timeSlots || []
const option = {
tooltip: {
trigger: 'axis',
@ -58,30 +77,30 @@ export default {
}
},
legend: {
data: ['目标产量','实际产量'],
bottom: 10, // 图例显示在下方
data: ['目标产量', '实际产量'],
bottom: 10,
textStyle: {
fontSize: '20',
color: '#fff' // 图例文字为白色
color: '#fff'
}
},
xAxis: {
type: 'category',
data:this.resData.productionData.timeSlots,
data: timeSlots,
axisLabel: {
fontSize: 14, // 放大 x 轴文字
fontWeight: 'bold', // x 轴文字加粗
color: '#fff' // 设置 x 轴文字为白色
fontSize: 14,
fontWeight: 'bold',
color: '#fff'
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 20, // 放大 y 轴文字
fontWeight: 'bold', // y 轴文字加粗
color: '#fff' // 设置 y 轴文字为白色
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
},
splitLine: { // 关闭 y 轴辅助线
splitLine: {
show: false
}
},
@ -89,20 +108,20 @@ export default {
{
name: '实际产量',
type: 'bar',
barWidth: '35%', // 缩小柱状图的条状宽度
barWidth: '35%',
data: actualData,
itemStyle: {
color: 'rgb(255, 255, 204)' // 天黄色
color: 'rgb(255, 255, 204)'
},
label: {
show: true,
position: 'inside',
fontSize: '18px',
fontWeight: 'bolder', // 柱状图 label 字体加粗
formatter: function(params) {
return params.value;
fontWeight: 'bolder',
formatter: function (params) {
return params.value
},
color:'red',
color: 'red'
}
},
{
@ -110,25 +129,35 @@ export default {
type: 'line',
data: targetData,
itemStyle: {
color: 'rgb(173, 216, 230)' // 浅蓝色
color: 'rgb(173, 216, 230)'
},
label: {
show: true,
position: 'top',
fontSize: '20px',
fontWeight: 'bold', // 柱状图 label 字体加粗
formatter: function(params) {
return params.value;
fontWeight: 'bold',
formatter: function (params) {
return params.value
},
color: 'rgb(173, 216, 230)' // 浅蓝色
color: 'rgb(173, 216, 230)'
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
this.chart.setOption(option, true) // true 表示合并配置
},
resizeChart() {
if (this.chart) {
this.chart.resize()
}
}
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeChart)
if (this.chart) {
this.chart.dispose()
this.chart = null
}
}
}

114
src/components/dianfanbao-demo/newContain5.vue
View File

@ -20,43 +20,60 @@
</div>
</template>
<script>
<script>
import LabelTag from './LabelTag'
import * as echarts from 'echarts';
import * as echarts from 'echarts'
import testRes from './test'
console.log(testRes)
export default {
name: 'CenterCmp',
components: {
LabelTag,
LabelTag
},
props: {
resData:{
type:Object,
resData: {
type: Object,
required: true
},
dataType: {
type: String,
default: ''
}
},
data () {
data() {
return {
myChart: null // 保存 ECharts 实例
}
},
// 在mounted()中调用
mounted() {
this.initMixedChart()
this.initChart()
},
watch: {
resData: {
deep: true,
handler(newVal) {
if (newVal && this.myChart) {
this.updateChart()
}
}
}
},
// 在methods中添加方法
methods: {
initMixedChart() {
const chartDom = document.getElementById('nbc-line2');
const myChart = echarts.init(chartDom);
const actualData =this.resData.upphData.actual;
const targetData =this.resData.upphData.target;
initChart() {
const chartDom = document.getElementById('nbc-line2')
this.myChart = echarts.init(chartDom)
this.updateChart()
// 添加窗口大小变化监听器，自动调整图表大小
window.addEventListener('resize', this.handleResize)
},
updateChart() {
const actualData = this.resData.upphData.actual
const targetData = this.resData.upphData.target
const timeSlots = this.resData.upphData.timeSlots
const option = {
tooltip: {
trigger: 'axis',
@ -68,30 +85,30 @@ export default {
}
},
legend: {
data: ['目标UPPH','实际UPPH'],
bottom: 10, // 图例显示在下方
data: ['目标UPPH', '实际UPPH'],
bottom: 10,
textStyle: {
fontSize: '20',
color: '#fff' // 图例文字为白色
color: '#fff'
}
},
xAxis: {
type: 'category',
data:this.resData.upphData.timeSlots,
data: timeSlots,
axisLabel: {
fontSize: 14, // 放大 x 轴文字
fontWeight: 'bold', // x 轴文字加粗
color: '#fff' // 设置 x 轴文字为白色
fontSize: 14,
fontWeight: 'bold',
color: '#fff'
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 20, // 放大 y 轴文字
fontWeight: 'bold', // y 轴文字加粗
color: '#fff' // 设置 y 轴文字为白色
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
},
splitLine: { // 关闭 y 轴辅助线
splitLine: {
show: false
}
},
@ -99,20 +116,20 @@ export default {
{
name: '实际UPPH',
type: 'bar',
barWidth: '35%', // 缩小柱状图的条状宽度
barWidth: '35%',
data: actualData,
itemStyle: {
color: 'rgb(255, 255, 204)' // 天黄色
color: 'rgb(255, 255, 204)'
},
label: {
show: true,
position: 'inside',
fontSize: '18px',
fontWeight: 'bolder', // 柱状图 label 字体加粗
formatter: function(params) {
return params.value;
fontWeight: 'bolder',
formatter: function (params) {
return params.value
},
color: 'red',
color: 'red'
}
},
{
@ -120,25 +137,36 @@ export default {
type: 'line',
data: targetData,
itemStyle: {
color: 'rgb(173, 216, 230)' // 浅蓝色
color: 'rgb(173, 216, 230)'
},
label: {
show: true,
position: 'top',
fontSize: '20px',
fontWeight: 'bold', // 柱状图 label 字体加粗
formatter: function(params) {
return params.value;
fontWeight: 'bold',
formatter: function (params) {
return params.value
},
color: 'rgb(173, 216, 230)' // 浅蓝色
color: 'rgb(173, 216, 230)'
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
this.myChart.setOption(option, true) // 第二个参数为 true 表示合并配置
},
handleResize() {
if (this.myChart) {
this.myChart.resize()
}
}
},
beforeDestroy() {
// 组件销毁时移除监听器并释放图表资源
window.removeEventListener('resize', this.handleResize)
if (this.myChart) {
this.myChart.dispose()
this.myChart = null
}
}
}

4
src/main.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue'
// import App from './App.vue'
import App from './App.vue'
// import App from './AppV2.vue'
import App from './AppV3.vue'
//import App from './AppV3.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'