Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

lzhe

2024-04-21 262d00df52af7d6fe768cce6d82cbf4be1a3fa7e

Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

 src/views/login/components/passwordForm.vue

@@ -1,14 +1,18 @@
<template>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login" class="login-form">
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login"
        class="login-form">
        <el-form-item prop="user">
            <el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')" class="inputHeight">
            <el-input v-model="form.user" prefix-icon="el-icon-user" clearable
                :placeholder="$t('login.userPlaceholder')" class="inputHeight">
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')" class="inputHeight"></el-input>
            <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
                :placeholder="$t('login.PWPlaceholder')" class="inputHeight"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn') }}</el-button>
            <el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn')
                }}</el-button>
        </el-form-item>
    </el-form>
</template>
@@ -144,7 +148,7 @@
                            this.$router.replace({
                                path: '/'
                            })
                            this.$message.success("Login Success ç™»å½•æˆåŠŸ")
                        // this.$message.success("Login Success ç™»å½•æˆåŠŸ")
                            this.islogin = false;
                        }
                    })
@@ -156,6 +160,14 @@
</script>

<style>
.login-form {margin: 0 auto;margin-top: 46px;width: 294px;}
.inputHeight {height: 40px;line-height: 40px;}
.login-form {
    margin: 0 auto;
    margin-top: 46px;
    width: 294px;
}

.inputHeight {
    height: 40px;
    line-height: 40px;
}
</style>

 src/views/mdc/MYTree.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-04-18 19:53:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-18 21:30:19
 * @LastEditTime: 2024-04-21 10:37:48
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/MYTree.vue
-->
<template>
    <el-tree ref="treeRef" v-bind="$attrs" :show-checkbox="showCheckbox" :current-node-key="currentNodeKey"
        node-key="id" :props="defalutProps" :data="data" @check-change="checkChange" @node-click="handleNodeClick"
        highlight-current default-expand-all :render-content="renderContent"></el-tree>
        highlight-current default-expand-all :expand-on-click-node="false" :render-content="renderContent"></el-tree>
</template>

