科研生产-项目管理

This commit is contained in:
熊丽君
2021-12-27 15:08:26 +08:00
parent f47e608abf
commit 0eae02dbe7
3 changed files with 641 additions and 192 deletions

View File

@ -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',
] ]

View File

@ -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>

View File

@ -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;