smart-web.git - Gitblit

			@@ -1,24 +1,230 @@
			<!--
			* @Date: 2024-04-09 22:11:21
			* @LastEditors: Sneed
			* @LastEditTime: 2024-04-13 22:16:48
			* @LastEditTime: 2024-04-25 23:03:53
			* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue
			实时看板
			-->
			<template>
			<el-main>
			<el-card shadow="never">
			效率分析
			<el-container style="height: 100%;">
			<el-aside width="300px" style="height: 100%;">
			<el-container>
			<el-main class="nopadding">
			<el-row style="margin-top: 14px;">
			工位
			</el-row>
			<MYTree v-model="treeChecked" @loaded="query"></MYTree>
			</el-main>
			</el-container>
			</el-aside>
			<el-container>
			<el-main v-show="list.length > 0">
			<el-row>
			<el-col :span="4">
			<!-- <el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" /> -->
			</el-col>
			<el-col :span="20" style='text-align: right;'>
			<el-date-picker :max-range="3" :clearable="false" value-format="YYYY-MM-DD"
			style="width: 250px" v-model="time" type="daterange" range-separator="-"
			start-placeholder="" end-placeholder="" :disabled-date="disabledDate"
			@calendar-change="change" />
			</el-col>
			</el-row>
			<TimeLine v-model="timeRange" ref="timeLine"></TimeLine>
			<el-collapse v-model="activeList">
			<el-collapse-item :title="item.description" :name="index" v-for="(item, index) in list"
			:key="index">
			<div>
			<el-button size="small">查看数据</el-button>
			</div>
			<scEcharts v-if="item?.dayCharts?.series?.length > 1 && activeList.indexOf(index) > -1"
			style="width:100%" height="300px" :option="item?.dayCharts">

			</scEcharts>
			<el-empty v-else description="暂无数据" />
			</el-collapse-item>
			</el-collapse>
			</el-main>
			<el-main v-show="list.length == 0">
			<el-empty description="暂无数据" />
			</el-main>
			</el-container>
			</el-container>
			</el-card>
			</el-main>
			</template>

			<script>
			export default {

			}
			import moment from 'moment'
			import scEcharts from '@/components/scEcharts';
			import TimeLine from './TimeLine.vue'
			import MYTree from '../MYTree.vue'

			export default {
			components: {
			TimeLine,
			MYTree,
			scEcharts
			},
			watch: {
			treeChecked() {
			this.query()
			},
			time() {
			this.query()
			},
			timeRange(val) {
			this.queryChart()
			}
			},
			data() {
			return {
			isShowTable: false,
			list: [],
			activeList: [0, 1, 2, 3, 4, 5, 6, 7, 8],
			timeRange: '',
			treeChecked: [],
			timeStart: moment().format('YYYY-MM-DD'),
			time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
			disabledDate: Date => {
			let max = moment(this.timeStart, 'YYYY-MM-DD').add(3, 'd').format('YYYY-MM-DD')
			let min = moment(this.timeStart, 'YYYY-MM-DD').subtract(3, 'd').format('YYYY-MM-DD')
			return !moment(Date).isBetween(min, max);
			},
			dayCharts1: {
			},
			dayCharts2: {
			},
			dayCharts3: {
			},
			dayCharts4: {
			},
			dayCharts5: {
			},
			}
			},
			created() {
			// console.log(series)
			},
			methods: {
			init() {
			this.$HTTP.get('/api/blade-mdc/process-parameter').then(res => {
			if (res.code === 200) {
			this.legend = res.data
			}
			})
			},
			query() {
			this.$refs?.timeLine?.init({
			dates: this.time,
			workstationId: this.treeChecked.toString()
			})
			this.$HTTP.get('/api/blade-mdc/process-parameter/param', { workstationId: this.treeChecked.toString() }).then(res => {
			if (res.code === 200) {
			this.list = res.data
			this.queryChart()
			}
			})
			},
			queryChart() {
			this.list.forEach(item => {
			this.queryChart1(item)
			})
			},
			queryChart1(item) {
			let index = this.list.findIndex(item => item.name === 'DeviceStatus')
			this.list[index] = Object.assign({
			...this.list[index],
			dayCharts: {}
			})
			this.$HTTP.post('/api/blade-mdc/process-parameter/chart/dmp-item', {
			methodEnum: "HOUR",
			startTime: this.timeRange.startTime,
			endTime: this.timeRange.endTime,
			workstationId: this.treeChecked.toString(),
			workstationName: '',
			dmpDTO: {
			id: this.treeChecked.toString(),
			dmpDeviced: item.dmpDeviceId,
			name: item.name,
			description: item.description,
			dataType: item.dataType,
			wcsDataType: item.wcsDataType,
			processParameter: item.processParameter
			}
			}).then(res => {
			if (['DeviceStatus', 'ProcessProgram'].includes(item.name)) {
			this.setDeviceStatusOptions(res.data, item.name)
			}
			})
			},
			setDeviceStatusOptions(data, name) {
			let total = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime)))
			let start = this.timeRange.startTime
			let series = data.data.map((item, i) => {
			let current = Math.abs(moment(start).diff(moment(item.time)))
			start = item.time
			let name = i === 0 ? '' : data.data[i - 1].name
			let color = !name ? 'transparent' : data.data[i - 1].color
			return {
			name,
			type: 'bar',
			stack: 'total',
			barWidth: '20px',
			data: [current / total * 60],
			label: {
			show: true,
			position: 'insideLeft',
			color: '#FFF',
			formatter: params => {
			if (i == 0 \|\| current === 0) return ''
			return `${name}:开始时间${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}`
			}
			},
			itemStyle: {
			color, // 这一行固定的颜色值需要删除或注释
			borderColor: '#FFF',
			borderWidth: 1
			},
			}
			})
			let arr = [12, 8, 9, 4]
			let splitNumber = arr[Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime))) / 3600000 - 1]
			let dayCharts = {
			legend: [
			],
			title: {
			text: '设备状态统计图',
			subtext: '',
			},
			yAxis: {
			type: 'category',
			data: ['']
			},
			series,
			xAxis: {
			type: 'value',
			splitNumber,
			axisLabel: {
			formatter: (value, index) => {
			console.log('>>>>>>>', value, index)
			}
			},
			},
			}
			let index = this.list.findIndex(item => item.name === name)
			this.list[index] = Object.assign({
			...this.list[index],
			dayCharts
			})
			},
			change(e) {
			this.timeStart = e[0] \|\| moment().format('YYYY-MM-DD')
			}
			},
			}
			</script>

			<style lang="scss" scoped>

			</style>
			<style lang="scss" scoped></style>