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,161 +1,173 @@
<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>

<script>
    export default {
        data() {
            return {
                userType: 'admin',
                form: {
                    user: "admin",
                    password: "123456",
                    autologin: false
                },
                rules: {
                    user: [
                        {required: true, message: this.$t('login.userError'), trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: this.$t('login.PWError'), trigger: 'blur'}
                    ]
                },
                islogin: false,
            }
        },
        watch:{
            userType(val){
                if(val == 'admin'){
                    this.form.user = 'admin'
                    this.form.password = 'admin'
                }else if(val == 'user'){
                    this.form.user = 'user'
                    this.form.password = 'user'
                }
            }
        },
        mounted() {
            //this.$HTTP.get('/api/blade-sync/outer-app-config/appStatus')
        },
        methods: {
            async login(){
                var validate = await this.$refs.loginForm.validate().catch(()=>{})
                if(!validate){ return false }
                this.islogin = true
                var data = {
                    username: this.form.user,
                    //password: this.$TOOL.crypto.MD5(this.form.password)
                    password: this.form.password,
                    tenantId: "000000",
                    grant_type: "password",
                    scope: "all"
                }
                await this.$HTTP.postJ("/api/blade-auth/oauth/token?" + this.$TOOL.qsStringify(data)).then(res=> {
                    if(res.user_id) {
                        //获取token
                        this.$TOOL.cookie.set("TOKEN", res.access_token, {
                            expires: this.form.autologin? 24*60*60 : 0
                        })
                        res.userName = res.user_name;
                        res.role = ["SA", "admin", "Auditor"];
                        res.dashboard = "0";
                        res.userId =  "1";
                        this.$TOOL.data.set("USER_INFO", res);
                        this.islogin = false;
                    }else {
                        this.$message({
                          showClose: true,
                          message: res.error_description,
                          type: 'error'
                        });
                    }
                })
                //获取菜单
                await this.$HTTP.get("/api/blade-system/menu/routes?" + this.$TOOL.qsStringify({"appCode": "CPS"})).then(res=> {
                    if(res.data.length==0){
                        this.islogin = false
                        this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
                            type: 'error',
                            center: true
                        })
                        return false
                    } 
                    //开始
                    function addComponentToLastLevel(items) {  
                        return items.map((item) => {  
                            // å¤åˆ¶å½“前项，避免直接修改原始对象  
                            const clonedItem = { ...item };  
					
                            // æ£€æŸ¥å½“前项是否有 children å±žæ€§  
                            if (clonedItem.children) {  
                                // é€’归处理 children  
                                clonedItem.children = addComponentToLastLevel(clonedItem.children);  
                            } else {  
                                // å¦‚果没有 children å±žæ€§ï¼Œè¯´æ˜Žæ˜¯æœ€åŽä¸€çº§ï¼Œæ·»åŠ  component å¯¹è±¡  
                                var len = clonedItem.path.length;
                                if(item.name == "任务调度") {
                                    //clonedItem.component = clonedItem.path;   //有component不可以使用iframe
                                }else {
                                    clonedItem.component = clonedItem.path.substring(1,len); 
                                }
                            } 
                            if(item.name == "任务调度") {
                                clonedItem.meta = {title: clonedItem.name,icon: "el-icon-takeaway-box", type: "iframe"}
                            }else {
                                clonedItem.meta = {title: clonedItem.name,icon: "el-icon-takeaway-box", type: "menu"}
                            }
                            return clonedItem;
                        });  
                    }   
                    var transformedArray = addComponentToLastLevel(res.data); 
                    //获取多个工作台
                    this.$HTTP.get("/api/blade-system/workbench/list?status=1").then(resp=> {
                        if(resp.data.length) {
                            //console.log(resp.data,resp.data[0].name,333);
                            resp.data.forEach((item,index)=> {
                                item.component = "home";
                                item.meta = {title: item.name, icon: 'el-icon-menu', affix: true};
                                item.path = "/dashboard";
                                item.parentId = item.id;
                            })
                            transformedArray[0].path = "/home";
                            transformedArray[0].children = resp.data;
                            var obj = {
                                dashboardGrid: ["welcome", "ver", "time", "progress", "echarts", "about"],
                                menu: transformedArray,
                                permissions: ["list.add", "list.edit", "list.delete", "user.add", "user.edit", "user.delete"]
                            }
                            this.$TOOL.data.set("MENU", obj.menu)
                            this.$TOOL.data.set("PERMISSIONS", obj.permissions)
                            this.$TOOL.data.set("DASHBOARDGRID", obj.dashboardGrid)
                            console.log(transformedArray,222)

                            this.$router.replace({
                                path: '/'
                            })
                            this.$message.success("Login Success ç™»å½•æˆåŠŸ")
                            this.islogin = false;
                        }
                    })
                })
				
export default {
    data() {
        return {
            userType: 'admin',
            form: {
                user: "admin",
                password: "123456",
                autologin: false
            },
            rules: {
                user: [
                    { required: true, message: this.$t('login.userError'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('login.PWError'), trigger: 'blur' }
                ]
            },
            islogin: false,
        }
    },
    watch: {
        userType(val) {
            if (val == 'admin') {
                this.form.user = 'admin'
                this.form.password = 'admin'
            } else if (val == 'user') {
                this.form.user = 'user'
                this.form.password = 'user'
            }
        }
    },
    mounted() {
        //this.$HTTP.get('/api/blade-sync/outer-app-config/appStatus')
    },
    methods: {
        async login() {
            var validate = await this.$refs.loginForm.validate().catch(() => { })
            if (!validate) { return false }
            this.islogin = true
            var data = {
                username: this.form.user,
                //password: this.$TOOL.crypto.MD5(this.form.password)
                password: this.form.password,
                tenantId: "000000",
                grant_type: "password",
                scope: "all"
            }
            await this.$HTTP.postJ("/api/blade-auth/oauth/token?" + this.$TOOL.qsStringify(data)).then(res => {
                if (res.user_id) {
                    //获取token
                    this.$TOOL.cookie.set("TOKEN", res.access_token, {
                        expires: this.form.autologin ? 24 * 60 * 60 : 0
                    })
                    res.userName = res.user_name;
                    res.role = ["SA", "admin", "Auditor"];
                    res.dashboard = "0";
                    res.userId = "1";
                    this.$TOOL.data.set("USER_INFO", res);
                    this.islogin = false;
                } else {
                    this.$message({
                        showClose: true,
                        message: res.error_description,
                        type: 'error'
                    });
                }
            })
            //获取菜单
            await this.$HTTP.get("/api/blade-system/menu/routes?" + this.$TOOL.qsStringify({ "appCode": "CPS" })).then(res => {
                if (res.data.length == 0) {
                    this.islogin = false
                    this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
                        type: 'error',
                        center: true
                    })
                    return false
                }
                //开始
                function addComponentToLastLevel(items) {
                    return items.map((item) => {
                        // å¤åˆ¶å½“前项，避免直接修改原始对象  
                        const clonedItem = { ...item };

                        // æ£€æŸ¥å½“前项是否有 children å±žæ€§  
                        if (clonedItem.children) {
                            // é€’归处理 children  
                            clonedItem.children = addComponentToLastLevel(clonedItem.children);
                        } else {
                            // å¦‚果没有 children å±žæ€§ï¼Œè¯´æ˜Žæ˜¯æœ€åŽä¸€çº§ï¼Œæ·»åŠ  component å¯¹è±¡  
                            var len = clonedItem.path.length;
                            if (item.name == "任务调度") {
                                //clonedItem.component = clonedItem.path;   //有component不可以使用iframe
                            } else {
                                clonedItem.component = clonedItem.path.substring(1, len);
                            }
                        }
                        if (item.name == "任务调度") {
                            clonedItem.meta = { title: clonedItem.name, icon: "el-icon-takeaway-box", type: "iframe" }
                        } else {
                            clonedItem.meta = { title: clonedItem.name, icon: "el-icon-takeaway-box", type: "menu" }
                        }
                        return clonedItem;
                    });
                }
                var transformedArray = addComponentToLastLevel(res.data);
                //获取多个工作台
                this.$HTTP.get("/api/blade-system/workbench/list?status=1").then(resp => {
                    if (resp.data.length) {
                        //console.log(resp.data,resp.data[0].name,333);
                        resp.data.forEach((item, index) => {
                            item.component = "home";
                            item.meta = { title: item.name, icon: 'el-icon-menu', affix: true };
                            item.path = "/dashboard";
                            item.parentId = item.id;
                        })
                        transformedArray[0].path = "/home";
                        transformedArray[0].children = resp.data;
                        var obj = {
                            dashboardGrid: ["welcome", "ver", "time", "progress", "echarts", "about"],
                            menu: transformedArray,
                            permissions: ["list.add", "list.edit", "list.delete", "user.add", "user.edit", "user.delete"]
                        }
                        this.$TOOL.data.set("MENU", obj.menu)
                        this.$TOOL.data.set("PERMISSIONS", obj.permissions)
                        this.$TOOL.data.set("DASHBOARDGRID", obj.dashboardGrid)
                        console.log(transformedArray, 222)

                        this.$router.replace({
                            path: '/'
                        })
                        // this.$message.success("Login Success ç™»å½•æˆåŠŸ")
                        this.islogin = false;
                    }
                })
            })

        }
    }
}
</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>
        <el-card shadow="never">
            è¿‡ç¨‹å‚æ•°
    <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-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>