1

lzhe

2024-06-21 5fd1f15560511e916a6c88951c698fb322c6c218

1

 src/config/index.js

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-09 17:12:15
 * @LastEditTime: 2024-06-20 23:30:15
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/config/index.js
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -63,6 +63,7 @@

    //控制台首页默认布局
    DEFAULT_GRID: {
        data: {},
        //默认分栏数量和宽度 ä¾‹å¦‚ [24] [18,6] [8,8,8] [6,12,6]
        layout: [12, 6, 6],
        //小组件分布，com取值:views/home/components æ–‡ä»¶å

 src/views/home/widgets/components/Entrance.vue

@@ -82,19 +82,13 @@
                //console.log(this.setCard,222)
            },
            getCard() {  //获取快捷菜单
                var data = this.$TOOL.data.get("MENU");
                this.workid = data[0].children[0].id;  //记录第一个children的id
                this.$HTTP.get(`/api/blade-system/workbench-card/list?workbenchId=${this.workid}`).then(res=> {
                    if(res.code == 200) {
                        this.setCard = res.data;
                        res.data.forEach(item=> {
                            if(item.cardKey == "Entrance") {
                                this.$TOOL.data.set("CARD_INFO", item.textContent);
                            }
                        })
                        this.init(); //根据获取的快捷菜单和菜单确定最后一级和勾选状态
                this.setCard = this.$CONFIG.DEFAULT_GRID.data;
                this.setCard.forEach(item=> {
                    if(item.cardKey == "Entrance") {
                        this.$TOOL.data.set("CARD_INFO", item.textContent);
                    }
                })
                this.init(); //根据获取的快捷菜单和菜单确定最后一级和勾选状态
            },
            init() {
                this.titleList = [];
@@ -165,7 +159,7 @@
    ul li div,.addMenu{border: 1px solid #409eff;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #409eff;border-radius: 2px;border-radius: 2px;white-space: nowrap;cursor: pointer;min-width: 112px;}
    ul li div:hover {background-color: #ebf4f4;}
    .addMenu {border: 1px dashed #409eff;}
    ..addMenu:hover {border: 1px dashed #104E8B;}
    .addMenu:hover {border: 1px dashed #104E8B;}
    .parent-children-title {margin-left: 10px;margin-top: 24px;font-weight: 700;font-size: 14px;text-align: left;color: #333;}
    .parent-children {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding-left: 10px;box-sizing: border-box;}
    .parent-children span {margin-left: 10px;margin-top: 10px;width: 22%;border: 0.5px solid #20B2AA;border-radius: 2px;height: 43px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;min-width: 112px;}

 src/views/home/widgets/components/Weather.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-20 23:18:04
 * @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-card shadow="hover" header="日历" style="height: 100%;" class="weather">
        <div>
            <div class="weater-img">
                <img src="./weather.png" alt="">
            </div>
            <div class="weater-bottom">
                <div style="margin: 29px 20px 23px;">
                    <span style="font-weight: bold; font-size: 26px; text-align: left; color: rgb(51, 51, 51);">{{newMonth}}</span>
                    <span style="font-weight: bold;font-size: 16px;">月 {{nowYears}} å¹´</span>
                    <div style="text-align: right; float: right; line-height: 35px; margin-right: 15px;">
                        <el-tag type="danger" style="font-size: 16px; width: 123px; height: 38px; font-weight: 400; display: flex; justify-content: center; align-items: center;">
                            <el-icon style="font-size: 60px;margin-right: 12px;vertical-align: middle;font-weight: bold;"><Sunrise /></el-icon>
                            <span>{{ time }}</span>
                        </el-tag>
                    </div>
                </div>
                <div style="padding: 0 20px;">
                    <div class="date-title">
                        <div v-for="item in dateTitle">{{item}}</div>
                    </div>
                    <div class="date-list">
                        <div v-for="item in dateList" :style="{color: item.color,background: item.background}">{{item.num}}</div>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    import moment from 'moment'
    export default {
        title: "日历",
        icon: "el-icon-data-line",
        description: "每日天气预报、日历、时间快速查看",
        data() {
            return {
                time: '',
                newMonth: "",
                nowYears: "",
                dateTitle: ['一','二','三','四','五','六','日'],
                dateList: []
            }
        },
        components: {...ElementPlusIconsVue},
        mounted() {
            this.getDateList();
            this.showTime()
            setInterval(()=>{
                this.showTime()
            },1000)
        },
        methods: {
            showTime(){
                this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
                this.day = this.$TOOL.dateFormat(new Date(), 'yyyyå¹´MM月dd日')
            },
            getDateList() {
                var now = moment();
                var date = now.date(); //当前是几号
                this.newMonth = now.month() + 1;  //当前月份
                this.nowYears = now.year(); //当前天数
				
                var monthStart = moment(this.nowYears + "-" + this.newMonth + "-01");  //当前月
                var daysInMonth = monthStart.daysInMonth();  //当前月份的天数 

                var lastMonth = now.subtract(1, 'months');   //前一个月
                var lastMonthFormatted = lastMonth.format('YYYY-MM');  //前一个月格式化
                var monthEnd = moment(lastMonthFormatted + "-01");  //前一个月
                var daysEndMonth = monthEnd.daysInMonth();  //前一个月份的天数 

                var arr = [];
                for(var i=daysEndMonth-(35-daysEndMonth);i<=daysEndMonth;i++) {
                    arr.push({
                        num: i,
                        color: '#c0c4cc',
                        background: '#fff'
                    })
                }
                for(var i=1;i<=daysInMonth;i++) {
                    if(i == date) {
                        arr.push({
                            num: i,
                            color: '#fff',
                            background: '#3b8e8e'
                        })
                    }else {
                        arr.push({
                            num: i,
                            color: '#000',
                            background: '#fff'
                        })
                    }
                }
                this.dateList = arr;
            },
            goPage(item) {
				
            }
        }
    }
</script>
<style scoped>
    .weather /deep/ .el-card__body {
        padding: 12px 12px 6px;
    }
    .weater-img {
        width: 100%;
        align-items: center;
    }
    .weater-img img {
        height: 91px;
        width: 100%;
    }
    .weater-bottom {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .date-list {
        display: flex;
        flex-wrap: wrap;
    }
    .date-title {
        display: flex;
    }
    .date-title div {
        flex: 1;
        height: 39px;
        font-weight: 700;
        font-size: 14px;
        color: #3b8e8e;
        text-align: center;
    }
    .date-list div {
        flex: 0 0 14.2857%;
        height: 39px;
        font-weight: 700;
        font-size: 14px;
        text-align: center;
        line-height: 39px;
        cursor: pointer;
    }
    .date-list div:hover {
        background-color: #f2f8fe;
    }
</style>

 src/views/home/widgets/components/mdcDeviceStatus.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,112 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-20 21:49:13
 * @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-card shadow="hover" header="设备状态统计" style="height: 100%;" class="deviceStatus">
        <ul class="status-view-box">
            <li v-for="(item,index) in devicestatus" @click="searchstatus(item,index)" :class="{'active': item.active}">
                <el-icon :style="{'color': item.color}">
                    <component :is='item.icon'></component>
                </el-icon>
                <span class="statusName">{{item.statusName}}</span>
                <span class="view-box-num">{{item.deviceNum}}</span>
            </li>
        </ul>
    </el-card>
</template>

<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        title: "设备状态统计",
        icon: "el-icon-data-line",
        description: "快速查看设备状态统计",
        data() {
            return {
                devicestatus: []
            }
        },
        components: {...ElementPlusIconsVue},
        mounted() {
            this.getdevicestatus();  //获取具体数据
        },
        methods: {
            getdevicestatus() {
                this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
                    if(res.code == 200) {
                        res.data[0].icon = "Position";
                        res.data[1].icon = "Loading";
                        res.data[2].icon = "Clock";
                        res.data[3].icon = "Warning";
                        res.data[4].icon = "Odometer";
                        this.devicestatus = res.data;
                    }
                })
            },
            goPage(item) {
				
            }
        }
    }
</script>
<style scoped>
    .status-view-box {
        display: flex;
        padding: 0;
    }
    .status-view-box li {
        list-style: none;
        border-radius: 2px;
        background: #f6f6f6;
        cursor: pointer;
        padding: 13px 37px 13px 17px;
        margin: 0 8px;
        flex-direction: row;
        display: flex;
        align-items: center;
        flex: 1;
        height: 90px;
    }
    .status-view-box li:nth-child(1) {
        background-color: rgba(55, 12, 13, 0.14);
    }
    .status-view-box li:nth-child(2) {
        background-color: rgba(255, 197, 61, 0.14);
    }
    .status-view-box li:nth-child(3) {
        background-color: rgba(89, 89, 89, 0.14);
    }
    .status-view-box li:nth-child(4) {
        background-color: rgba(64, 169, 255, 0.14);
    }
    .status-view-box li:nth-child(5) {
        background-color: rgba(115, 209, 61, 0.14);
    }
    .status-view-box li i {
        margin-right:6px;
        font-size: 14px;
        font-weight: bold;
    }
    .view-box-num {
        font-weight: bold;
        font-size: 25px;
        margin-left:12px;
    }
    .deviceStatus .el-card__body {
        padding: 12px 12px 6px;
    }
    .statusName {
        font-weight: 700;
        font-size: 15px;
        color: #666;
    }
</style>

 src/views/home/widgets/components/mdcRunning.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,289 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-21 01:45:18
 * @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-card shadow="hover" header="设备运行时长排名" style="height: 100%;" class="running">
        <div class="running-icon">
            <el-icon><RefreshLeft /></el-icon>
            <el-icon @click="isSearch = true"><Filter /></el-icon>
        </div>
        <div class="no-list">设备运行时长{{timeLevel}}小时内前{{top}}名</div>
        <div :id="'running'" style="height:160px;"></div>

        <div class="advance-box" v-show="isSearch">
            <div class="advance-header">筛选
                <el-icon @click="isSearch = false"><Close /></el-icon>
            </div>
            <div class="advance-content">
                <div>
                    <div>
                        <div class="advance-title">选择工位</div>
                        <el-tree-select
                            multiple
                            show-checkbox
                            default-expand-all
                            size="small"
                            @change = "parentIdChange"
                            v-model="search.workStationIdList"
                            clearable
                            node-key="id"
                            placeholder="上级菜单"
                            ref="parentTree"
                            :data="parentData"
                            :props="{ label: 'title' }"
                            style="width:80%;"
                            :render-after-expand="false" />
                    </div>
                    <div>
                        <div class="advance-title">选择需要排名的时间</div>
                        <el-select v-model="search.timeLevel" size="small" style="width:80%;">
                            <template #prefix><span style="margin-right: 6px;color: #409eff;">近N小时</span></template>
                            <el-option v-for="item in timeLevelList" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </div>
                    <div>
                        <div class="advance-title">选择设备排名</div>
                        <el-select v-model="search.top" size="small" style="width:80%;">
                            <template #prefix><span style="margin-right: 6px;color: #409eff;" placeholder="所有">设备TOP</span></template>
                            <el-option v-for="item in topList" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </div>
                </div>
            </div>
            <div style="width: 100%;text-align: right;margin-right: 12px;margin-top: 12px;">
                <el-button type="primary" @click="serchSubmit">筛选</el-button>
            </div>
        </div>
    </el-card>

</template>

<script>
    import * as echarts from 'echarts';
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        title: "设备运行时长排名",
        icon: "el-icon-data-line",
        description: "快速查看设备运行时长排名",
        data() {
            return {
                parentData: {},
                list: [],
                timeLevelList: [],
                topList: [],
                search: {
                    workStationIdList: [],
                    timeLevel: "",
                    top: ""
                },
                isSearch: false,
                timeLevel: "",
                top: "",
                apiResource: {
                    workStationIdList: []
                },
                cardData: {},
                option: {  
                    grid: {
                        top: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    yAxis: {  
                        type: 'category',  
                        data: [],  
                        axisLine: {  
                            show: false // éšè—y轴轴线  
                        },  
                        axisTick: {  
                            show: false // éšè—y轴刻度线  
                        },
                        splitLine: {  
                            show: false // éšè—y轴网格线  
                        }
                    },  
                    xAxis: {  
                        type: 'value',  
                        axisLabel: {  
                        show: false // éšè—x轴数据标签  
                        }  
                    },  
                    series: [  
                        {  
                        data: [3.96, 3.95, 3.93, 3.91, 3.91, 3.9, 3.85],  
                        type: 'bar',  
                        label: {  
                            show: true, // æ˜¾ç¤ºæ ‡ç­¾  
                            position: 'right', // æ ‡ç­¾ä½ç½®è®¾ç½®ä¸ºæŸ±å­çš„右侧  
                            formatter: function(params) {  
                            // è¿”回数据值和您想要添加的字符串的组合  
                            return params.value + 'h'; // ä¾‹å¦‚，返回 '3.96 æ–‡å­—'  
                            }  
                        }  
                        }  
                    ]  
                    },
            }
        },
        components: {...ElementPlusIconsVue},
        mounted() {
            this.getList();
            this.getParentData();
            var arr = [];
            for(var i=1;i<=30;i++) {
                this.timeLevelList.push({value:i,label:i});
                this.topList.push({value:i,label:i});
            }
        },
        methods: {
            serchSubmit() {

            },
            setCurrentKey(v) {
                if (this.firstWorkKey) return
                if (v.isWorkstation) {
                    this.firstWorkKey = v.id
                }
            },
            formatData(data, current) {
                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
                        })
                        this.setCurrentKey(v)
                        return v
                    })
                } 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
                        })
                        this.setCurrentKey(item)
                        return item
                    })
                    return res
                }
                return newData
            },
            getParentData() {
                this.$HTTP.post('/api/blade-cps/group/groupWorkstation/type', {
                    groupCategory: 1,
                    groupType: "group_workstation"
                }).then(({ code, data }) => {
                    if (code === 200) {
                        this.data = this.formatData(data)
                        this.$nextTick(() => {
                            this.parentData = this.data;
                        })
                    }
                })
            },
            parentIdChange(val) {
                // var $parentId = this.$refs.parentTree.getCurrentNode().title;
                // this.formAddMenu.$parentId = $parentId;
            },
            getList() {
                this.cardData = this.$CONFIG.DEFAULT_GRID.data;
                this.cardData.forEach(item=> {
                    if(item.cardKey == "mdcRunning") {
                        this.apiResource = JSON.parse(item.apiResource);
                        this.timeLevel = this.apiResource.timeLevel;
                        this.top = this.apiResource.top;
                        if(this.apiResource.workStationIdList.length > 0) {
                            this.getRunData();
                        }
                    }
                })
            },
            getRunData() {
                this.$HTTP.post(`/api/blade-visual/status/running-top`,this.apiResource).then(res=> {
                    if(res.code == 200) {
                        var recordDom = document.getElementById('running');
                        if(res.data.categories.length == 0) return;
                        this.option.yAxis.data = res.data.categories;
                        this.option.series.data = res.data.series;
                        var myChart = echarts.init(recordDom);
                        myChart.setOption(this.option);
                    }
                })
            },
            goPage(item) {
				
            }
        }
    }
