2

src/api/litLine.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+function getAllLine(data){//查询接线方式
+    return request({
+        url:`/admin/linkstyle/list`,
+        method:"get",
+        params:data
+    })
+}
+function getLineModel(data){//获取接线方式下的模型
+    return request({
+        url:`/admin/linkstyle-model/list`,
+        method:"get",
+        params:data
+    })
+}
+function addLine(data){
+    return request({
+        url:`/admin/linkstyle/save`,
+        method:"post",
+        data
+    })
+}
+function delLine(data) {
+    return request({
+        url:`/admin/linkstyle/delete`,
+        method:"post",
+        data
+    })
+}
+export default{
+    getAllLine,
+    getLineModel,
+    addLine,
+    delLine
+}

src/main.js

@@ -4,12 +4,12 @@ import router from './router'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
-
+import zhCn from 'element-plus/es/locale/lang/zh-cn';//引入中文
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
-app.use(ElementPlus)
+app.use(ElementPlus, {locale:zhCn});//使element全局变为英文
 app.use(router)
 
 // 使用 app 实例来挂载应用

src/pages/login/LoginNow.vue

@@ -71,16 +71,16 @@ export default {
                     sessionStorage.setItem("loginStatus", isLogin.value)
                     sessionStorage.setItem("userInfo", JSON.stringify(res.data))
                     if (typeof (window.windowEx) != "undefined") {
-                        windowEx.Size(0, 0) //全屏
-                        windowEx.Position('center')
+                        // windowEx.Size(0, 0) //全屏
+                        // windowEx.Position('center')
                     }
                     router.push('/home/mission')
                     ElMessage({
                         message: '登陆成功！',
                         type: "success"
                     })
-                    windowEx.Size(1920, 1040)
-                    windowEx.Position('center')
+                    // windowEx.Size(1920, 1040)
+                    // windowEx.Position('center')
                 } else {
                     ElMessage({
                         message: res.msg,

src/pages/setting/SettingPage.vue

@@ -23,7 +23,6 @@
 
 <script>
 import { ref, onMounted } from 'vue';
-
 import SystemNum from './components/SystemNum.vue'
 import ReportModule from './components/ReportModule.vue'
 import SetLog from './components/SetLog.vue'

src/pages/system/SystemPage.vue

@@ -1,19 +1,131 @@
 <template>
     <div>
-        <h1>这里是系统管理</h1>
+        <div class="bigBox">
+            <!-- 标签 -->
+            <div class="tagBox">
+                <template v-for="(item, index) in tagList">
+                    <span class="tagLit" @click="tagChange(item, index)" :style="{
+                        background: `url(${item.isSelected ? item.isImg : item.noImg})`,
+                        color: item.isSelected ? 'white' : 'black',
+                    }">{{ item.name }}</span>
+                </template>
+            </div>
+            <div style="text-align: center;">
+                <h2>一次性接线管理</h2>
+            </div>
+            <!-- 设置盒子 -->
+            <div class="setBox">
+
+                <!-- 公共组件box -->
+                <div class="traBox">
+                    <LineTree  @listBack="listBack"></LineTree>
+                </div>
+                <!-- 切换box -->
+                <div class="changeBox">
+                    <LitLine v-if="selectIndex == 0" :fuckList="fuckList"></LitLine>
+                    <InsideModule v-if="selectIndex == 1"></InsideModule>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue';
+import LitLine from './components/LitLine.vue'
+import LineTree from './components/LineTree.vue'
+import InsideModule from './components/InsideModule.vue';
+import blueBtn from '@/assets/image/btn_blue.png'
+import grayBtn from '@/assets/image/btn_gray.png'
 export default {
-    setup () {
-        
+    setup() {
+        let selectIndex = ref(0)
+        let tagList = ref([
+            {
+                name: "接线方式维护",
+                id: 1,
+                noImg: grayBtn,
+                isImg: blueBtn,
+                isSelected: true, // 初始状态未选中
+            },
+            {
+                name: "内置模型管理",
+                id: 2,
+                noImg: grayBtn,
+                isImg: blueBtn,
+                isSelected: false, // 初始状态未选中
+            },
+        ])
+        let fuckList = ref([])//公共list
+        function tagChange(row, num) {
+            selectIndex.value = num
+            // 将当前点击的标签设为选中状态，其他标签设为非选中
+            tagList.value.forEach((tag) => {
+                tag.isSelected = tag.id === row.id;
+            });
+        }
+        function listBack(data) {
+            fuckList.value = data
+            console.log(fuckList.value, 'fuck');
+        }
+        onMounted(() => {
 
-        return {}
+        })
+        return {
+            tagChange,//标签选择
+            tagList,//标签列表
+            listBack,
+            fuckList,
+            selectIndex,
+        }
+    },
+    components: {
+        LitLine,
+        LineTree,
+        InsideModule,
     }
 }
 </script>
 
-<style lang="scss" scoped>
+<style  scoped>
+.bigBox {
+    width: 98%;
+    height: 100%;
+    margin-left: 10px;
+    margin-top: 5px;
+}
 
+.tagLit {
+    display: inline-block;
+    width: 112px;
+    height: 40px;
+    /* border: 1px solid red; */
+    text-align: center;
+    line-height: 40px;
+    margin-left: 10px;
+    margin-top: 5px;
+    font-size: 12px;
+}
+
+.setBox {
+    width: 100%;
+    height: calc(100vh - 200px);
+    /* border: 1px solid saddlebrown; */
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.traBox {
+    width: 20%;
+    height: calc(100vh - 200px);
+    /* border: 1px solid green; */
+    background-color: #F7F8FB;
+}
+
+.changeBox {
+    width: 70%;
+    height: calc(100vh - 200px);
+    /* border: 1px solid red; */
+}
 </style>

src/pages/system/components/InsideModule.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <h1>这里是内置</h1>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/system/components/LineTree.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <div class="traBox">
+            <span style="line-height:20px;text-align:center;">
+                <img style="width: 20px;height: 20px;" src="../../../assets/icon/pice_set.png" alt="">
+                一次接线方式</span>
+            <el-tree style="width: 120px;margin: 0 auto;background-color: #F7F8FB;" :data="lineData" :props="defaultProps"
+                @node-click="handleNodeClick" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs } from 'vue'
+import litLine from '@/api/litLine'
+import systemRow from '@/api/systemRow';
+import LitLine from './LitLine.vue';
+export default {
+    setup(props, { emit }) {
+        let lineData = ref([])//树形数据
+        let defaultProps = ref({
+            children: "children",
+            label: "name",
+            id: 'id'
+        })
+        let pushList = ref([])
+        function searchLine() {
+            litLine.getLineModel({ pageno: 1, pagesize: 10 }).then(res => {
+                console.log(res, '987res');
+            })
+        }
+        function searchFlashLel() {
+            systemRow.getChildren({ code: "voltage_level" }).then(res => {
+                lineData.value = res.data
+            })
+        }
+        function handleNodeClick(e) {
+            litLine.getAllLine({ vol_id: e.id - 0 }).then(res => {
+                pushList.value = res.data
+                emit("listBack", pushList.value)
+            })
+        }
+        onMounted(() => {
+            searchLine()
+            searchFlashLel()
+        })
+        return {
+            lineData,//树形数据
+            searchLine,//获取数据
+            defaultProps,
+            searchFlashLel,
+            handleNodeClick,
+            pushList,
+        }
+    },
+    components: {
+        LitLine
+    }
+}
+</script>
+
+<style scoped>
+.traBox {
+    text-align: center;
+}
+</style>

src/pages/system/components/LitLine.vue

@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <div>
+                <el-button type="primary" plain @click="createType">
+                    <el-icon>
+                        <Plus />
+                    </el-icon>添加新分类</el-button>
+            </div>
+            <div>
+                <el-table ref="multipleTableRef" :stripe="true" :data="lineList" style="width: 100%"
+                    @selection-change="handleSelectionChange">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column label="编号" prop="id" width="auto">
+                        <!-- <template #default="scope">{{ scope.row.cr }}</template> -->
+                    </el-table-column>
+                    <el-table-column label="线路名称" prop="name" width="auto" />
+                    <el-table-column width="auto" label="线路图" prop="pic">
+                        <template #default="scope">
+                            <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;" @click="lookPic(scope.row)">查看</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="接线方式" prop="name" width="auto" />
+                    <el-table-column label="上传时间" prop="ct" width="auto" show-overflow-tooltip />
+                    <el-table-column label="操作" width="320">
+                        <template #default="scope">
+                            <el-button link type="primary" size="small" @click="editLine(scope.row)"><el-icon>
+                                    <EditPen />
+                                </el-icon>编辑</el-button>
+                            <el-button link type="primary" size="small" @click="lookLine(scope.row)"><el-icon>
+                                    <View />
+                                </el-icon>查看</el-button>
+                            <el-button link type="danger" size="small" @click="delLine(scope.row)"><el-icon>
+                                    <Delete />
+                                </el-icon>删除</el-button>
+                            <el-button link type="primary" size="small" @click="moduleLine(scope.row)"><el-icon>
+                                    <Coin />
+                                </el-icon>间隔模型</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div>
+                <AddLine v-if="alModal" :alModal="alModal" :search="search" @alBack="alBack"></AddLine>
+                <LookLine v-if="lookModal" :lookModal="lookModal" :needList="needList" :search="search" @lookBack="lookBack"
+                    :listNum="listNum"></LookLine>
+                <DelLine v-if="delModal" :delModal="delModal" :needList="needList" :search="search" @delBack=delBack></DelLine>
+                <PicLook v-if="picModal" :picModal="picModal" @picBack="picBack"></PicLook>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, watch } from 'vue';
+import litLine from "../../../api/litLine"
+import AddLine from '../modalComp/AddLine.vue';
+import LookLine from '../modalComp/LookLine.vue';
+import DelLine from '../modalComp/DelLine.vue';
+import PicLook from '../modalComp/PicLook.vue';
+import { fn } from 'moment';
+export default {
+    props: {
+        fuckList: {
+            type: Array,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let lineList = ref([])//
+        let result = props.fuckList
+        let alModal = ref(false)
+        let needList = ref([])
+        let lookModal = ref(false)
+        let delModal = ref(false)
+        let picModal = ref(false)
+        let listNum = ref(0)//0为查看，1为编辑
+        function search() {
+            litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
+                lineList.value = res.data
+            })
+        }
+        function handleSelectionChange(val) {
+            console.log(val, 'val');
+        }
+        function createType() {
+            alModal.value = true
+        }
+        function alBack(data) {
+            alModal.value = data
+        }
+        function editLine(row) {
+            needList.value = row
+            listNum.value = 1
+            lookModal.value = true
+        }
+        function lookLine(row) {
+            needList.value = row
+            listNum.value = 0
+            lookModal.value = true
+        }
+        function delLine(row) {
+            needList.value = row
+            delModal.value = true
+        }
+        function lookPic(row){
+            needList.value = row
+            picModal.value = true
+        }
+        function moduleLine(row) {
+            needList.value = row
+        }
+        function lookBack(data) {
+            lookModal.value = data
+        }
+        function delBack(data){
+            delModal.value = data
+        }
+        function picBack(data){
+            picModal.value = data
+        }
+        watch(() => props.fuckList, (newVal) => {
+            lineList.value = newVal
+        });
+        onMounted(() => {
+            search()
+        })
+        return {
+            lineList,
+            handleSelectionChange,
+            alModal,
+            createType,
+            alBack,
+            result,
+            search,
+            lookLine,
+            editLine,
+            delLine,
+            moduleLine,
+            needList,
+            lookModal,
+            lookBack,
+            listNum,
+            delModal,
+            delBack,
+            picModal,
+            lookPic,
+            picBack,
+        }
+    },
+    components: {
+        AddLine,
+        LookLine,
+        DelLine,
+        PicLook,
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/system/modalComp/AddLine.vue

@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="dialogVisible" title="Tips" width="30%" @close="closes">
+                <!--  -->
+                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
+                    status-icon>
+                    <el-form-item label="名称" prop="name">
+                        <el-input v-model="ruleForm.name" />
+                    </el-form-item>
+                    <el-form-item label="电压等级">
+                        <el-select @change="flashChange" v-model="ruleForm.volId" placeholder="请选择电压等级">
+                            <template v-for="(item, index) in selectList">
+                                <el-option :label="item.name" :value="item.id" />
+                            </template>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="cancels">取消</el-button>
+                        <el-button type="primary" @click="sureClick">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import systemRow from '@/api/systemRow';
+import litLine from "@/api/litLine"
+export default {
+    //voltage_level,电压等级
+    props: {
+        alModal: {
+            type: Boolean,
+            required: true
+        },
+        search:{
+            type:Function,
+            required:true
+        }
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)
+        let result = props.alModal
+        let { cancels, sureClick } = toRefs(props)
+        let ruleForm = ref({
+            name: "",
+            volId: "",
+        })
+        let selectList = ref([])
+        let rules = reactive({
+            name: [
+                { required: true, message: '请输入名称', trigger: 'blur' },
+            ]
+        })
+        function lineList() {
+            dialogVisible.value = result
+        }
+        function searchFlashLel() {
+            systemRow.getChildren({ code: "voltage_level" }).then(res => {
+                console.log(res, 'lel');
+                selectList.value = res.data
+            })
+        }
+        function flashChange(e) {
+            ruleForm.value.volId = e
+        }
+        function cancelBack() {
+            dialogVisible.value = false
+            emit("alBack", dialogVisible.value)
+        }
+        function sureBack() {
+            litLine.addLine({
+                name: ruleForm.value.name,
+                vol_id: ruleForm.value.volId - 0
+            }).then(res => {
+                if (res.code == 0) {
+                    dialogVisible.value = false
+                    emit("alBack", dialogVisible.value)
+                    ElMessage({
+                        message: "添加成功",
+                        type: "success",
+                        duration: 1500
+                    })
+                    props.search()
+                }
+            })
+
+        }
+        onMounted(() => {
+            lineList()
+            searchFlashLel()
+        })
+        return {
+            searchFlashLel,
+            dialogVisible,
+            cancels: cancelBack,
+            sureClick: sureBack,
+            flashChange,
+            ruleForm,
+            selectList,
+            rules,
+            closes: cancelBack,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/system/modalComp/DelLine.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="dialogVisible" title="删除信息" width="30%" @close="closes">
+                <h2><el-icon style="color: red;">
+                        <WarningFilled />
+                    </el-icon>确定删除该信息？</h2>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="cancels">取消</el-button>
+                        <el-button type="primary" @click="sureClick">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import litLine from '@/api/litLine';
+export default {
+    props: {
+        delModal: {
+            type: Boolean,
+            required: true
+        },
+        needList: {
+            type: Object,
+            required: true
+        },
+        search: {
+            type: Function,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)
+        let result = props.delModal
+        let lastList = props.needList
+        let delId = ref('')
+        let { cancels, sureClick } = toRefs(props)
+        function lineList() {
+            delId.value = lastList.id
+            dialogVisible.value = result
+        }
+        function canBack() {
+            dialogVisible.value = false
+            emit("delBack", dialogVisible.value)
+        }
+        function sureGet() {
+            litLine.delLine({ id: delId.value - 0 }).then(res => {
+                if (res.code == 0) {
+                    ElMessage({
+                        type: "success",
+                        message: "删除成功",
+                        duration: 1500
+                    })
+                    props.search()
+                    dialogVisible.value = false
+                    emit("delBack", dialogVisible.value)
+                }
+            })
+
+        }
+        onMounted(() => {
+            lineList()
+        })
+        return {
+            dialogVisible,
+            cancels: canBack,
+            sureClick: sureGet,
+            closes: canBack,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/system/modalComp/LookLine.vue

@@ -0,0 +1,136 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="dialogVisible" :title="titles" width="30%" @close="closes">
+                <!--  -->
+                <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>
+                    <el-form-item label="名称" prop="name">
+                        <el-input v-model="ruleForm.name" :disabled="disNum" />
+                    </el-form-item>
+                    <el-form-item label="电压等级">
+                        <el-select v-model="ruleForm.volId" :disabled="disNum" placeholder="请选择电压等级">
+                            <template v-for="(item, index) in selectList">
+                                <el-option :label="item.name" :value="item.id" />
+                            </template>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="cancels">取消</el-button>
+                        <el-button type="primary" @click="sureClick">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import litLine from '@/api/litLine';
+import systemRow from '@/api/systemRow';
+export default {
+    props: {
+        lookModal: {
+            type: Boolean,
+            required: true
+        },
+        needList: {
+            type: Object,
+            required: true
+        },
+        listNum: {
+            type: Number,
+            required: true
+        },
+        search: {
+            type: Function,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)
+        let result = props.lookModal
+        let newList = props.needList
+        let careNum = props.listNum
+        let titles = ref("查看")
+        let selectList = ref([])
+        let editId = ref("")
+        let disNum = ref(false)
+        let { cancels, sureClick } = toRefs(props)
+        let ruleForm = ref({
+            name: "",
+            volId: "",
+        })
+        function searchFlashLel() {
+            systemRow.getChildren({ code: "voltage_level" }).then(res => {
+                console.log(res, 'vvv');
+                selectList.value = res.data
+            })
+        }
+        function lineList() {
+            ruleForm.value.name = newList.name
+            ruleForm.value.volId = newList.vol_level_id
+            editId.value = newList.id
+            if (careNum == 0) {
+                titles.value = '查看'
+                disNum.value = true
+            } else {
+                titles.value = '编辑'
+                disNum.value = false
+            }
+            dialogVisible.value = result
+        }
+        function canBack() {
+            dialogVisible.value = false
+            emit("lookBack", dialogVisible.value)
+        }
+        function sureBack() {
+            if (careNum == 0) {
+                dialogVisible.value = false
+                emit("lookBack", dialogVisible.value)
+            } else {
+                litLine.addLine({
+                    id: editId.value - 0,
+                    name: ruleForm.value.name,
+                    vol_id: ruleForm.value.volId
+                }).then(res => {
+                    if (res.code == 0) {
+                        dialogVisible.value = false
+                        emit("lookBack", dialogVisible.value)
+                        ElMessage({
+                            type: "success",
+                            message: "修改成功",
+                            duration: 1500
+                        })
+                        props.search()
+                    }
+                })
+            }
+        }
+        onMounted(() => {
+            lineList()
+            searchFlashLel()
+        })
+        return {
+            dialogVisible,
+            ruleForm,
+            cancels: canBack,
+            sureClick: sureBack,
+            closes: canBack,
+            lineList,
+            titles,
+            editId,
+            disNum,
+            searchFlashLel,
+            selectList,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/system/modalComp/PicLook.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="dialogVisible" title="图片查看" width="30%" @close="closes">
+                <h1>暂无图片信息</h1>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="cancels">取消</el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+export default {
+    props: {
+        picModal: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let dialogVisible = ref(false)
+        let result = props.picModal
+        let { cancels } = toRefs(props)
+        function lineList() {
+            dialogVisible.value = result
+        }
+        function canBack() {
+            dialogVisible.value = false
+            emit("picBack", dialogVisible.value)
+        }
+        onMounted(() => {
+            lineList()
+        })
+        return {
+            dialogVisible,
+            lineList,
+            cancels: canBack,
+            closes:canBack,
+        }
+    }
+}
+</script>
+
+<style scoped></style>

src/router/index.js

@@ -58,14 +58,14 @@ const routes = [
             },
             {
                 path:"/home/setting",
-                component:()=>import("@/pages/setting/SettingPage.vue"),
+                component:()=>import("@/pages/system/SystemPage.vue"),
                 meta:{
                     name:"setting"
                 }
             },
             {
                 path:"/home/system",
-                component:()=>import("@/pages/system/SystemPage.vue"),
+                component:()=>import("@/pages/setting/SettingPage.vue"),
                 meta:{
                     name:"system"
                 }

src/utils/request.js

@@ -71,6 +71,7 @@ service.interceptors.response.use(
         return res
     },
     error => {
+        console.log(error,'相应拦截器error');
         if (error.response.status === 401) {
             Message({
                 message: "登陆已过期，请重新登录",