| | |
|---|
| | | <!-- |
|---|
| | | * @Date: 2024-04-09 22:11:21 |
|---|
| | | * @LastEditors: Sneed |
|---|
| | | * @LastEditTime: 2024-04-13 22:16:48 |
|---|
| | | * @LastEditTime: 2024-04-24 21:11:17 |
|---|
| | | * @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" accordion> |
|---|
| | | <el-collapse-item :title="item.description" :name="index" v-for="(item, index) in list" |
|---|
| | | :key="index"> |
|---|
| | | <div> |
|---|
| | | <el-button>查看数据</el-button> |
|---|
| | | </div> |
|---|
| | | <scEcharts v-show="!isShowTable" style="width:100%" height="300px" |
|---|
| | | :option="item.dayCharts"> |
|---|
| | | </scEcharts> |
|---|
| | | <scTable v-show="isShowTable" ref="table0" row-key="id" border :apiObj="item.apiObj" |
|---|
| | | stripe> |
|---|
| | | <el-table-column prop="alarmCode" label="报警代码" /> |
|---|
| | | <el-table-column prop="alarmMsg" label="报警信息" /> |
|---|
| | | <el-table-column prop="count" label="报警次数" /> |
|---|
| | | </scTable> |
|---|
| | | </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 TimeLine from './TimeLine.vue' |
|---|
| | | import MYTree from '../MYTree.vue' |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | TimeLine, |
|---|
| | | MYTree |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | treeChecked() { |
|---|
| | | this.query() |
|---|
| | | }, |
|---|
| | | time() { |
|---|
| | | this.query() |
|---|
| | | }, |
|---|
| | | timeRange(val) { |
|---|
| | | console.log(val, '>>>>>>>???/') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isShowTable: false, |
|---|
| | | list: [], |
|---|
| | | activeList: [], |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | queryChart(dmpDTO) { |
|---|
| | | 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(), |
|---|
| | | dmpDTO |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | change(e) { |
|---|
| | | this.timeStart = e[0] || moment().format('YYYY-MM-DD') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | <style lang="scss" scoped></style> |
|---|