<script>
@@ -23,13 +23,17 @@
        return {
            pmsPng,
            firstWorkKey: '',
            currentNodeKey: '',
            currentNodeKey: [],
            defalutProps: {
                label: 'title',
                children: 'children'
                children: 'children',
                disabled: 'disabled',
                class: (data, node) => {
                    return this.value.includes(data.id) ? 'active' : ''
                }
            },
            data: [],
            value: []
            value: [],
        }
    },
    watch: {
@@ -44,12 +48,15 @@
    },
    created() {
        this.getList()
        this.customNodeClass = (data, node) => {
            return this.currentNodeKey == node.id || this.value.includes(node.id) ? 'active' : ''
        }
    },
    methods: {
        renderContent(h, { data }) {
            let img = data.groupTag == 'fms_beltline'
            return h('span', {

            return h('a', {
                disabled: data.disabled
            },
                img ? h('img', {
                    src: pmsPng
@@ -65,6 +72,7 @@
                    this.data = this.formatData(data)
                    this.$nextTick(() => {
                        this.currentNodeKey = this.firstWorkKey
                        this.$emit('loaded', this.firstWorkKey)
                    })
                }
            })
@@ -79,6 +87,7 @@
            let newData = []
            if (!current) {
                newData = data.filter(item => item.parentId == 0).map(v => {
                    if (!v.isWorkstation) v.disabled = true
                    v.children = this.formatData(data, v).sort((a, b) => {
                        return b.sort - a.sort
                    })
@@ -88,6 +97,7 @@
            } else {
                let res = data.filter(v => v.parentId == current.id)
                res = res.map(item => {
                    if (!item.isWorkstation) item.disabled = true
                    item.children = this.formatData(data, item).sort((a, b) => {
                        return b.sort - a.sort
                    })
@@ -99,7 +109,6 @@
            return newData
        },
        handleNodeClick(node) {
            console.log(node)
            this.$nextTick(() => {
                if (node.isWorkstation) {
                    this.currentNodeKey = node.id
@@ -114,4 +123,8 @@
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.active .el-tree-node__content {
    background: var(--el-color-primary) !important;
}
</style>

 src/views/mdc/alarm-statistics.vue

@@ -1,21 +1,114 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-15 23:51:52
 * @LastEditTime: 2024-04-21 18:58:16
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/alarm-statistics.vue
 * è¿‡ç¨‹å‚æ•°
 * æ•ˆçŽ‡åˆ†æž
-->
<template>
    <el-main style="height: 100%;">
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-container style="height: 100%;">
                <el-aside width="300px" style="height: 100%;">
                    <el-container>
                        <el-main class="nopadding">
                            <el-row>
                                <el-col style="margin-top: 14px;">日期</el-col>
                                <el-col>
                                    <el-date-picker value-format="YYYY-MM-DD" style="width: 250px" v-model="time"
                                        type="daterange" range-separator="-" start-placeholder="" end-placeholder="" />
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 14px;">
                                å·¥ä½
                            </el-row>
                            <MYTree v-model="treeChecked" @loaded="query"></MYTree>
                        </el-main>
                        <el-footer>
                            <el-button @click="query()">查询</el-button>
                            <el-button>导出</el-button>
                        </el-footer>
                    </el-container>
                </el-aside>
                <el-container>
    <el-main>
        <el-card shadow="never">
            è¿‡ç¨‹å‚æ•°
                        <el-tabs tab-position="top" v-model="activeName" type="card">
                            <el-tab-pane label="按班次统计" name="shift">
                                <Shift colname="产量" url="/api/blade-mdc/alarm/summary-shift-graph" ref="shift"
                                    v-if="activeName == 'shift'">
                                </Shift>
                            </el-tab-pane>
                            <el-tab-pane label="按时间周期统计" name="time">
                                <Time url="/api/blade-mdc/alarm/summary-graph" ref="time" v-if="activeName == 'time'">
                                </Time>
                            </el-tab-pane>
                        </el-tabs>
                    </el-main>
                </el-container>
            </el-container>
        </el-card>
    </el-main>
</template>

<script>
export default {
import moment from 'moment';
import MYTree from './MYTree.vue'
import Shift from './components/ShiftAlarm.vue'
import Time from './components/TimeAlarm.vue'

export default {
    components: {
        MYTree,
        Shift,
        Time
    },
    watch: {
        activeName() {
            this.$nextTick(() => {
                this.query()
            })

        }
    },
    data() {
        return {
            activeName: 'shift',
            time: [],
            treeChecked: [],
            options: [
                {
                    label: '稼动率',
                    value: 'OEE',
                },
                {
                    label: '报警率',
                    value: 'ALARM',
                },
                {
                    label: '运行率',
                    value: 'RUNNING',
                },
            ]
        }
    },
    created() {
        this.time = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
    },
    mounted() {
        // this.$nextTick(() => {
        //     this.query()
        // })
    },
    methods: {
        query(firstWorkKey) {
            let workstationId = firstWorkKey ? [firstWorkKey] : [...this.treeChecked]
            this.$refs[this.activeName].init({
                endDate: this.time[1],
                startDate: this.time[0],
                workstationId
            })
        }
    }
}
</script>


 src/views/mdc/components/ShiftAlarm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,190 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-21 18:49:27
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/ShiftAlarm.vue
-->
<template>
    <el-main>
        <el-row>
            <el-col>
                <el-button-group>
                    <el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''"
                        v-for="item in btnList" :key="item.id">{{
                            item.title }}</el-button>
                </el-button-group>
            </el-col>
            <el-col>
                <el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" />
            </el-col>


        </el-row>
        <el-row v-show="!isShowTable">
            <el-col style="margin-top: 12px;" v-for="item in chartsData" :key="item.shiftIndex">
                <el-card shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>{{ item.title }}</span>
                        </div>
                    </template>
                    <scEcharts height="300px" :option="item.option"></scEcharts>
                </el-card>
            </el-col>
        </el-row>
        <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
        <el-row v-show="isShowTable" v-for="(item, index) in tableData" :key="index">
            <el-col style="margin-top: 12px;">
                <div>{{ item.title }}</div>
                <el-table ref="table" row-key="id" border :data="item.data" stripe>
                    <el-table-column prop="alarmCode" label="报警代码" />
                    <el-table-column prop="alarmMsg" label="报警信息" />
                    <el-table-column prop="count" label="报警次数" />
                </el-table>
            </el-col>
        </el-row>
    </el-main>

</template>

<script>
import scEcharts from '@/components/scEcharts';
import moment from 'moment';
export default {
    props: {
        url: {
            default: '',
            type: String,
        },
    },
    components: {
        scEcharts
    },
    data() {
        return {
            sheetUrl: '/api/blade-mdc/alarm/data-shift-sheet',
            isShowTable: false,
            params: {
                enums: "SHIFT",
                month: 0,
                queryTime: "2024-04-18",
                shiftIndex: 1,
                week: 0,
                workstationId: "",
                year: 0,
            },
            btnList: [],
            btnListActive: '',
            tableData: [],
            chartsData: [
            ],
        }
    },
    watch: {
        btnListActive(val) {
            this.queryChart({
                ...this.params,
            })
        }
    },
    methods: {
        init(params) {
            this.params = {
                ...this.params,
                ...params,
                workstationId: params.workstationId.toString()
            }
            this.getTime({
                endDate: params.endDate,
                startDate: params.startDate,
            }).then(res => {
            })

        },
        getTime(data) {
            return new Promise(resolve => {
                let arr = []
                let date = moment(data.startDate)
                arr.push({
                    title: date.format('YYYY-MM-DD'),
                    id: date.format('YYYY-MM-DD')
                })
                while (date.format('YYYY-MM-DD') < data.endDate) {
                    date = date.add(1, 'd')
                    arr.push({
                        title: date.format('YYYY-MM-DD'),
                        id: date.format('YYYY-MM-DD')
                    })
                }
                this.btnList = arr;
                this.btnListActive = arr[0].id
                resolve(arr)
            })
        },
        queryChart(data) {
            let dataSend = {
                ...this.params,
                queryTime: this.btnListActive,
            }
            this.queryTableData(dataSend)
            return this.$HTTP.post(this.url, dataSend, {}).then(res => {
                this.chartsData = res.data.map(item => {
                    return {
                        title: `班次${item.shiftIndex}   ${item.shiftIndexName}`,
                        shiftName: item.shiftName,
                        shiftIndexName: item.shiftIndexName,
                        option: this.setOptions(item.res)
                    }
                })
            })
        },
        setOptions(obj) {
            let source = Object.keys(obj)
            let data = Object.values(obj)
            return {
                legend: {
                    type: 'plain',
                },
                title: {
                    text: '统计图表',
                    subtext: '',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: source
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    { type: 'slider' }
                ],
                series: [{
                    type: 'bar',
                    data
                }]
            }
        },
        queryTableData(data) {
            return this.$HTTP.post(this.sheetUrl, data, {}).then(res => {
                this.tableData = res.data.map(item => {
                    return {
                        title: `班次${item.shiftIndex}`,
                        shiftName: item.shiftName,
                        shiftIndex: item.shiftIndex,
                        data: item.alarmDataSheetVOList
                    }
                })
            })
        }
    }
}
</script>

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

 src/views/mdc/components/TimeAlarm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,254 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-21 19:15:52
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
    <el-row>
        <el-col>
            <el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" />
        </el-col>
        <el-col style="margin-top: 12px;">
            <el-collapse v-model="active" accordion>
                <el-collapse-item title="日 æŒ‰æ—¥æŸ¥çœ‹" name="1">
                    <el-button-group>
                        <el-button size="small" @click="queryDay(item)" :type="valueDay == item.value ? 'primary' : ''"
                            v-for="item in btnListDay" :key="item.value">{{
                                item.label
                            }}</el-button>
                    </el-button-group>
                    <scEcharts v-if="active == 1" style="width:100%" height="300px" :option="dayCharts"></scEcharts>
                </el-collapse-item>
                <el-collapse-item title="周 æŒ‰å‘¨æŸ¥çœ‹" name="2">
                    <el-button-group>
                        <el-button size="small" @click="queryWeek(item)"
                            :type="valueWeek == item.value ? 'primary' : ''" v-for="item in btnListWeek"
                            :key="item.value">{{ item.label
                            }}</el-button>
                    </el-button-group>
                    <scEcharts v-if="active == 2" style="width:100%" height="300px" :option="weekCharts"></scEcharts>
                </el-collapse-item>
                <el-collapse-item title="月 æŒ‰æœˆæŸ¥çœ‹" name="3">
                    <el-button-group>
                        <el-button size="small" @click="queryMonth(item)"
                            :type="valueMonth == item.value ? 'primary' : ''" v-for="item in btnListMonth"
                            :key="item.value">{{ item.label
                            }}</el-button>
                    </el-button-group>
                    <scEcharts v-if="active == 3" height="300px" :option="monthCharts"></scEcharts>

                </el-collapse-item>
            </el-collapse>
        </el-col>
    </el-row>
</template>

<script>
import scEcharts from '@/components/scEcharts';
import moment from 'moment';
export default {
    props: {
        url: {
            default: '',
            type: String,
        }
    },
    components: {
        scEcharts
    },
    data() {
        return {
            sheetUrl: '/api/blade-mdc/alarm/data-sheet',
            apiObj: '',
            params: {
                enums: "DAY",
                month: 0,
                queryTime: "", //2024-05-21
                shiftIndex: 1,
                week: 0,
                workstationId: "",
                year: 0,
            },
            active: '1',
            valueDay: '',
            valueWeek: '',
            valueMonth: '',
            btnListDay: [],
            btnListWeek: [],
            btnListMonth: [],
            dayCharts: {},
            weekCharts: {},
            monthCharts: {},
        }
    },
    watch: {

    },
    methods: {
        init(params) {
            this.params.workstationId = params.workstationId.toString()
            this.getTime({
                endDate: params.endDate,
                startDate: params.startDate,
            }).then(res => {

            })

        },
        getTime(data) {
            return Promise.all([
                this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
                    ...data,
                    statisticalMethod: "DAY"
                }).then(res => {
                    if (res.code === 200) {
                        this.btnListDay = res.data.map(item => ({
                            label: item.title,
                            value: item.id,
                            startDate: item.startDate,
                            endDate: item.endDate,
                            week: moment(item.id).week(),
                            month: moment(item.id).month() + 1,
                            year: moment(item.id).year()
                        })).reverse()
                    }
                    this.queryDay(this.btnListDay[0])
                }),
                this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
                    ...data,
                    statisticalMethod: "WEEK"
                }).then(res => {
                    if (res.code === 200) {
                        this.btnListWeek = res.data.map(item => ({
                            label: item.title,
                            value: item.id,
                            startDate: item.startDate,
                            endDate: item.endDate,
                            week: moment(item.startDate).week(),
                            month: moment(item.startDate).month() + 1,
                            year: moment(item.startDate).year()
                        })).reverse()

                    }
                }),
                this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
                    ...data,
                    statisticalMethod: "MONTH"
                }).then(res => {
                    if (res.code === 200) {
                        this.btnListMonth = res.data.map(item => ({
                            label: item.title,
                            value: item.id,
                            startDate: item.startDate,
                            endDate: item.endDate,
                            week: moment(item.id + '-1').week(),
                            month: moment(item.id + '-1').month() + 1,
                            year: moment(item.id + '-1').year()
                        })).reverse()

                    }
                })
            ]).then(() => {
                this.queryWeek(this.btnListWeek[0])
                this.queryMonth(this.btnListMonth[0])
            })
        },
        queryDay(row) {
            this.valueDay = row.value
            this.query({
                enums: "DAY",
                queryTime: row.value, //2024-05-21
                week: row.week,
                month: row.month,
                year: row.year,
                shiftIndex: 1,
                workstationId: this.params.workstationId,
            }).then(res => {
                this.dayCharts = res
            })
        },
        queryWeek(row) {
            this.valueWeek = row.value
            console.log(row)
            this.query({
                enums: "WEEK",
                queryTime: this.valueDay,
                week: row.week,
                month: row.month,
                year: row.year,
                workstationId: this.params.workstationId,
            }).then(res => {
                this.weekCharts = res
            })
        },
        queryMonth(row) {
            this.valueMonth = row.value
            this.query({
                enums: "MONTH",
                queryTime: this.valueDay,
                week: row.week,
                month: row.month,
                year: row.year,
                workstationId: this.params.workstationId,
            }).then(res => {
                this.monthCharts = res
            })
        },
        query(data) {
            console.log(data)
            this.queryTableData(data)
            return this.$HTTP.post(this.url, data, {}).then(res => {
                return this.setOptions(res.data.res)
            })
        },
        setOptions(obj) {
            let source = Object.keys(obj)
            let data = Object.values(obj)
            return {
                legend: {
                    type: 'plain',
                },
                title: {
                    text: '',
                    subtext: '',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: source
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    { type: 'slider' }
                ],
                series: [{
                    type: 'bar',
                    data
                }]
            }
        },
        queryTableData() {
            return this.$HTTP.post(this.sheetUrl, data, {}).then(res => {
                this.tableData = res.data.map(item => {
                    return {
                        title: `班次${item.shiftIndex}`,
                        shiftName: item.shiftName,
                        shiftIndex: item.shiftIndex,
                        data: item.alarmDataSheetVOList
                    }
                })
            })
        }
    }
}
</script>

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