</script>
<style scoped>
    .running /deep/ .el-card__body {
        padding: 12px 12px 12px;
    }
    .running {
        position: relative;
    }
    .running-icon {
        position: absolute;
        right: 0;
        top: 15px;
    }
    .running-icon i {
        font-size: 16px;
        cursor: pointer;
        margin-right: 15px;
    }
    .no-list {
        display: flex;
        justify-content: center;
        font-weight: 500;
        font-size: 14px;
        color: #666;
        align-items: center;
    }
    .advance-box{
        width: 330px;
        height: 100%;
        padding: 15px 16px;
        border-radius: 2px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #fff;
    }
    .advance-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 16px;
        color: #333;
    }
    .advance-header i {
        cursor: pointer;
    }
    .advance-content {
        height: calc(100% - 54px);
        overflow: auto;
    }
    .advance-title {
        margin: 20px 0 12px;
        font-weight: 400;
        font-size: 14px;
        color: #666;
    }
</style>

 src/views/home/widgets/components/weather.png

 src/views/home/widgets/index.vue

@@ -166,6 +166,7 @@
                            this.$CONFIG.DEFAULT_GRID.copmsList[index] = [item.cardKey];
                            this.$CONFIG.DEFAULT_GRID.layout[index] = item.cardWide * 2;
                        })
                        this.$CONFIG.DEFAULT_GRID.data = cards;
                        this.defaultGrid = this.$CONFIG.DEFAULT_GRID;
                        this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
                    }

 src/views/mdc/realtime-status/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-19 13:44:36
 * @LastEditTime: 2024-06-20 23:24:02
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 å®žæ—¶çœ‹æ¿
-->
@@ -106,7 +106,6 @@
                current: "1",
                size: "9",
                total: 0,
                deviceStatus: [],
                workStationGroupIdList: [],
                line: "",
                column: ""