科研生产-项目管理
This commit is contained in:
@ -64,6 +64,25 @@ export const blueColorList = [
|
|||||||
'#052464',
|
'#052464',
|
||||||
'#001541',
|
'#001541',
|
||||||
]
|
]
|
||||||
export const greyColorList = [
|
export const redColorList = [
|
||||||
// #FAFAFA
|
'#ffeae8',
|
||||||
|
'#ffd1cd',
|
||||||
|
'#ffbab4',
|
||||||
|
'#ffa59e',
|
||||||
|
'#ff8e85',
|
||||||
|
'#fa7b70',
|
||||||
|
'#f76a5e',
|
||||||
|
'#f25d51',
|
||||||
|
'#e64235',
|
||||||
|
'#d13328',
|
||||||
|
'#c1281d',
|
||||||
|
'#b1241a',
|
||||||
|
'#a21e15',
|
||||||
|
'#8e1911',
|
||||||
|
'#7e140d',
|
||||||
|
'#6d0f09',
|
||||||
|
'#580b06',
|
||||||
|
'#4c0904',
|
||||||
|
'#390602',
|
||||||
|
'#290300',
|
||||||
]
|
]
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
</container1>
|
</container1>
|
||||||
<container1 style="margin-right: 14px" title="单台产品信息">
|
<container1 style="margin-right: 14px" title="单台产品信息">
|
||||||
<div class="trends" style="text-align: center">
|
<div class="trends" style="text-align: center">
|
||||||
<img src="./img/left1/1.png" alt="" />
|
<img :src="dataInfo.pic" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</container1>
|
</container1>
|
||||||
</div>
|
</div>
|
||||||
@ -31,6 +31,7 @@ import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
|||||||
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
|
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
|
||||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
import colorList from '@/utils/colorPalette'
|
import colorList from '@/utils/colorPalette'
|
||||||
|
import { blueColorList, greenColorList, yelloColorList, redColorList } from '@/utils/gradualColor'
|
||||||
|
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
@ -43,6 +44,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dataInfo: {},
|
||||||
index: 0,
|
index: 0,
|
||||||
index2: 0,
|
index2: 0,
|
||||||
chart: null,
|
chart: null,
|
||||||
@ -61,18 +63,43 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
getData() {
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
this.request({
|
||||||
this.setOptions()
|
url: '/hx/scientificProduction/getProductPic',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.dataInfo = data
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions() {
|
|
||||||
|
initChart() {
|
||||||
|
this.request({
|
||||||
|
url: '/hx/scientificProduction/getModelYearPlanPic',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
this.setOptions(data)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setOptions(resData) {
|
||||||
|
let titList = []
|
||||||
|
let realCharge = [] // 实际装药量
|
||||||
|
let realDeliver = [] // 实际支付
|
||||||
|
let chargeRate = [] // 装药量率
|
||||||
|
let deliverRate = [] // 支付率
|
||||||
|
for (let i = 0; i < resData.length; i++) {
|
||||||
|
const item = resData[i]
|
||||||
|
titList.push(item.productModel)
|
||||||
|
realCharge.push(item.realCharge)
|
||||||
|
realDeliver.push(item.realDeliver)
|
||||||
|
chargeRate.push(item.chargeRate)
|
||||||
|
deliverRate.push(item.deliverRate)
|
||||||
|
}
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// Use axis to trigger tooltip
|
type: 'shadow',
|
||||||
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
|
|
||||||
},
|
},
|
||||||
|
formatter: '{b0}<br /> {a0}:{c0}%<br />{a1}: {c1}%',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -108,11 +135,12 @@ export default {
|
|||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: ['型号1', '型号1', '型号1', '型号1', '型号1', '型号1', '型号1'],
|
data: titList,
|
||||||
},
|
},
|
||||||
color: ['#55C5A2', '#55C5A2'],
|
color: ['#55C5A2', '#55C5A2'],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
roundCap: true, // 没效果
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
color: 'rgba(180, 180, 180, 0.2)',
|
color: 'rgba(180, 180, 180, 0.2)',
|
||||||
@ -127,10 +155,14 @@ export default {
|
|||||||
focus: 'series',
|
focus: 'series',
|
||||||
},
|
},
|
||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
data: [320, 302, 301, 334, 390, 330, 320],
|
data: chargeRate,
|
||||||
color: '#F6D97E',
|
color: '#F6D97E',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(180, 180, 180, 0.2)',
|
||||||
|
},
|
||||||
name: '支付',
|
name: '支付',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
stack: 'total',
|
stack: 'total',
|
||||||
@ -141,41 +173,147 @@ export default {
|
|||||||
focus: 'series',
|
focus: 'series',
|
||||||
},
|
},
|
||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
data: deliverRate,
|
||||||
color: '#55C5A2',
|
color: '#55C5A2',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
initChart2() {
|
initChart2() {
|
||||||
this.chart2 = echarts.init(this.$refs.chart2)
|
this.request({
|
||||||
this.setOptions2()
|
url: '/hx/scientificProduction/getProductionPlanPic',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart2 = echarts.init(this.$refs.chart2)
|
||||||
|
this.setOptions2(data)
|
||||||
|
})
|
||||||
|
// 测试数据
|
||||||
|
const data2 = {
|
||||||
|
allMonth: ['2021-01', '2021-02'],
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
'2021-01': [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
month: '2021-01',
|
||||||
|
productModel: '型号1',
|
||||||
|
adiabat: '10',
|
||||||
|
charge: '11',
|
||||||
|
assembly: '12',
|
||||||
|
deliver: '13',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
month: '2021-01',
|
||||||
|
productModel: '型号2',
|
||||||
|
adiabat: '16',
|
||||||
|
charge: '17',
|
||||||
|
assembly: '18',
|
||||||
|
deliver: '19',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'2021-02': [
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
month: '2021-02',
|
||||||
|
productModel: '型号1',
|
||||||
|
adiabat: '20',
|
||||||
|
charge: '21',
|
||||||
|
assembly: '22',
|
||||||
|
deliver: '23',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
month: '2021-02',
|
||||||
|
productModel: '型号2',
|
||||||
|
adiabat: '26',
|
||||||
|
charge: '27',
|
||||||
|
assembly: '28',
|
||||||
|
deliver: '29',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
allModel: ['型号1', '型号2'],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
setOptions2() {
|
setOptions2(resData) {
|
||||||
|
let adiabat = [] // 绝热数量
|
||||||
|
let deliver = [] // 交付数量
|
||||||
|
let charge = [] // 装药数量
|
||||||
|
let assembly = [] // 总装数量
|
||||||
|
|
||||||
|
let titData = resData.allModel
|
||||||
|
delete resData.allModel
|
||||||
|
let titList = []
|
||||||
|
for (let index = 0; index < titData.length; index++) {
|
||||||
|
adiabat.push([])
|
||||||
|
deliver.push([])
|
||||||
|
charge.push([])
|
||||||
|
assembly.push([])
|
||||||
|
}
|
||||||
|
let newData = {}
|
||||||
|
for (let i = 0; i < resData.list.length; i++) {
|
||||||
|
const item = resData.list[i]
|
||||||
|
for (const key in item) {
|
||||||
|
newData[key] = item[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (const key in newData) {
|
||||||
|
if (Object.hasOwnProperty.call(newData, key)) {
|
||||||
|
const item = newData[key]
|
||||||
|
titList.push(key)
|
||||||
|
for (let i = 0; i < item.length; i++) {
|
||||||
|
const ele = item[i]
|
||||||
|
let index = titData.findIndex(e => e == ele.productModel)
|
||||||
|
adiabat[index][titList.length - 1] = ele.adiabat
|
||||||
|
deliver[index][titList.length - 1] = ele.deliver
|
||||||
|
charge[index][titList.length - 1] = ele.charge
|
||||||
|
assembly[index][titList.length - 1] = ele.assembly
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// console.log(adiabat)
|
||||||
|
// console.log(deliver)
|
||||||
|
// console.log(charge)
|
||||||
|
// console.log(assembly)
|
||||||
|
|
||||||
|
// debugger
|
||||||
this.chart2.setOption({
|
this.chart2.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
formatter: (params, ticket, callback) => {
|
||||||
axisPointer: {
|
let seriesName = params.seriesName
|
||||||
type: 'shadow',
|
let newSeriesName = seriesName.split(',')
|
||||||
|
let name = params.name
|
||||||
|
let num = params.value
|
||||||
|
return `
|
||||||
|
<div>
|
||||||
|
<div>${name}</div>
|
||||||
|
<div><span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${params.color};"></span> ${newSeriesName[0]}</div>
|
||||||
|
<div>${newSeriesName[1]} ${num}</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
// data: [],
|
data: ['绝热', '交付', '装药', '总装'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff', //legend字体颜色
|
color: '#fff', //legend字体颜色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 20,
|
right: 10,
|
||||||
top: 30,
|
top: 10,
|
||||||
bottom: 50,
|
bottom: 50,
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
dataZoom: {
|
dataZoom: {
|
||||||
type: 'slider',
|
type: 'slider',
|
||||||
// start: 0,
|
start: 0,
|
||||||
// end: 50,
|
end: this.dataZoomEnd(titList.length, 5),
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
@ -183,7 +321,7 @@ export default {
|
|||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七'],
|
data: titList,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -216,66 +354,203 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
...adiabat.map((e, index) => {
|
||||||
name: '绝热',
|
return {
|
||||||
type: 'bar',
|
// name: '绝热',
|
||||||
stack: 'Ad',
|
name: '绝热,' + titData[index],
|
||||||
emphasis: {
|
type: 'bar',
|
||||||
focus: 'series',
|
stack: 'adiabat',
|
||||||
},
|
emphasis: {
|
||||||
itemStyle: {
|
focus: 'series',
|
||||||
color: '#FF9F43',
|
},
|
||||||
},
|
// barWidth: 30,
|
||||||
barWidth: 30,
|
data: e,
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
itemStyle: {
|
||||||
},
|
color: blueColorList[index],
|
||||||
{
|
},
|
||||||
name: '交付',
|
}
|
||||||
type: 'bar',
|
}),
|
||||||
stack: 'Ad',
|
...deliver.map((e, index) => {
|
||||||
emphasis: {
|
return {
|
||||||
focus: 'series',
|
// name: '交付',
|
||||||
},
|
name: '交付,' + titData[index],
|
||||||
itemStyle: {
|
type: 'bar',
|
||||||
color: '#F7DC87',
|
stack: 'deliver',
|
||||||
},
|
emphasis: {
|
||||||
barWidth: 30,
|
focus: 'series',
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
},
|
||||||
},
|
// barWidth: 30,
|
||||||
{
|
data: e,
|
||||||
name: '装药',
|
itemStyle: {
|
||||||
type: 'bar',
|
color: greenColorList[index],
|
||||||
stack: 'Ad',
|
},
|
||||||
emphasis: {
|
}
|
||||||
focus: 'series',
|
}),
|
||||||
},
|
...charge.map((e, index) => {
|
||||||
itemStyle: {
|
return {
|
||||||
color: '#7EA7FC',
|
// name: '装药',
|
||||||
},
|
name: '装药,' + titData[index],
|
||||||
barWidth: 30,
|
type: 'bar',
|
||||||
data: [150, 232, 201, 154, 190, 330, 410],
|
stack: 'charge',
|
||||||
},
|
emphasis: {
|
||||||
{
|
focus: 'series',
|
||||||
name: '总装',
|
},
|
||||||
type: 'bar',
|
// barWidth: 30,
|
||||||
stack: 'Ad',
|
data: e,
|
||||||
emphasis: {
|
itemStyle: {
|
||||||
focus: 'series',
|
color: yelloColorList[index],
|
||||||
},
|
},
|
||||||
itemStyle: {
|
}
|
||||||
color: '#8BE2CC',
|
}),
|
||||||
},
|
...assembly.map((e, index) => {
|
||||||
barWidth: 30,
|
return {
|
||||||
data: [150, 232, 201, 154, 190, 330, 410],
|
// name: '总装',
|
||||||
},
|
name: '总装,' + titData[index],
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'assembly',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
// barWidth: 30,
|
||||||
|
data: e,
|
||||||
|
itemStyle: {
|
||||||
|
color: redColorList[index],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
// {
|
||||||
|
// name: '绝热',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Ad',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: greenColorList[3],
|
||||||
|
// },
|
||||||
|
// data: adiabat[0],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '交付',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Ad',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: greenColorList[2],
|
||||||
|
// },
|
||||||
|
// data: deliver[0],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '装药',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Ad',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: greenColorList[1],
|
||||||
|
// },
|
||||||
|
// data: charge[0],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '总装',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Ad',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: greenColorList[0],
|
||||||
|
// },
|
||||||
|
// data: assembly[0],
|
||||||
|
// },
|
||||||
|
|
||||||
|
// {
|
||||||
|
// name: '绝热',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Search Engine',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// data: adiabat[1],
|
||||||
|
// itemStyle: {
|
||||||
|
// color: blueColorList[0],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '交付',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Search Engine',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// data: deliver[1],
|
||||||
|
// itemStyle: {
|
||||||
|
// color: blueColorList[1],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '装药',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Search Engine',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// data: charge[1],
|
||||||
|
// itemStyle: {
|
||||||
|
// color: blueColorList[2],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '总装',
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: 'Search Engine',
|
||||||
|
// emphasis: {
|
||||||
|
// focus: 'series',
|
||||||
|
// },
|
||||||
|
// data: assembly[1],
|
||||||
|
// itemStyle: {
|
||||||
|
// color: blueColorList[3],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
initChart3() {
|
initChart3() {
|
||||||
this.chart3 = echarts.init(this.$refs.chart3)
|
this.request({
|
||||||
this.setOptions3()
|
url: '/hx/scientificProduction/getModelProductionStatisticPic',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart3 = echarts.init(this.$refs.chart3)
|
||||||
|
this.setOptions3(data)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions3() {
|
setOptions3(resData) {
|
||||||
|
// console.log(resData)
|
||||||
|
|
||||||
|
let models = []
|
||||||
|
let adiabat = []
|
||||||
|
let charge = []
|
||||||
|
let deliver = []
|
||||||
|
let assembly = []
|
||||||
|
let review = []
|
||||||
|
let settlement = []
|
||||||
|
let productionNumber = []
|
||||||
|
|
||||||
|
for (let i = 0; i < resData.length; i++) {
|
||||||
|
const item = resData[i]
|
||||||
|
models.push(item.model)
|
||||||
|
adiabat.push(item.adiabat)
|
||||||
|
charge.push(item.charge)
|
||||||
|
deliver.push(item.deliver)
|
||||||
|
assembly.push(item.assembly)
|
||||||
|
review.push(item.review)
|
||||||
|
settlement.push(item.settlement)
|
||||||
|
productionNumber.push(item.productionNumber)
|
||||||
|
}
|
||||||
|
|
||||||
this.chart3.setOption({
|
this.chart3.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -305,7 +580,7 @@ export default {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['型号一', '型号二', '型号三'],
|
data: models,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -317,42 +592,45 @@ export default {
|
|||||||
{
|
{
|
||||||
name: '绝热数',
|
name: '绝热数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [630230, 630230, 630230],
|
data: adiabat,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '装药数',
|
name: '装药数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [530230, 530230, 530230],
|
data: charge,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '交付数(地试数)',
|
name: '交付数(地试数)',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [430230, 430230, 430230],
|
data: deliver,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '总装数',
|
name: '总装数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [330230, 330230, 330230],
|
data: assembly,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '评审数',
|
name: '评审数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [300230, 300230, 300230],
|
data: review,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '结算数',
|
name: '结算数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [230230, 230230, 230230],
|
data: settlement,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '生产数',
|
name: '生产数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [200230, 200230, 200230],
|
data: productionNumber,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -2,6 +2,29 @@
|
|||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<container2 title="型号原材料及配套件">
|
<container2 title="型号原材料及配套件">
|
||||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['原材料', '配套件']"></bigScreenTabs>
|
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['原材料', '配套件']"></bigScreenTabs>
|
||||||
|
<el-select
|
||||||
|
style="position: absolute; z-index: 1; left: 30px"
|
||||||
|
v-model="value"
|
||||||
|
size="mini"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="getLeftChartData"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
|
||||||
|
</el-select>
|
||||||
|
<div class="tit_box">
|
||||||
|
<div style="border: 1px solid #f6d97e">
|
||||||
|
<span>现有</span><span style="color: #f6d97e">{{ dataList[3] }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="border: 1px solid #55c5a2">
|
||||||
|
<span>到货</span><span style="color: #55c5a2">{{ dataList[2] }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="border: 1px solid #7ea7fc">
|
||||||
|
<span>已用</span><span style="color: #7ea7fc">{{ dataList[1] }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="border: 1px solid #fa8c16">
|
||||||
|
<span>缺少</span><span style="color: #fa8c16">{{ dataList[0] }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div style="display: flex; height: 100%">
|
<div style="display: flex; height: 100%">
|
||||||
<div style="height: 100%; width: 40%; text-align: center" ref="chart">
|
<div style="height: 100%; width: 40%; text-align: center" ref="chart">
|
||||||
<!-- <img style="margin-top: 12%" src="./img/2.png" alt="" /> -->
|
<!-- <img style="margin-top: 12%" src="./img/2.png" alt="" /> -->
|
||||||
@ -9,33 +32,28 @@
|
|||||||
<div style="height: 100%; width: 60%; padding-right: 15px">
|
<div style="height: 100%; width: 60%; padding-right: 15px">
|
||||||
<div style="margin-bottom: 1px">
|
<div style="margin-bottom: 1px">
|
||||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
<el-col style="text-align: center" :span="5">名称</el-col>
|
<el-col style="text-align: center" :span="4">项目</el-col>
|
||||||
<el-col style="text-align: center" :span="5">库位编号</el-col>
|
<el-col style="text-align: center" :span="7">关键原材料</el-col>
|
||||||
<el-col style="text-align: center" :span="7">库位类型</el-col>
|
<el-col style="text-align: center" :span="5">数量</el-col>
|
||||||
<el-col style="text-align: center" :span="7">当前状态</el-col>
|
<el-col style="text-align: center" :span="5">到货</el-col>
|
||||||
|
<el-col style="text-align: center" :span="3">已用</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<vue-seamless-scroll
|
<vue-seamless-scroll
|
||||||
:data="scrollList"
|
:data="scrollData"
|
||||||
class="warp-scroll"
|
class="warp-scroll"
|
||||||
:class-option="{
|
:class-option="{
|
||||||
singleHeight: 43,
|
singleHeight: 43,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<ul class="item">
|
<ul class="item">
|
||||||
<li v-for="(item, index) in scrollList" :key="index">
|
<li v-for="(item, index) in scrollData" :key="index">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col style="text-align: center" :span="5">{{ '库房' + index }}</el-col>
|
<el-col style="text-align: center" :span="4">{{ item.projectName }}</el-col>
|
||||||
<el-col style="text-align: center" :span="5">{{ 934 - index }}</el-col>
|
<el-col style="text-align: center" :span="7">{{ item.category }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">加宽</el-col>
|
<el-col style="text-align: center" :span="5">{{ item.total }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">
|
<el-col style="text-align: center" :span="5">{{ item.arrivalTotal }}</el-col>
|
||||||
<section class="box">
|
<el-col style="text-align: center" :span="3">{{ item.usedTotal }}</el-col>
|
||||||
<span v-if="index == 6" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
|
||||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
|
||||||
<span v-if="index == 6">使用中</span>
|
|
||||||
<span v-else>未启用</span>
|
|
||||||
</section>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -69,14 +87,16 @@
|
|||||||
<ul class="item">
|
<ul class="item">
|
||||||
<li v-for="(item, index) in scrollList" :key="index">
|
<li v-for="(item, index) in scrollList" :key="index">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col style="text-align: center" :span="5">{{ '库房' + index }}</el-col>
|
<el-col style="text-align: center" :span="5">{{ item.name }}</el-col>
|
||||||
<el-col style="text-align: center" :span="5">{{ 934 - index }}</el-col>
|
<el-col style="text-align: center" :span="5">{{ item.numberNo }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">加宽</el-col>
|
<el-col style="text-align: center" :span="7">{{ item.category }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">
|
<el-col style="text-align: center" :span="7">
|
||||||
<section class="box">
|
<section class="box">
|
||||||
<span v-if="index == 6" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
<span v-if="item.status == '使用中'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
<span v-if="index == 6">使用中</span>
|
<span v-if="item.status == '使用中'">使用中</span>
|
||||||
<span v-else>未启用</span>
|
<span v-else>未启用</span>
|
||||||
</section>
|
</section>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -93,6 +113,7 @@ import container1 from './components/container1/index.vue'
|
|||||||
import container2 from './components/container2/index.vue'
|
import container2 from './components/container2/index.vue'
|
||||||
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
|
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
|
||||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -106,9 +127,14 @@ export default {
|
|||||||
index: 0,
|
index: 0,
|
||||||
index2: 0,
|
index2: 0,
|
||||||
chart: null,
|
chart: null,
|
||||||
scrollList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
titVal: '原材料',
|
||||||
|
selectData: [],
|
||||||
|
value: '',
|
||||||
|
scrollData: [],
|
||||||
|
scrollList: [],
|
||||||
|
|
||||||
dataList: [2, 1.2, 2.4, 3.6],
|
dataList: [],
|
||||||
|
pic1List: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -117,10 +143,84 @@ export default {
|
|||||||
this.initChart2()
|
this.initChart2()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
index(newVal, oldVal) {
|
||||||
|
if (newVal == 0) {
|
||||||
|
this.titVal = '原材料'
|
||||||
|
} else {
|
||||||
|
this.titVal = '配套件'
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.request({
|
||||||
|
url: '/hx/scientificProduction/getStorehousePic',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.scrollList = data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getLeftChartData(e) {
|
||||||
|
for (let i = 0; i < this.pic1List.length; i++) {
|
||||||
|
const item = this.pic1List[i]
|
||||||
|
if (e == item.model) {
|
||||||
|
// lack // 缺少
|
||||||
|
// used // 已用
|
||||||
|
// arrival // 到货
|
||||||
|
// existing // 现有
|
||||||
|
if (item.lack) {
|
||||||
|
this.dataList[0] = item.lack
|
||||||
|
}
|
||||||
|
if (item.used) {
|
||||||
|
this.dataList[1] = item.used
|
||||||
|
}
|
||||||
|
if (item.arrival) {
|
||||||
|
this.dataList[2] = item.arrival
|
||||||
|
}
|
||||||
|
if (item.existing) {
|
||||||
|
this.dataList[3] = item.existing
|
||||||
|
}
|
||||||
|
this.setOptions()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
initChart() {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
this.request({
|
||||||
this.setOptions()
|
url: '/hx/scientificProduction/getMaterialsAccessoriesPic',
|
||||||
|
params: {
|
||||||
|
type: this.titVal,
|
||||||
|
},
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.selectData = data.modelList
|
||||||
|
this.value = data.modelList[0]
|
||||||
|
this.pic1List = data.pic1
|
||||||
|
this.scrollData = data.pic2
|
||||||
|
for (let i = 0; i < data.pic1.length; i++) {
|
||||||
|
const item = data.pic1[i]
|
||||||
|
if (this.value == item.model) {
|
||||||
|
// lack // 缺少
|
||||||
|
// used // 已用
|
||||||
|
// arrival // 到货
|
||||||
|
// existing // 现有
|
||||||
|
if (item.lack) {
|
||||||
|
this.dataList[0] = item.lack
|
||||||
|
}
|
||||||
|
if (item.used) {
|
||||||
|
this.dataList[1] = item.used
|
||||||
|
}
|
||||||
|
if (item.arrival) {
|
||||||
|
this.dataList[2] = item.arrival
|
||||||
|
}
|
||||||
|
if (item.existing) {
|
||||||
|
this.dataList[3] = item.existing
|
||||||
|
}
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
this.setOptions()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions() {
|
setOptions() {
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
@ -128,7 +228,7 @@ export default {
|
|||||||
radius: [100, '80%'],
|
radius: [100, '80%'],
|
||||||
},
|
},
|
||||||
angleAxis: {
|
angleAxis: {
|
||||||
max: 4,
|
max: Math.max(...this.dataList) + 100,
|
||||||
startAngle: 90,
|
startAngle: 90,
|
||||||
show: false, //隐藏角度轴(圆心角)
|
show: false, //隐藏角度轴(圆心角)
|
||||||
interval: 100,
|
interval: 100,
|
||||||
@ -146,40 +246,32 @@ export default {
|
|||||||
color: '#f00',
|
color: '#f00',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
trigger: 'axis',
|
// trigger: 'axis',
|
||||||
axisPointer: {
|
// axisPointer: {
|
||||||
//去掉移动的指示线
|
// //去掉移动的指示线
|
||||||
type: 'none',
|
// type: 'none',
|
||||||
},
|
// },
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
width: 160,
|
// width: 160,
|
||||||
height: 250,
|
// height: 250,
|
||||||
lineHeight: 24,
|
// lineHeight: 24,
|
||||||
},
|
// },
|
||||||
// position: ['15%', '20%'], //显示的位置
|
// // position: ['15%', '20%'], //显示的位置
|
||||||
formatter: params => {
|
// formatter: params => {
|
||||||
let dataStr = `<div><p style="font-weight:bold;margin:0 15px;">${params[0].name}</p></div>`
|
// let dataStr = `<div><p style="font-weight:bold;margin:0 15px;">${params[0].name}</p></div>`
|
||||||
params.forEach(item => {
|
// params.forEach(item => {
|
||||||
dataStr += `<div>
|
// dataStr += `<div>
|
||||||
<div style="margin: 0 8px;">
|
// <div style="margin: 0 8px;">
|
||||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
|
// <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
|
||||||
<span>${item.seriesName}</span>
|
// <span>${item.seriesName}</span>
|
||||||
<span style="float:right;color:#fff;margin-left:20px;">${item.data}</span>
|
// <span style="float:right;color:#fff;margin-left:20px;">${item.data}</span>
|
||||||
</div>
|
// </div>
|
||||||
</div>`
|
// </div>`
|
||||||
})
|
// })
|
||||||
return dataStr
|
// return dataStr
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
dataZoom: {
|
|
||||||
type: 'slider',
|
|
||||||
// start: 0,
|
|
||||||
// end: 50,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: {
|
series: {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
@ -207,14 +299,62 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
initChart2() {
|
initChart2() {
|
||||||
this.chart2 = echarts.init(this.$refs.chart2)
|
this.request({
|
||||||
this.setOptions2()
|
url: '/hx/scientificProduction/getModelStationPic',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart2 = echarts.init(this.$refs.chart2)
|
||||||
|
this.setOptions2(data)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions2() {
|
setOptions2(resData) {
|
||||||
|
let titList = []
|
||||||
|
let newData = []
|
||||||
|
// coolingNumber // 降温数
|
||||||
|
// freeNumber // 空闲数
|
||||||
|
// riseNumber // 升温数
|
||||||
|
// warmNumber // 保温数
|
||||||
|
for (const key in resData) {
|
||||||
|
if (Object.hasOwnProperty.call(resData, key)) {
|
||||||
|
const item = resData[key]
|
||||||
|
titList.push({
|
||||||
|
name: key,
|
||||||
|
value: item.total,
|
||||||
|
})
|
||||||
|
for (const k in item) {
|
||||||
|
if (Object.hasOwnProperty.call(item, k)) {
|
||||||
|
let name = ''
|
||||||
|
if (k == 'coolingNumber') name = '降温数'
|
||||||
|
else if (k == 'freeNumber') name = '空闲数'
|
||||||
|
else if (k == 'riseNumber') name = '升温数'
|
||||||
|
else if (k == 'warmNumber') name = '保温数'
|
||||||
|
if (name != '') {
|
||||||
|
newData.push({
|
||||||
|
name,
|
||||||
|
value:
|
||||||
|
name == '降温数'
|
||||||
|
? item['coolingNumber']
|
||||||
|
: name == '空闲数'
|
||||||
|
? item['freeNumber']
|
||||||
|
: name == '升温数'
|
||||||
|
? item['riseNumber']
|
||||||
|
: name == '保温数'
|
||||||
|
? item['warmNumber']
|
||||||
|
: '',
|
||||||
|
itemStyle: {
|
||||||
|
color: item.stationName == '硫化' ? '#5B8FF9' : '#5AD8A6',
|
||||||
|
borderColor: '#fff',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.chart2.setOption({
|
this.chart2.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
formatter: '{b}: {c}',
|
||||||
position: 'inner',
|
position: 'inner',
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -239,16 +379,7 @@ export default {
|
|||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: [
|
data: newData,
|
||||||
{ value: 4, name: '降温数' },
|
|
||||||
{ value: 4, name: '空闲数' },
|
|
||||||
{ value: 4, name: '升温工位数' },
|
|
||||||
{ value: 4, name: '保温数' },
|
|
||||||
{ value: 4, name: '保温数' },
|
|
||||||
{ value: 4, name: '升温工位数' },
|
|
||||||
{ value: 4, name: '空闲数' },
|
|
||||||
{ value: 4, name: '降温数' },
|
|
||||||
],
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// opacity: 0.7,
|
// opacity: 0.7,
|
||||||
// color: '#55C5A2',
|
// color: '#55C5A2',
|
||||||
@ -265,26 +396,6 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// itemStyle: {
|
|
||||||
// emphasis: {
|
|
||||||
// shadowBlur: 1,
|
|
||||||
// shadowOffsetX: 0,
|
|
||||||
// shadowColor: '#fff',
|
|
||||||
// },
|
|
||||||
// normal: {
|
|
||||||
// label: {
|
|
||||||
// show: true,
|
|
||||||
// formatter: '{b}',
|
|
||||||
// position: 'inner',
|
|
||||||
// },
|
|
||||||
// labelLine: {
|
|
||||||
// show: true,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// color: colorList,
|
|
||||||
color: ['#5B8FF9', '#5B8FF9', '#5AD8A6', '#5AD8A6'],
|
|
||||||
// color: ['#5B8FF9', '#5B8FF9', '#5B8FF9', '#5B8FF9', '#5AD8A6', '#5AD8A6', '#5AD8A6', '#5AD8A6'],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '详情',
|
name: '详情',
|
||||||
@ -307,16 +418,13 @@ export default {
|
|||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: [
|
data: titList,
|
||||||
{ value: 5, name: '硫化' },
|
|
||||||
{ value: 5, name: '固化' },
|
|
||||||
],
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
emphasis: {
|
// emphasis: {
|
||||||
shadowBlur: 1,
|
// shadowBlur: 1,
|
||||||
shadowOffsetX: 0,
|
// shadowOffsetX: 0,
|
||||||
shadowColor: '#fff',
|
// shadowColor: '#fff',
|
||||||
},
|
// },
|
||||||
normal: {
|
normal: {
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -328,16 +436,60 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// color: colorList,
|
|
||||||
color: ['#5B8FF9', '#5AD8A6'],
|
color: ['#5B8FF9', '#5AD8A6'],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.tit_box {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 90px;
|
||||||
|
top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
div {
|
||||||
|
width: 87px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
span:nth-child(1) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-select {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
.el-range-input,
|
||||||
|
.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-range-editor.is-active {
|
||||||
|
border-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
.trends {
|
.trends {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 25px;
|
padding: 0 25px;
|
||||||
|
Reference in New Issue
Block a user