productDev/dmMes.git

			@@ -67,24 +67,24 @@
			<div @mouseenter="handleMouseEnter1" @mouseleave="handleMouseLeave1" class="main_container">
			<div ref="scrollContainer1" class="scroll_container">
			<div v-for="(item, index) in data.plannedProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
			<div class="scroll_item_row">323444112</div>
			<div class="scroll_item_row">电吉他</div>
			<div class="scroll_item_row">CP003</div>
			<div class="scroll_item_row">1000</div>
			<div class="scroll_item_row">{{ item.code }}</div>
			<div class="scroll_item_row">{{ item.materialName }}</div>
			<div class="scroll_item_row">{{ item.materialCode }}</div>
			<div class="scroll_item_row">{{ item.num }}</div>
			<div class="scroll_item_row">
			<el-tooltip
			v-for="(child, i) in 6" :key="i"
			v-for="(child, i) in item.procedureList" :key="i"
			effect="dark"
			content="已报工良品数1000；工序计划数500"
			placement="top">
			<div class="scroll_item_row_item">
			<div class="scroll_item_row_item" @click="jump(child.procedureId)">
			<div class="scroll_item_row_item_x"></div>
			<img v-if="i == 0 \|\| i == 1" src="@/assets/img/ic_complete@2x.png" alt="" />
			<span v-else>98%</span>
			<span v-else>{{ child.rate }}%</span>
			</div>
			</el-tooltip>
			</div>
			<div class="scroll_item_row">498/500</div>
			<div class="scroll_item_row">{{ item.qualifiedNum }}/{{ item.doneNum }}</div>
			</div>
			</div>
			</div>
			@@ -152,8 +152,8 @@
			<span>近7天不良品分布</span>
			</div>
			<div class="content_right_top_nr">
			<div class="content_right_top_nr_bottom_yuan">
			<span>67</span>
			<div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0">
			<span>{{ data.num }}</span>
			<span>不良项分布</span>
			</div>
			<div class="content_right_top_nr_top" id="lineChrat"></div>
			@@ -189,10 +189,13 @@
			</template>

			<script setup>
			import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick, computed, watch } from 'vue'
			import { getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage } from '@/utils/api.js'
			import { reactive, ref, onBeforeUnmount, onUnmounted, nextTick, computed, watch } from 'vue'
			import { getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js'
			import { useCounterStore } from '@/stores/counter.js'
			import * as echarts from 'echarts'
			import { useRouter } from 'vue-router'

			const router = useRouter()

			let data = reactive({
			production: [],
			@@ -201,22 +204,9 @@
			processProgress: [],
			log: [],
			patrolInspection: [],
			dayDistribution: [
			{ date: '8/1', num: '20' },
			{ date: '8/2', num: '10' },
			{ date: '8/3', num: '20' },
			{ date: '8/4', num: '40' },
			{ date: '8/5', num: '30' },
			{ date: '8/6', num: '10' },
			{ date: '8/7', num: '20' },
			],
			typeDistribution: [
			{ name: '外观不良', num: 15 },
			{ name: '有毛刺', num: 12 },
			{ name: '尺寸不良', num: 22 },
			{ name: '有划痕', num: 5 },
			{ name: '其他', num: 2 }
			]
			dayDistribution: [],
			typeDistribution: [],
			num: 0
			})

			let timer = ref(null)
			@@ -254,6 +244,10 @@
			const departId = computed(() => {
			return enterprise.departId
			})

			const jump = (procedureId) => {
			router.push({ name: 'process', query: { procedureId } })
			}

			watch(() => departId.value, (val) => {
			if (val) {
			@@ -307,6 +301,34 @@
			start4()
			})
			})
			// 近七天不良数
			getUnqualified7DayData(companyId.value, departId.value, '')
			.then(res => {
			if (res && res.length > 0) {
			data.dayDistribution = res.map(item => {
			return {
			date: item.createTime,
			num: item.unqualifiedNum
			}
			})
			setDayChart()
			}
			})
			// 近七天不良项
			getUnqualifiedCateData(companyId.value, departId.value, '')
			.then(res => {
			if (res && res.length > 0) {
			data.num = 0
			data.typeDistribution = res.map(item => {
			data.num += item.unqualifiedNum
			return {
			name: item.categoryName,
			num: item.unqualifiedNum
			}
			})
			setTypeChart()
			}
			})
			}
			})

			@@ -320,15 +342,16 @@
			let myChart = echarts.init(dayChartDom);
			let dateList = []
			let numList = []

			let num = 0
			data.dayDistribution.forEach(item => {
			dateList.push(item.date)
			numList.push(item.num)
			num += item.num
			})
			let option;
			option = {
			title: {
			text: '近七日不良品总数：67',
			text: `近七日不良品总数：${num}`,
			textStyle: {
			color: '#fff',
			fontSize: 12
			@@ -409,92 +432,87 @@
			* 不良类型分布
			*/
			function setTypeChart() {
			let dayChartDom = document.getElementById('pieChart');
			let myChart = echarts.init(dayChartDom);
			let legendData = []
			let seriesData = []
			data.typeDistribution.forEach(item => {
			legendData.push(item.name)
			seriesData.push({name:item.name, value:item.num})
			})
			let option = {
			// title: {
			// text: '同名数量统计',
			// subtext: '纯属虚构',
			// left: 'center'
			// },
			// tooltip: {
			// trigger: 'item',
			// formatter: '{a} <br/>{b} : {c} ({d}%)'
			// },
			legend: {
			show: false,
			type: 'scroll',
			orient: 'vertical',
			right: 10,
			top: 20,
			bottom: 20,
			data: legendData
			},
			series: [
			{
			// name: '姓名',
			type: 'pie',
			let dayChartDom = document.getElementById('pieChart');
			let myChart = echarts.init(dayChartDom);
			let legendData = []
			let seriesData = []
			data.typeDistribution.forEach(item => {
			legendData.push(item.name)
			seriesData.push({name:item.name, value:item.num})
			})
			let option = {
			// title: {
			// text: '同名数量统计',
			// subtext: '纯属虚构',
			// left: 'center'
			// },
			// tooltip: {
			// trigger: 'item',
			// formatter: '{a} <br/>{b} : {c} ({d}%)'
			// },
			legend: {
			show: false,
			type: 'scroll',
			orient: 'vertical',
			right: 10,
			top: 20,
			bottom: 20,
			data: legendData
			},
			series: [
			{
			// name: '姓名',
			type: 'pie',

			radius: ['60%', '70%'],
			// avoidLabelOverlap: false,
			itemStyle: {
			borderRadius: 4,
			borderColor: 'rgba(52, 88, 159, 0.4)',
			borderWidth: 4
			},
			center: ['50%', '50%'],
			labelLine: {
			show: false
			},
			label: {
			formatter:'{dot\| } {title\|{b} {c}}\n\n{per\|{d}%}',
			rich: {
			title: {
			color: '#fff'
			radius: ['60%', '70%'],
			// avoidLabelOverlap: false,
			itemStyle: {
			borderRadius: 4,
			borderColor: 'rgba(52, 88, 159, 0.4)',
			borderWidth: 4
			},
			per: {
			color: '#01D9FE'
			center: ['50%', '50%'],
			labelLine: {
			show: false
			},
			dot: {
			backgroundColor: 'inherit',
			width: 8,
			height: 8,
			borderRadius: 4
			label: {
			formatter:'{dot\| } {title\|{b} {c}}\n\n{per\|{d}%}',
			rich: {
			title: {
			color: '#fff'
			},
			per: {
			color: '#01D9FE'
			},
			dot: {
			backgroundColor: 'inherit',
			width: 8,
			height: 8,
			borderRadius: 4
			}
			}
			},
			// labelLayout: {
			// hideOverlap: true
			// },
			endLabel: {
			show: true,
			distance: 5,
			color: "red"
			},
			data: seriesData,
			emphasis: {
			itemStyle: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 1)'
			}
			}
			}
			},
			// labelLayout: {
			// hideOverlap: true
			// },
			endLabel: {
			show: true,
			distance: 5,
			color: "red"
			},
			data: seriesData,
			emphasis: {
			itemStyle: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 1)'
			}
			}
			]
			}
			]
			option && myChart.setOption(option);
			}
			option && myChart.setOption(option);
			}

			onMounted(() => {
			setDayChart()
			setTypeChart()
			})

			onBeforeUnmount(()=>{
			clearTimeout(timer.value)
			@@ -519,7 +537,6 @@
			if (i == 0) {
			getWorkPlansList(companyId.value, departId.value)
			.then(res => {
			console.log(res)
			data.plannedProgress = res
			nextTick(() => {
			start1()
			@@ -528,7 +545,6 @@
			} else {
			getProcedureProcessList(companyId.value, departId.value)
			.then(res => {
			console.log(res)
			data.processProgress = res
			nextTick(() => {
			start2()