MLKanBan.git - Gitblit

			@@ -26,9 +26,9 @@
			<div>计划完成进度（外购） 30000吨</div>
			</div>
			<div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
			<div>生产类型</div>
			<div>生产数量</div>
			<div>完成进度</div>
			<div style="color:#fff">生产类型</div>
			<div style="color:#fff">生产数量</div>
			<div style="color:#fff">完成进度</div>
			</div>
			<div>
			<div class="kb_flex_space_between">
			@@ -40,12 +40,12 @@
			</div>
			</div>
			<div style="height: 180px;" class="kb_flex_column">
			<div class="small_title">
			<div class="small_bar" />
			<div class="small_content">预期计划原因分析</div>
			</div>
			<div style="height: 160px;" class="kb_flex_space_between">
			<div id="zhkb02" style="height: 160px;width: 520px;" />
			<!-- <div class="small_title">-->
			<!-- <div class="small_bar" />-->
			<!-- <div class="small_content">预期计划原因分析</div>-->
			<!-- </div>-->
			<div style="height: 180px;" class="kb_flex_space_between">
			<div id="zhkb02" style="height: 180px;width: 520px;" />
			</div>
			</div>
			</div>
			@@ -57,8 +57,55 @@
			</div>
			<div class="title">仓库管理</div>
			</div>
			<div class="ckgl kb_block horn">
			123
			<div class="ckgl kb_block horn kb_flex_column">
			<div style="height: 60px" class="kb_flex_space_between">
			<div style="width: 50%;">
			<div class="middle_title">
			<div class="icon">
			<svg-icon icon-class="zncc" class="svg_class" />
			</div>
			<div style="margin-left: 30px;">
			<div>8000吨</div>
			<div style="color:#fff;">昨日入库数量</div>
			</div>
			</div>
			</div>
			<div style="width: 50%;">
			<div class="middle_title">
			<div class="icon">
			<svg-icon icon-class="zncc" class="svg_class" />
			</div>
			<div style="margin-left: 30px;">
			<div>10000吨</div>
			<div style="color:#fff;">昨日出库数量</div>
			</div>
			</div>
			</div>

			</div>
			<div style="height: 190px;position: relative" class="kb_flex_space_between">
			<div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
			<div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #fff">入库及时率
			</div>

			<div style="width: 320px;margin-left: 10px;align-items: center" class="kb_block kb_flex_space_between">
			<div class="kb_flex_column" style="position: relative">
			<div style="position: absolute;left: 42px;top: 20px">0.01%</div>
			<div class="box03" />
			<div style="text-align: center">退货率</div>
			</div>
			<div class="kb_flex_column" style="position: relative">
			<div style="position: absolute;left: 42px;top: 20px">0.02%</div>
			<div class="box03" />
			<div style="text-align: center">损坏率</div>
			</div>

			</div>
			</div>
			<div style="height: 280px;position: relative" class="kb_flex_column">
			<div style="height: 20px;font-size: 18px;position: absolute;left: 220px;top: 24px">成品库存结构</div>
			<div id="zhkb13" style="height: 260px;width: 100%;" />
			</div>
			</div>
			</div>
			</div>
			@@ -91,7 +138,10 @@
			</div>
			<div class="title">车间耗能</div>
			</div>
			<div class="cjhn kb_block horn">123</div>
			<div class="cjhn kb_block horn kb_flex_column">
			<div id="zhkb08" style="height: 200px;width:100%" />
			<div id="zhkb09" style="height: 200px;width:100%" />
			</div>
			</div>
			</div>
			<!-- 右边-->
			@@ -129,7 +179,7 @@
			</div>
			<div class="title">人员分析</div>
			</div>
			<div class="ryfx kb_block horn">123</div>
			<div id="zhkb10" class="ryfx kb_block horn" />
			</div>
			<div class="kb_content_right_bottom">
			<div class="middle_title">
			@@ -138,7 +188,7 @@
			</div>
			<div class="title">设备分析</div>
			</div>
			<div class="sbfx kb_block horn">123</div>
			<div id="zhkb11" class="sbfx kb_block horn" />
			</div>
			</div>
			</div>
			@@ -150,7 +200,21 @@
			<script>
			import * as echarts from 'echarts'
			import '@/utils/world'
			import { loadEcharts, zhkb01, zhkb02, zhkb03, zhkb04, zhkb05, zhkb06, zhkb07 } from '@/utils/myEcharts'
			import {
			loadEcharts,
			zhkb01,
			zhkb02,
			zhkb03,
			zhkb04,
			zhkb05,
			zhkb06,
			zhkb07,
			zhkb08,
			zhkb09,
			zhkb10, zhkb11, zhkb12
			} from '@/utils/myEcharts'

			import '@/utils/echarts-liquidfill.min.js'

			export default {
			name: 'Index',
			@@ -174,11 +238,14 @@
			// setInterval(() => {
			// this.getzhkb02()
			// }, 10000)

			this.getzhkb12()

			this.getzhkb13()
			},
			methods: {
			getAllEcharts() {
			loadEcharts('zhkb01', zhkb01())
			// loadEcharts('zhkb02', zhkb02())
			loadEcharts('zhkb03', zhkb03())
			loadEcharts('zhkb03_2', zhkb03())
			loadEcharts('zhkb04', zhkb04())
			@@ -191,6 +258,293 @@
			loadEcharts('zhkb07_4', zhkb07())
			loadEcharts('zhkb07_5', zhkb07())
			loadEcharts('zhkb07_6', zhkb07())
			loadEcharts('zhkb08', zhkb08())
			loadEcharts('zhkb09', zhkb09())
			loadEcharts('zhkb10', zhkb10())
			loadEcharts('zhkb11', zhkb11())
			},
			getzhkb13() {
			const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
			const data = [
			{ name: '产品1', value: 100 },
			{ name: '产品2', value: 200 },
			{ name: '产品3', value: 300 },
			{ name: '产品4', value: 400 },
			{ name: '产品5', value: 500 },
			{ name: '产品6', value: 550 },
			{ name: '产品7', value: 570 },
			{ name: '产品8', value: 570 },
			{ name: '产品9', value: 570 },
			{ name: '产品10', value: 570 },
			{ name: '产品11', value: 570 },
			{ name: '产品12', value: 570 }
			]
			const option = {
			backgroundColor: 'transparent',
			grid: {
			left: '0%',
			right: '0%',
			bottom: '0%',
			top: '20%',
			containLabel: true
			},
			title: {
			text: '38%',
			// subtext: '3',
			textStyle: {
			fontSize: 26,
			color: '#09d8f2',
			lineHeight: 20
			},
			// subtextStyle: {
			// fontSize: 28,
			// color: '#333'
			// },
			textAlign: 'center',
			left: '74%',
			top: '55%'
			},
			tooltip: {
			trigger: 'item'
			},
			legend: {
			// type: 'scroll',
			orient: 'vertical',
			left: '4%',
			top: '20%',
			itemGap: 20,
			// selectedMode: false,
			// icon: 'pin',
			icon: 'roundRect',
			data: data.map(r => r.name),
			textStyle: {
			color: colorList.map(r => r),
			fontSize: 16,
			rich: {
			uname: {
			width: 100
			},
			unum: {
			// color: '#4ed139',
			color: function(value, index) {
			console.log(value, index)
			},
			width: 20,
			align: 'right'
			}
			}
			}
			// formatter(name) {
			// return `{uname\|${name}}{unum\|5000吨}`
			// }
			},
			color: colorList,
			series: [
			{
			// name: 'title',
			type: 'pie',
			radius: [60, 90],
			center: ['75%', '60%'],
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			// itemStyle: {
			// borderWidth: 3,
			// borderColor: '#fff'
			// },
			data: data
			}
			]
			}
			const myChart = echarts.init(document.getElementById('zhkb13'))

			if (option.textStyle == null) {
			option.textStyle = {
			fontFamily: 'Microsoft YaHei',
			color: '#ffffff'
			}
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart.clear()
			myChart.setOption(option, true)

			window.addEventListener('resize', function() {
			myChart.resize()
			})

			var index = 0 // 播放所在下标
			var mTime = setInterval(function() {
			myChart.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: index
			})
			index++
			if (index > data.length - 1) {
			index = 0
			}
			}, 2000)

			var currentIndex = -1 // 当前高亮图形在饼图数据中的下标
			var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器

			function highlightPie() { // 取消所有高亮并高亮当前图形
			// 遍历饼图数据，取消所有图形的高亮效果
			option.series[0].data.forEach((item, index) => {
			myChart.dispatchAction({
			type: 'downplay',
			// type: 'showTip',
			seriesIndex: 0,
			dataIndex: index
			})
			})

			// // 高亮当前图形
			myChart.dispatchAction({
			type: 'highlight',
			seriesIndex: 0,
			dataIndex: currentIndex
			})
			}

			myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
			clearInterval(changePieInterval)
			currentIndex = params.dataIndex
			highlightPie()
			})

			myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
			if (changePieInterval) {
			clearInterval(changePieInterval)
			}
			changePieInterval = setInterval(selectPie, 1000)
			})

			function selectPie() { // 高亮效果切换到下一个图形
			var dataLen = option.series[0].data.length
			currentIndex = (currentIndex + 1) % dataLen
			highlightPie()
			}
			},
			getzhkb12() {
			const option = {
			backgroundColor: 'transparent',
			grid: {
			left: '0%',
			right: '0%',
			bottom: '0%',
			top: '0%',
			containLabel: true
			},
			title: {
			text: '85%',
			x: '36%',
			y: '40%',
			textStyle: {
			color: '#fff',
			fontSize: 26
			}
			},
			series: [
			{
			type: 'liquidFill',
			radius: '80%',
			// data: [0.6],
			data: [0.6, 0.4, 0.2],
			backgroundStyle: {
			color: {
			type: 'radial',
			x: 0.5,
			y: 0.5,
			r: 0.5,
			colorStops: [
			{
			offset: 0,
			color: 'rgba(0,24,55, 0)'
			},
			{
			offset: 0.75,
			color: 'rgba(0,24,55, 0)'
			},
			{
			offset: 1,
			color: 'rgba(37,237,259, 1)'
			}],
			globalCoord: false
			}
			},
			outline: {
			borderDistance: 0,
			itemStyle: {
			borderWidth: 0,
			borderColor: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			offset: 0,
			color: 'rgba(50,115,256, 1)'
			}, {
			offset: 0.5,
			color: 'rgba(50,115,233, .75)'
			}, {
			offset: 1,
			color: 'rgba(50,115,233, 1)'
			}],
			globalCoord: false
			}
			}
			},
			color: ['rgba(9,216,242, .8)', 'rgba(9,216,242, 0.6)', 'rgba(9,216,242, 0.4)'],
			// color: {
			// type: 'linear',
			// x: 0,
			// y: 0,
			// x2: 0,
			// y2: 1
			// colorStops: [{
			// offset: 0,
			// color: 'rgba(37,237,259, 1)'
			// }, {
			// offset: 0.5,
			// color: 'rgba(0,100,259, 0.5)'
			// }, {
			// offset: 1,
			// color: 'darkblue'
			// }
			// ]
			// globalCoord: false
			// },
			label: {
			normal: {
			formatter: ''
			}
			}
			}
			]
			}
			const myChart = echarts.init(document.getElementById('zhkb12'))

			if (option.textStyle == null) {
			option.textStyle = {
			fontFamily: 'Microsoft YaHei',
			color: '#ffffff'
			}
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart.clear()
			myChart.setOption(option, true)

			window.addEventListener('resize', function() {
			myChart.resize()
			})
			},
			getEchartsHead(id) {
			const barWidth = 12
			@@ -419,26 +773,26 @@
			color: colorArr,
			backgroundColor: 'transparent',
			title: {
			show: false,
			text: '总数',
			subtext: 7789,
			show: true,
			text: '预期计划原因分析',
			// subtext: 7789,
			textStyle: {
			color: '#f2f2f2',
			fontSize: 40
			color: '#09d8f2',
			fontSize: 16
			// align: 'center'
			},
			subtextStyle: {
			fontSize: 30,
			color: ['#ff9d19']
			},
			// subtextStyle: {
			// fontSize: 30,
			// color: ['#ff9d19']
			// },
			x: 'center',
			y: 'center'
			y: '-2%'
			},
			grid: {
			left: '0%',
			right: '4%',
			bottom: '4%',
			top: '15%',
			top: '20%',
			containLabel: true
			},
			legend: {
			@@ -621,7 +975,7 @@
			highlightPie()
			}

			return myChart
			// return myChart
			}

			}
			@@ -794,6 +1148,12 @@
			//background-color: rgba(0,255,255,1);
			}

			.box03 {
			width: 124px;
			height: 139px;
			background: url("../../assets/images/box03.png");
			}

			.middle_title {
			display: flex;
			align-items: flex-end;
			@@ -809,6 +1169,7 @@
			font-size: 26px;
			margin-left: 5px;
			}

			}

			.small_title {