williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

科研生产-项目管理

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

23
src/utils/gradualColor.js
View File

@ -64,6 +64,25 @@ export const blueColorList = [
'#052464',
'#001541',
]
export const greyColorList = [
// #FAFAFA
export const redColorList = [
'#ffeae8',
'#ffd1cd',
'#ffbab4',
'#ffa59e',
'#ff8e85',
'#fa7b70',
'#f76a5e',
'#f25d51',
'#e64235',
'#d13328',
'#c1281d',
'#b1241a',
'#a21e15',
'#8e1911',
'#7e140d',
'#6d0f09',
'#580b06',
'#4c0904',
'#390602',
'#290300',
]

448
src/views/bigScreen/scientific/tab3/left1.vue
View File

@ -19,7 +19,7 @@
</container1>
<container1 style="margin-right: 14px" title="单台产品信息">
<div class="trends" style="text-align: center">
<img src="./img/left1/1.png" alt="" />
<img :src="dataInfo.pic" alt="" />
</div>
</container1>
</div>
@ -31,6 +31,7 @@ import progressBar from '@/views/bigScreen/components/progress/index.vue'
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import colorList from '@/utils/colorPalette'
import { blueColorList, greenColorList, yelloColorList, redColorList } from '@/utils/gradualColor'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
@ -43,6 +44,7 @@ export default {
},
data() {
return {
dataInfo: {},
index: 0,
index2: 0,
chart: null,
@ -61,18 +63,43 @@ export default {
},
beforeDestroy() {},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.setOptions()
getData() {
this.request({
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({
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
type: 'shadow',
},
formatter: '{b0}<br /> {a0}:{c0}%<br />{a1}: {c1}%',
},
legend: {
textStyle: {
@ -108,11 +135,12 @@ export default {
color: 'rgb(255, 255, 255)',
},
},
data: ['型号1', '型号1', '型号1', '型号1', '型号1', '型号1', '型号1'],
data: titList,
},
color: ['#55C5A2', '#55C5A2'],
series: [
{
roundCap: true, // 没效果
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
@ -127,10 +155,14 @@ export default {
focus: 'series',
},
barWidth: 12,
data: [320, 302, 301, 334, 390, 330, 320],
data: chargeRate,
color: '#F6D97E',
},
{
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
},
name: '支付',
type: 'bar',
stack: 'total',
@ -141,41 +173,147 @@ export default {
focus: 'series',
},
barWidth: 12,
data: [120, 132, 101, 134, 90, 230, 210],
data: deliverRate,
color: '#55C5A2',
},
],
})
},
initChart2() {
this.chart2 = echarts.init(this.$refs.chart2)
this.setOptions2()
this.request({
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({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
formatter: (params, ticket, callback) => {
let seriesName = params.seriesName
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: {
// data: [],
data: ['绝热', '交付', '装药', '总装'],
textStyle: {
color: '#fff', //legend字体颜色
},
},
grid: {
left: 0,
right: 20,
top: 30,
right: 10,
top: 10,
bottom: 50,
containLabel: true,
},
dataZoom: {
type: 'slider',
// start: 0,
// end: 50,
start: 0,
end: this.dataZoomEnd(titList.length, 5),
textStyle: {
color: '#fff',
},
@ -183,7 +321,7 @@ export default {
xAxis: [
{
type: 'category',
data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七'],
data: titList,
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
@ -216,66 +354,203 @@ export default {
},
],
series: [
{
name: '绝热',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#FF9F43',
},
barWidth: 30,
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: '交付',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#F7DC87',
},
barWidth: 30,
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: '装药',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#7EA7FC',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '总装',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#8BE2CC',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410],
},
...adiabat.map((e, index) => {
return {
// name: '绝热',
name: '绝热,' + titData[index],
type: 'bar',
stack: 'adiabat',
emphasis: {
focus: 'series',
},
// barWidth: 30,
data: e,
itemStyle: {
color: blueColorList[index],
},
}
}),
...deliver.map((e, index) => {
return {
// name: '交付',
name: '交付,' + titData[index],
type: 'bar',
stack: 'deliver',
emphasis: {
focus: 'series',
},
// barWidth: 30,
data: e,
itemStyle: {
color: greenColorList[index],
},
}
}),
...charge.map((e, index) => {
return {
// name: '装药',
name: '装药,' + titData[index],
type: 'bar',
stack: 'charge',
emphasis: {
focus: 'series',
},
// barWidth: 30,
data: e,
itemStyle: {
color: yelloColorList[index],
},
}
}),
...assembly.map((e, index) => {
return {
// 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() {
this.chart3 = echarts.init(this.$refs.chart3)
this.setOptions3()
this.request({
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({
tooltip: {
trigger: 'axis',
@ -305,7 +580,7 @@ export default {
},
yAxis: {
type: 'category',
data: ['型号一', '型号二', '型号三'],
data: models,
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
@ -317,42 +592,45 @@ export default {
{
name: '绝热数',
type: 'bar',
data: [630230, 630230, 630230],
data: adiabat,
},
{
name: '装药数',
type: 'bar',
data: [530230, 530230, 530230],
data: charge,
},
{
name: '交付数(地试数)',
type: 'bar',
data: [430230, 430230, 430230],
data: deliver,
},
{
name: '总装数',
type: 'bar',
data: [330230, 330230, 330230],
data: assembly,
},
{
name: '评审数',
type: 'bar',
data: [300230, 300230, 300230],
data: review,
},
{
name: '结算数',
type: 'bar',
data: [230230, 230230, 230230],
data: settlement,
},
{
name: '生产数',
type: 'bar',
data: [200230, 200230, 200230],
data: productionNumber,
},
],
})
},
},
created() {
this.getData()
},
}
</script>

362
src/views/bigScreen/scientific/tab3/left2.vue
View File

@ -2,6 +2,29 @@
<div style="display: flex">
<container2 title="型号原材料及配套件">
<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="height: 100%; width: 40%; text-align: center" ref="chart">
<!-- <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="margin-bottom: 1px">
<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="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="4">项目</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="5">到货</el-col>
<el-col style="text-align: center" :span="3">已用</el-col>
</el-row>
</div>
<vue-seamless-scroll
:data="scrollList"
:data="scrollData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
>
<ul class="item">
<li v-for="(item, index) in scrollList" :key="index">
<li v-for="(item, index) in scrollData" :key="index">
<el-row>
<el-col style="text-align: center" :span="5">{{ '库房' + index }}</el-col>
<el-col style="text-align: center" :span="5">{{ 934 - index }}</el-col>
<el-col style="text-align: center" :span="7">加宽</el-col>
<el-col style="text-align: center" :span="7">
<section class="box">
<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-col style="text-align: center" :span="4">{{ item.projectName }}</el-col>
<el-col style="text-align: center" :span="7">{{ item.category }}</el-col>
<el-col style="text-align: center" :span="5">{{ item.total }}</el-col>
<el-col style="text-align: center" :span="5">{{ item.arrivalTotal }}</el-col>
<el-col style="text-align: center" :span="3">{{ item.usedTotal }}</el-col>
</el-row>
</li>
</ul>
@ -69,14 +87,16 @@
<ul class="item">
<li v-for="(item, index) in scrollList" :key="index">
<el-row>
<el-col style="text-align: center" :span="5">{{ '库房' + index }}</el-col>
<el-col style="text-align: center" :span="5">{{ 934 - index }}</el-col>
<el-col style="text-align: center" :span="7">加宽</el-col>
<el-col style="text-align: center" :span="5">{{ item.name }}</el-col>
<el-col style="text-align: center" :span="5">{{ item.numberNo }}</el-col>
<el-col style="text-align: center" :span="7">{{ item.category }}</el-col>
<el-col style="text-align: center" :span="7">
<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-if="index == 6">使用中</span>
<span v-if="item.status == '使用中'">使用中</span>
<span v-else>未启用</span>
</section>
</el-col>
@ -93,6 +113,7 @@ import container1 from './components/container1/index.vue'
import container2 from './components/container2/index.vue'
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import colorList from '@/utils/colorPalette'
import echarts from 'echarts'
export default {
components: {
@ -106,9 +127,14 @@ export default {
index: 0,
index2: 0,
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() {
@ -117,10 +143,84 @@ export default {
this.initChart2()
})
},
watch: {
index(newVal, oldVal) {
if (newVal == 0) {
this.titVal = '原材料'
} else {
this.titVal = '配套件'
}
this.initChart()
},
},
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() {
this.chart = echarts.init(this.$refs.chart)
this.setOptions()
this.request({
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() {
this.chart.setOption({
@ -128,7 +228,7 @@ export default {
radius: [100, '80%'],
},
angleAxis: {
max: 4,
max: Math.max(...this.dataList) + 100,
startAngle: 90,
show: false, //隐藏角度轴（圆心角）
interval: 100,
@ -146,40 +246,32 @@ export default {
color: '#f00',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
//去掉移动的指示线
type: 'none',
},
textStyle: {
width: 160,
height: 250,
lineHeight: 24,
},
// position: ['15%', '20%'], //显示的位置
formatter: params => {
let dataStr = `<div><p style="font-weight:bold;margin:0 15px;">${params[0].name}</p></div>`
params.forEach(item => {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#fff;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
},
},
dataZoom: {
type: 'slider',
// start: 0,
// end: 50,
textStyle: {
color: '#fff',
},
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// //去掉移动的指示线
// type: 'none',
// },
// textStyle: {
// width: 160,
// height: 250,
// lineHeight: 24,
// },
// // position: ['15%', '20%'], //显示的位置
// formatter: params => {
// let dataStr = `<div><p style="font-weight:bold;margin:0 15px;">${params[0].name}</p></div>`
// params.forEach(item => {
// dataStr += `<div>
// <div style="margin: 0 8px;">
// <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
// <span>${item.seriesName}</span>
// <span style="float:right;color:#fff;margin-left:20px;">${item.data}</span>
// </div>
// </div>`
// })
// return dataStr
// },
// },
series: {
type: 'bar',
barWidth: 20,
@ -207,14 +299,62 @@ export default {
})
},
initChart2() {
this.chart2 = echarts.init(this.$refs.chart2)
this.setOptions2()
this.request({
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({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
formatter: '{b}: {c}',
position: 'inner',
},
series: [
@ -239,16 +379,7 @@ export default {
labelLine: {
show: false,
},
data: [
{ value: 4, name: '降温数' },
{ value: 4, name: '空闲数' },
{ value: 4, name: '升温工位数' },
{ value: 4, name: '保温数' },
{ value: 4, name: '保温数' },
{ value: 4, name: '升温工位数' },
{ value: 4, name: '空闲数' },
{ value: 4, name: '降温数' },
],
data: newData,
itemStyle: {
// opacity: 0.7,
// 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: '详情',
@ -307,16 +418,13 @@ export default {
labelLine: {
show: false,
},
data: [
{ value: 5, name: '硫化' },
{ value: 5, name: '固化' },
],
data: titList,
itemStyle: {
emphasis: {
shadowBlur: 1,
shadowOffsetX: 0,
shadowColor: '#fff',
},
// emphasis: {
// shadowBlur: 1,
// shadowOffsetX: 0,
// shadowColor: '#fff',
// },
normal: {
label: {
show: true,
@ -328,16 +436,60 @@ export default {
},
},
},
// color: colorList,
color: ['#5B8FF9', '#5AD8A6'],
},
],
})
},
},
created() {
this.getData()
},
}
</script>
<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 {
height: 100%;
padding: 0 25px;