861 lines
18 KiB
Vue
861 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<container2 title="质量问题">
|
||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '月度']"></bigScreenTabs>
|
||
<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
|
||
<div style="height: 100%; width: 100%" ref="chart1" v-else></div>
|
||
</container2>
|
||
<container2 title="质量检查分析" style="margin-top: 10px">
|
||
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['总厂', '部门']"></bigScreenTabs>
|
||
<div style="height: 100%; width: 100%" ref="chart2" v-if="index2 == 0"></div>
|
||
<div style="height: 100%; width: 100%" ref="chart22" v-else></div>
|
||
</container2>
|
||
<container2 title="质量案例/检查明细" style="margin-top: 10px">
|
||
<bigScreenTabs slot="datePicker" v-model="index3" :titleArr="['案例', '明细']"></bigScreenTabs>
|
||
<el-row style="padding: 15px 30px" v-if="index3 == 0">
|
||
<el-col :span="24" style="margin-bottom: 1px">
|
||
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||
<el-col style="text-align: center" :span="4">序号</el-col>
|
||
<el-col style="text-align: center" :span="8">部门</el-col>
|
||
<el-col style="text-align: center" :span="12">作业内容</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<vue-seamless-scroll
|
||
:data="scrollList"
|
||
class="warp-scroll"
|
||
ref="seamlessScroll"
|
||
:class-option="{
|
||
singleHeight: 43,
|
||
}"
|
||
>
|
||
<ul class="item">
|
||
<li v-for="item in scrollList" :key="item.id">
|
||
<el-row style="font-size: 14px">
|
||
<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
|
||
<el-col style="text-align: center" :span="8">{{ item.className }}</el-col>
|
||
<el-col style="text-align: center" :title="item.faultRevelation" :span="12">{{ item.faultRevelation }}</el-col>
|
||
</el-row>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</el-row>
|
||
<el-row style="padding: 15px 30px" v-if="index3 == 1">
|
||
<!-- <el-col :span="24" style="margin-bottom: 1px">
|
||
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||
<el-col style="text-align: center" :span="4">序号</el-col>
|
||
<el-col style="text-align: center" :span="8">部门</el-col>
|
||
<el-col style="text-align: center" :span="12">作业内容(明细)</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<vue-seamless-scroll
|
||
:data="listData"
|
||
class="warp-scroll"
|
||
:class-option="{
|
||
singleHeight: 43,
|
||
}"
|
||
>
|
||
<ul class="item">
|
||
<li v-for="item in scrollList" :key="item.id">
|
||
<el-row style="font-size: 14px">
|
||
<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
|
||
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
|
||
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
|
||
</el-row>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll> -->
|
||
</el-row>
|
||
</container2>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import rocketTit from '../components/rocketTit/index.vue'
|
||
import container2 from './components/container2/index.vue'
|
||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||
import colorList from '@/utils/colorPalette'
|
||
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
|
||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
// import {Liquid} from '@antv/g2plot';
|
||
// import resize from '../../dashboard/mixins/resize'
|
||
import echarts from 'echarts'
|
||
require('echarts/theme/macarons') // echarts theme
|
||
export default {
|
||
// mixins: [resize],
|
||
name: 'left1',
|
||
components: {
|
||
rocketTit,
|
||
container2,
|
||
bigScreenTabs,
|
||
progressBar,
|
||
vueSeamlessScroll,
|
||
},
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
index2: 0,
|
||
index3: 0,
|
||
colorList,
|
||
chart: null,
|
||
chart1: null,
|
||
chart2: null,
|
||
chart22: null,
|
||
|
||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||
scrollList: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initChart()
|
||
this.initLine()
|
||
this.getData()
|
||
})
|
||
},
|
||
watch: {
|
||
index(newVal, oldVal) {
|
||
if (newVal == 0) {
|
||
this.chart1.dispose()
|
||
this.chart1 = null
|
||
this.$nextTick(() => {
|
||
this.initChart()
|
||
})
|
||
} else {
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
this.$nextTick(() => {
|
||
this.initChart1()
|
||
})
|
||
}
|
||
},
|
||
index2(newVal, oldVal) {
|
||
if (newVal == 0) {
|
||
this.chart22.dispose()
|
||
this.chart22 = null
|
||
this.$nextTick(() => {
|
||
this.initLine()
|
||
})
|
||
} else {
|
||
this.chart2.dispose()
|
||
this.chart2 = null
|
||
this.$nextTick(() => {
|
||
this.initChart22()
|
||
})
|
||
}
|
||
},
|
||
},
|
||
beforeDestroy() {},
|
||
methods: {
|
||
// 获取滚动列表数据
|
||
getData() {
|
||
this.request({
|
||
url: '/hx/qualityAssurance/getHxQualityCasePic',
|
||
method: 'get',
|
||
}).then(({ data }) => {
|
||
this.scrollList = data
|
||
this.$refs.seamlessScroll.reset()
|
||
})
|
||
},
|
||
// 右上切换前
|
||
initChart() {
|
||
this.request({
|
||
url: '/hx/qualityAssurance/getQualityProblem',
|
||
method: 'get',
|
||
params: {
|
||
type: '1',
|
||
},
|
||
}).then(({ data }) => {
|
||
this.chart = echarts.init(this.$refs.chart)
|
||
this.setOptions(data.list)
|
||
})
|
||
},
|
||
setOptions(resData) {
|
||
resData.map((item, index) => {
|
||
item.value.map(i => {
|
||
i.value = i.TOTAL
|
||
})
|
||
})
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
right: '5%',
|
||
orient: 'vertical',
|
||
y: 'center',
|
||
// left: 'right',
|
||
textStyle: {
|
||
color: '#fff', //legend字体颜色
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: resData[0].dimension,
|
||
type: 'pie',
|
||
center: ['35%', '50%'],
|
||
radius: ['60%', '80%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: '40',
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: resData[0].value,
|
||
// [
|
||
// { value: 1048, name: '型号1' },
|
||
// { value: 735, name: '型号2' },
|
||
// { value: 580, name: '型号3' },
|
||
// { value: 484, name: '型号4' },
|
||
// { value: 301, name: '型号5' },
|
||
// ],
|
||
color: blueColorList,
|
||
},
|
||
{
|
||
name: resData[1].dimension,
|
||
type: 'pie',
|
||
radius: ['35%', '55%'],
|
||
center: ['35%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: '40',
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: resData[1].value,
|
||
// [
|
||
// { value: 1048, name: '类别1' },
|
||
// { value: 735, name: '类别2' },
|
||
// { value: 580, name: '类别3' },
|
||
// { value: 484, name: '类别4' },
|
||
// { value: 300, name: '类别5' },
|
||
// ],
|
||
color: greenColorList,
|
||
},
|
||
{
|
||
name: resData[2].dimension,
|
||
type: 'pie',
|
||
radius: ['10%', '30%'],
|
||
center: ['35%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: '40',
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: resData[2].value,
|
||
// [
|
||
// { value: 1048, name: '部门1' },
|
||
// { value: 735, name: '部门2' },
|
||
// { value: 580, name: '部门3' },
|
||
// { value: 484, name: '部门4' },
|
||
// { value: 300, name: '部门5' },
|
||
// ],
|
||
color: yelloColorList,
|
||
},
|
||
],
|
||
})
|
||
},
|
||
// 右上切换后
|
||
initChart1() {
|
||
this.request({
|
||
url: '/hx/qualityAssurance/getQualityProblem',
|
||
method: 'get',
|
||
params: {
|
||
type: '2',
|
||
},
|
||
}).then(({ data }) => {
|
||
this.chart1 = echarts.init(this.$refs.chart1)
|
||
this.setOptions1(data)
|
||
})
|
||
},
|
||
setOptions1(resData) {
|
||
let titData = resData.allName
|
||
delete resData.allName
|
||
let titList = []
|
||
let valList = []
|
||
for (let index = 0; index < titData.length; index++) {
|
||
valList.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.name)
|
||
valList[index][titList.length - 1] = ele.COMPLETED
|
||
}
|
||
}
|
||
}
|
||
|
||
this.chart1.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
legend: {
|
||
data: titData,
|
||
textStyle: {
|
||
color: '#fff', //legend字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
left: 20,
|
||
right: 20,
|
||
top: 30,
|
||
bottom: 50,
|
||
containLabel: true,
|
||
},
|
||
dataZoom: {
|
||
type: 'slider',
|
||
start: 0,
|
||
end: this.dataZoomEnd(titList.length, 5),
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
color: colorList,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: titList,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: '个',
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ['rgba(255, 255, 255,.5)'],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
},
|
||
],
|
||
series: [
|
||
...valList.map((e, index) => {
|
||
return {
|
||
name: titData[index],
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
emphasis: {
|
||
focus: 'series',
|
||
},
|
||
barWidth: 30,
|
||
data: e,
|
||
}
|
||
}),
|
||
],
|
||
})
|
||
},
|
||
|
||
initLine() {
|
||
this.request({
|
||
url: '/hx/qualityAssurance/getHxQualityInspect',
|
||
method: 'get',
|
||
params: {
|
||
type: '1',
|
||
},
|
||
}).then(({ data }) => {
|
||
this.chart2 = echarts.init(this.$refs.chart2)
|
||
this.setOptions2(data.factory)
|
||
})
|
||
},
|
||
setOptions2(resData) {
|
||
let month = []
|
||
let cate = [] // 率
|
||
let completed = [] // 完成
|
||
for (let i = 0; i < resData.length; i++) {
|
||
const item = resData[i]
|
||
month.push(item.month)
|
||
cate.push(item.CATE)
|
||
completed.push(item.COMPLETED)
|
||
}
|
||
this.chart2.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
legend: {
|
||
data: ['数量', '完成率'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '6%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: month,
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '个',
|
||
min: 0,
|
||
// max: 250,
|
||
// interval: 50,
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
// interval: 5,
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
grid: {
|
||
containLabel: true,
|
||
width: '99%',
|
||
left: 0,
|
||
top: 50,
|
||
bottom: 50,
|
||
},
|
||
dataZoom: {
|
||
type: 'slider',
|
||
start: 0,
|
||
end: this.dataZoomEnd(month.length, 5),
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '数量',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: completed,
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear', // 线性渐变
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#F49220', // 0%处的颜色为红色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#F6D97E', // 100%处的颜色为蓝
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '完成率',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
smooth: false,
|
||
data: cate,
|
||
itemStyle: {
|
||
color: '#55C5A2',
|
||
},
|
||
symbol: 'none',
|
||
},
|
||
],
|
||
// yAxis: {
|
||
// type: 'value',
|
||
// splitLine: {
|
||
// show: false//不显示网格线
|
||
// },
|
||
// splitArea: {
|
||
// show: false//不显示网格区域
|
||
// },
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: 'rgb(255, 255, 255)'
|
||
// },
|
||
// }
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: '利润',
|
||
// type: 'bar',
|
||
// data: [
|
||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '数量',
|
||
// type: 'bar',
|
||
// data: [
|
||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '完成率',
|
||
// type: 'line',
|
||
// yAxisIndex: 1,
|
||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||
// }
|
||
|
||
// ]
|
||
})
|
||
},
|
||
initChart22() {
|
||
this.request({
|
||
url: '/hx/qualityAssurance/getHxQualityInspect',
|
||
method: 'get',
|
||
params: {
|
||
type: '2',
|
||
},
|
||
}).then(({ data }) => {
|
||
this.chart22 = echarts.init(this.$refs.chart22)
|
||
this.setOptions22(data.dept)
|
||
})
|
||
},
|
||
setOptions22(resData) {
|
||
console.log(resData)
|
||
let deptName = []
|
||
let cate = [] // 率
|
||
let completed = [] // 完成
|
||
let total = [] // 总
|
||
for (let i = 0; i < resData.length; i++) {
|
||
const item = resData[i]
|
||
deptName.push(item.dept_name)
|
||
cate.push(item.CATE)
|
||
completed.push(item.COMPLETED)
|
||
total.push(item.TOTAL)
|
||
}
|
||
this.chart22.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
// legend: {
|
||
// // data: ['收入', '实际', '目标'],
|
||
// textStyle: {
|
||
// color: '#fff', //legend字体颜色
|
||
// },
|
||
// // selectedMode: false,
|
||
// },
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 50,
|
||
},
|
||
xAxis: {
|
||
data: deptName,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
dataZoom: {
|
||
type: 'slider',
|
||
start: 0,
|
||
end: this.dataZoomEnd(deptName.length, 5),
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
color: ['#ccc', 'red'],
|
||
yAxis: [
|
||
{
|
||
name: '个',
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ['rgba(255, 255, 255,.5)'],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '收入',
|
||
type: 'bar',
|
||
z: '-1',
|
||
barGap: '-75%',
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
color: 'rgba(85, 197, 162, .3)',
|
||
},
|
||
data: total,
|
||
},
|
||
{
|
||
name: '实际',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: 'rgba(90, 216, 166, 0.85)',
|
||
},
|
||
data: completed,
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear', // 线性渐变
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#F49220', // 0%处的颜色为红色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#F6D97E', // 100%处的颜色为蓝
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '目标',
|
||
type: 'scatter',
|
||
symbol: 'rect',
|
||
symbolSize: [30, 4],
|
||
symbolOffset: [3, 0],
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: '#F6D97E',
|
||
},
|
||
yAxisIndex: 1,
|
||
data: cate,
|
||
},
|
||
],
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.warp-scroll {
|
||
height: 172px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
li,
|
||
a {
|
||
display: block;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
}
|
||
li {
|
||
display: block;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||
// opacity: 0.6;
|
||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||
margin-bottom: 1px;
|
||
img {
|
||
vertical-align: sub;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
.box {
|
||
padding: 0 0 5px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
.num {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content1 {
|
||
// height: 200px;
|
||
height: 100%;
|
||
|
||
.chart1 {
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
height: 192px;
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
.num {
|
||
font-size: 30px;
|
||
font-family: Roboto-BlackItalic, Roboto;
|
||
font-weight: normal;
|
||
color: #91d5fe;
|
||
vertical-align: sub;
|
||
// margin-right: 3px;
|
||
}
|
||
|
||
.content2 {
|
||
padding: 20px;
|
||
flex: 1;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.chart2 {
|
||
height: 100%;
|
||
}
|
||
|
||
.tit {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
position: relative;
|
||
padding-left: 15px;
|
||
}
|
||
.tit::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 0px;
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #00ffff;
|
||
}
|
||
}
|
||
</style>
|