1848

src/api/api.js

@@ -2,7 +2,7 @@
  * @Author: zuolingling zuolingling@jsnangao.com
  * @Date: 2023-08-10 08:54:29
  * @LastEditors: zuolingling zuolingling@jsnangao.com
- * @LastEditTime: 2023-08-11 14:48:08
+ * @LastEditTime: 2023-08-16 11:34:55
  * @FilePath: \vue3portal\src\api\api.js
  * @Description: 
  * 
@@ -11,7 +11,7 @@
 import request from "./request";
 //获取token
 export async function tokens(params) {
-    return request(`mesc/oauth/token?grant_type=password&client_id=portal1&client_secret=portal@2022&username=root&password=Nangao@2022`, {
+    return request(`mesc/oauth/token?grant_type=password&client_id=portal1&client_secret=portal@2022&username=DMGG&password=admin123`, {
         method: 'POST',
         data: params,
     });

src/assets/less/main.less

@@ -64,47 +64,4 @@ body {
     }
 
     &::-webkit-scrollbar-button {}
-}
-
-.home {
-    .el-tabs__item {
-        color: #fff !important;
-        margin: 0 !important;
-        padding: 0 12px !important;
-        border: none !important;
-        &.is-active {
-            background: transparent !important;
-            border: none !important;
-            color: #fff !important;
-            background-color: rgb(1, 91, 133) !important;
-        }
-    }
-
-    .el-tabs--border-card {
-        background: transparent !important;
-        border: none !important;
-        display: flex;
-
-        .el-tabs__content {
-            padding: 0 !important;
-            width: 100%;
-            height: 100%;
-
-            >div {
-                
-            }
-        }
-    }
-
-    .el-tabs__header {
-        background: transparent !important;
-        border: none !important;
-        .el-tabs__nav-prev,
-        .el-tabs__nav-next{
-            >.el-icon{
-                font-size: 22px !important;
-                color: #17d3d8 !important;
-            }
-        }
-    }
 }
\ No newline at end of file

src/pages/layouts/components/Energy.vue

+<!--
+ * @Author: zuolingling zuolingling@jsnangao.com
+ * @Date: 2023-08-16 11:00:36
+ * @LastEditors: zuolingling zuolingling@jsnangao.com
+ * @LastEditTime: 2023-08-16 18:03:32
+ * @FilePath: \vue3portal\src\pages\layouts\components\Energy.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+-->
+<script setup>
+const props = defineProps({
+    lineoptions: {
+        type: Object,
+        default: {}
+    },
+    datas: {
+        type: Object,
+        default: {}
+    }
+});
+const state = reactive({
+    chartOption: {}
+});
+const flag = ref(false);
+const processData = () => {
+    const { areaStyle, smooth, showLegend } = props.lineoptions;
+    const { legend, xAxis, data } = props.datas ?? {};
+    let processedData = [];
+    legend?.forEach((item, i) => {
+        processedData.push({
+            name: legend[i],
+            type: 'line',
+            label: {
+                show: false,
+                position: 'insideRight'
+            },
+            smooth:true,
+            areaStyle,
+            data: data[i],
+            yAxisIndex:i
+        })
+    });
+    state.chartOption.series = processedData;
+    state.chartOption.xAxis.data = xAxis;
+    state.chartOption.legend.data = legend;
+}
+
+const processOption = () => {
+    state.chartOption = {
+        color: ['#40b0d8','#7575f0'],
+        tooltip: {
+            trigger: 'axis'
+        },
+        grid: {
+            top: '16%',
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+        },
+        legend: {
+            data: []
+        },
+        xAxis: {
+            type: 'category',
+            data: []
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '度',
+                nameTextStyle: {
+                    color: "#47c1eb"
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            {
+                type: 'value',
+                name: '吨',
+                nameTextStyle: {
+                    color: "#47c1eb"
+                },
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: []
+    }
+    processData();
+}
+watch(() => props.datas, (newValue, oldValue) => {
+    flag.value = true;
+    processOption();
+    nextTick(() => {
+        flag.value = false;
+    })
+}, { immediate: true, deep: true });
+</script>
+<template>
+    <echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
+</template>
+<style lang="less"></style>

src/pages/layouts/components/Line.vue

+<!--
+ * @Author: zuolingling zuolingling@jsnangao.com
+ * @Date: 2023-08-16 11:00:36
+ * @LastEditors: zuolingling zuolingling@jsnangao.com
+ * @LastEditTime: 2023-08-16 18:02:38
+ * @FilePath: \vue3portal\src\pages\layouts\components\Line.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+-->
+<script setup>
+const props = defineProps({
+    lineoptions: {
+        type: Object,
+        default: {}
+    },
+    datas: {
+        type: Object,
+        default: {}
+    }
+});
+const state = reactive({
+    chartOption: {}
+});
+const flag = ref(false);
+const processData = () => {
+    const { areaStyle, smooth, showLegend,showSymbol,legendoptions } = props.lineoptions;
+    const { legend, xAxis, data } = props.datas ?? {};
+    let processedData = [];
+    legend?.forEach((item, i) => {
+        processedData.push({
+            name: legend[i],
+            type: 'line',
+            label: {
+                show: false,
+                position: 'insideRight'
+            },
+            smooth,
+            areaStyle: areaStyle ? areaStyle?.[i] : null,
+            data: data[i],
+            showSymbol
+        })
+    });
+    state.chartOption.series = processedData;
+    state.chartOption.xAxis.data = xAxis;
+    state.chartOption.legend.data = showLegend ? legend : [];
+}
+
+const processOption = () => {
+    state.chartOption = {
+        color: props.lineoptions.colors,
+        tooltip: {
+            trigger: 'axis'
+        },
+        grid: {
+            top: '16%',
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+        },
+        legend: {
+            data: [],
+            ...(props.lineoptions.legendoptions ?? {})
+        },
+        xAxis: {
+            type: 'category',
+            data: []
+        },
+        yAxis: {
+            type: 'value',
+            name: props.lineoptions.unit,
+            nameTextStyle: {
+                color: "#47c1eb"
+            },
+            splitLine: {
+                show: false
+            }
+        },
+        series: []
+    }
+    processData();
+}
+watch(() => props.datas, (newValue, oldValue) => {
+    flag.value = true;
+    processOption();
+    nextTick(() => {
+        flag.value = false;
+    })
+}, { immediate: true, deep: true });
+</script>
+<template>
+    <echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
+</template>
+<style lang="less"></style>

src/pages/layouts/components/Produce.vue

+<!--
+ * @Author: zuolingling zuolingling@jsnangao.com
+ * @Date: 2023-08-16 11:00:36
+ * @LastEditors: zuolingling zuolingling@jsnangao.com
+ * @LastEditTime: 2023-08-16 17:57:44
+ * @FilePath: \vue3portal\src\pages\layouts\components\Produce.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+-->
+<script setup>
+const props = defineProps({
+    lineoptions: {
+        type: Object,
+        default: {}
+    },
+    datas: {
+        type: Object,
+        default: {}
+    }
+});
+const state = reactive({
+    chartOption: {}
+});
+const flag = ref(false);
+const processData = () => {
+    const { areaStyle, smooth, showLegend } = props.lineoptions;
+    const { legend, xAxis, data } = props.datas ?? {};
+    let processedData = [];
+    legend?.forEach((item, i) => {
+        let el = i == legend?.length - 1 ? {
+            name: legend[i],
+            type: 'line',
+            label: {
+                show: false,
+                position: 'insideRight'
+            },
+            smooth,
+            areaStyle,
+            data: data[i],
+            yAxisIndex: 1
+        } : {
+            name: legend[i],
+            type: 'bar',
+            label: {
+                show: false,
+                position: 'insideRight'
+            },
+            data: data[i],
+            barWidth:6
+        }
+        processedData.push(el)
+    });
+    state.chartOption.series = processedData;
+    state.chartOption.xAxis.data = xAxis;
+    state.chartOption.legend.data = legend;
+}
+
+const processOption = () => {
+    state.chartOption = {
+        color: ["#EB9750", "#9DFABD", "#61B6F7"],
+        tooltip: {
+            trigger: 'axis'
+        },
+        grid: {
+            top: '16%',
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+        },
+        legend: {
+            data: []
+        },
+        xAxis: {
+            type: 'category',
+            data: []
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '数量',
+                nameTextStyle: {
+                    color: "#47c1eb"
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            {
+                type: 'value',
+                name: '%',
+                nameTextStyle: {
+                    color: "#47c1eb"
+                },
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: []
+    }
+    processData();
+}
+watch(() => props.datas, (newValue, oldValue) => {
+    flag.value = true;
+    processOption();
+    nextTick(() => {
+        flag.value = false;
+    })
+}, { immediate: true, deep: true });
+</script>
+<template>
+    <echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
+</template>
+<style lang="less"></style>

src/pages/layouts/components/Scrolltable.vue

+<template>
+    <div class="swh">
+        <div class="ptable">
+            <div :style="{ '--borderc': colors.borderc }" class="theader">
+                <div v-for="(it, i) in columns" class="hd" :key="i" :title="it.title" :style="{
+                    width: it.width ? it.width + 'px' : 'auto',
+                    flex: it.width ? 'none' : 1,
+                }">
+                    {{ it.title }}
+                </div>
+            </div>
+            <div :style="{ '--thumbcolor': colors.thumbcolor }" class="tbody">
+                <div v-for="(it, i) in dataSource" class="br" :key="i">
+                    <div v-for="(   item, j   ) in columns" class="bd" :style="{
+                        width: item.width ? item.width + 'px' : 'auto',
+                        flex: item.width ? 'none' : 1,
+                    }">
+                        <div v-if="item.render" :key="j">{{ item.render(_, it) }}</div>
+                        <div v-if="!item.render" :key="j" :title="it[item.key]">
+                            {{ it[item.key] }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    columns: {
+        type: Object,
+        default: []
+    },
+    dataSource: {
+        type: Object,
+        default: []
+    },
+    colors: {
+        type: Object,
+        default: {}
+    },
+})
+
+
+</script>
+
+<style lang="less" scoped>
+.ptable {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+
+    .theader {
+        background: transparent;
+        color: #fff;
+        background: var(--borderc);
+        display: flex;
+        overflow: hidden;
+        flex-shrink: 0;
+        width: 100%;
+
+        .hd {
+            padding: 4px;
+            flex: 1;
+        }
+    }
+
+    .tbody {
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
+
+        .br {
+            display: flex;
+            overflow: hidden;
+
+            &:nth-child(odd) {
+                background: transparent !important;
+            }
+
+            &:nth-child(even) {
+                background: transparent !important;
+            }
+
+            .bd {
+                flex: 1;
+                padding: 4px;
+                color: #fff;
+                display: -webkit-box;
+                //width: 100%;
+                overflow: hidden;
+                font-size: 14px !important;
+                text-overflow: ellipsis;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                word-break: break-all;
+            }
+        }
+    }
+
+    .tbody::-webkit-scrollbar {
+        /*滚动条整体样式*/
+
+        width: 4px;
+        /*高宽分别对应横竖滚动条的尺寸*/
+
+        height: 4px;
+    }
+
+    .tbody::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+
+        border-radius: 5px;
+
+        -webkit-box-shadow: none;
+
+        background: var(--thumbcolor);
+    }
+
+    .tbody::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: none;
+        border-radius: 0;
+        background: transparent;
+    }
+}
+</style>

src/pages/layouts/components/Systems.vue

+<!--
+ * @Author: zuolingling zuolingling@jsnangao.com
+ * @Date: 2023-08-16 09:00:42
+ * @LastEditors: zuolingling zuolingling@jsnangao.com
+ * @LastEditTime: 2023-08-16 18:30:31
+ * @FilePath: \vue3portal\src\pages\layouts\components\Systems.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+-->
+<template>
+    <div v-for="item in datas" :key="item.key">
+        <div @click="handleclick(item)" :class="['itembox',item.catalogue==1 ? 'menufa' : 'menuch']" :style="{cursor:item.url ? 'pointer':'default'}">{{ item.title }}</div>
+        <div v-if="item?.children?.length" class="rowflex flexbox">
+            <Systems :datas="item?.children"></Systems>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 接收父组件传递的数据，递归时传递 children
+const props = defineProps({
+    datas: {
+        type: Object,
+        required: true,
+    }
+});
+
+const handleclick= (it)=>{
+    if(it.url){
+        window.open(it.url,"_self");
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.itembox {
+    height: 34px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-right: 20px;
+    border-radius: 6px;
+    &.menufa {
+        // background-color: #015b85;
+        margin-bottom: 15px;
+        margin-top: 5px;
+        font-size: 16px;
+        position: relative;
+       padding-left: 18px;
+
+        &::before{
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 9px;
+            height: 18px;
+            width: 4px;
+            background-color: rgb(0, 89, 255);
+            border-radius: 4px;
+        }
+    }
+    &.menuch{
+        // background: #01aefe;
+        margin-bottom: 10px;
+        color: rgba(255,255,255,0.7);
+    }
+}
+
+.flexbox {
+    flex-wrap: wrap;
+}
+</style>
\ No newline at end of file

src/pages/layouts/components/elsheader.vue

@@ -2,7 +2,7 @@
  * @Author: zuolingling zuolingling@jsnangao.com
  * @Date: 2023-08-10 17:03:11
  * @LastEditors: zuolingling zuolingling@jsnangao.com
- * @LastEditTime: 2023-08-15 15:13:21
+ * @LastEditTime: 2023-08-16 16:21:16
  * @FilePath: \vue3portal\src\pages\layouts\components\elsheader.vue
  * @Description: 
  *