3

src/pages/components/HeadMenu.vue

@@ -3,26 +3,37 @@
         <div class="bigBox">
             <!-- 左侧标题 -->
             <div class="monyBox">
-                <el-icon class="folders">
+                <!-- <el-icon class="folders">
                     <FolderRemove />
                 </el-icon>
-                <span class="headSpan">变电站scd检测</span>
+                <span class="headSpan">变电站scd检测</span> -->
+                <img style="display: block;" src="../../assets/image/flash_scd.png" alt="">
             </div>
             <!-- 右侧功能 -->
             <div class="setBox">
                 <!-- 返回图标 -->
-                <div style="padding-right: 10px;border-right: 1px solid white;">
+                <div style="padding-right: 16px;border-right: 1px solid white;">
                     <span class="outImg">
-                        <img class="backImg" src="../../assets/icon/back_to.png" alt="">
+                        <img class="backImg" @mouseover="imgOver" @mouseout="imgOut"
+                            :src="img ? require('../../assets/image/back_gray.png') : require('../../assets/image/back_now.png')"
+                            alt="">
                     </span>
                 </div>
                 <!-- 时间、日期显示 -->
-                <div>
-                    <span class="date" style="margin-right: 10px;">{{ getDate() }}</span>
-                    <span class="date">{{ times }}</span>
+                <div style="width: 30%;position: relative;">
+                    <span class="date" style="
+                    margin-right: 16px;
+                    width: 100%;
+                    height: 30px;
+                    display: inline-block;
+                    text-align: center;
+                    line-height: 30px;
+                    ">{{ getDate() }} {{ times }}</span>
+                    <img style="width: 100%;position: absolute;top: 23px;left: 0px;"
+                        src="../../assets/image/head_dotted.png" alt="">
                 </div>
                 <!-- 用户栏 -->
-                <div class="userBox">
+                <div class="userBox" style="background-color: rgba(50,59,91, 0.9);">
                     <span class="userSpan">
                         <img style="width: 12px;height: 12px;" src="../../assets/icon/user_gray.png" alt="">
                     </span>
@@ -36,8 +47,13 @@
                                     <!-- 个人信息 -->
                                     <div>
                                         <!-- 头像及登陆信息 -->
-                                        <div
-                                            style="display: flex;justify-content: space-around;align-items: center;height: 80px;border-bottom: 1px solid gray;">
+                                        <div style="
+                                            display: flex;
+                                            justify-content: space-around;
+                                            align-items: center;
+                                            height: 80px;
+                                            border-bottom: 1px solid gray;
+                                            ">
                                             <div>
                                                 <img style="width: 40px;height: 40px;" src="../../assets/icon/Avatar.png"
                                                     alt="">
@@ -64,8 +80,12 @@
                 </div>
                 <!-- 最小化，关闭 -->
                 <div>
-                    <span class="moreSet" @click="miniSize">-</span>
-                    <span class="moreSet" @click="closeSize">x</span>
+                    <!-- <span class="moreSet" @click="miniSize">-</span>
+                    <span class="moreSet" @click="closeSize">x</span> -->
+                    <img :src="mini ? require('../../assets/image/mini_gray.png') : require('../../assets/image/window_min.png')"
+                        @click="miniSize" @mouseover="miniOver" @mouseout="miniOut" style="margin: 0 10px;" alt="">
+                    <img :src="close ? require('../../assets/image/close_red.png') : require('../../assets/image/window_close.png')"
+                        @click="closeSize" @mouseover="closeOver" @mouseout="closeOut" alt="">
                 </div>
             </div>
         </div>
@@ -79,6 +99,9 @@ export default {
     setup() {
         let times = ref('')//时间显示
         let router = useRouter()
+        let mini = ref(false)
+        let close = ref(false)
+        let img = ref(false)
         // 获取日期
         function getDate() {
             const currentDate = new Date();
@@ -105,10 +128,28 @@ export default {
         function closeSize() {
             windowEx.Close()
         }
+        function miniOver() {//鼠标移入
+            mini.value = true
+        }
+        function miniOut() {//鼠标移出
+            mini.value = false
+        }
+        function closeOver() {
+            close.value = true
+        }
+        function closeOut() {
+            close.value = false
+        }
+        function imgOver() {
+            img.value = true
+        }
+        function imgOut() {
+            img.value = false
+        }
         // 退出登录
-        function logOut(){
-            if(typeof windowEx != "undefined"){
-                windowEx.Size(384,426)
+        function logOut() {
+            if (typeof windowEx != "undefined") {
+                windowEx.Size(384, 426)
             }
             localStorage.removeItem("loginStatus")
             router.push("/login")
@@ -126,12 +167,23 @@ export default {
             miniSize,//最小化窗口
             closeSize,//关闭窗口
             logOut,//登出
+            mini,
+            miniOut,
+            miniOver,
+            close,
+            closeOut,
+            closeOver,
+            img,
+            imgOver,
+            imgOut,
         }
     }
 }
 </script>
 
 <style scoped>
+@import url('https://fonts.font.im/css?family=Hanalei+Fill');
+
 p {
     margin: 0;
     padding: 0;
@@ -149,10 +201,11 @@ p {
 }
 
 .monyBox {
-    width: 230px;
+    width: 12%;
     height: 50px;
-    line-height: 50px;
-
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
 }
 
 .folders {
@@ -166,10 +219,11 @@ p {
     background-clip: text;
     color: transparent;
     font-size: 26px;
+    font-family: 'Hanalei Fill', cursive;
 }
 
 .setBox {
-    width: 400px;
+    width: 25%;
     height: 50px;
     /* border: 1px solid white; */
     display: flex;
@@ -179,17 +233,17 @@ p {
 
 .outImg {
     display: block;
-    width: 26px;
-    height: 26px;
-    background: linear-gradient(to bottom, #BAC0E1, #EDF2FF);
+    width: 30px;
+    height: 30px;
+    /* background: linear-gradient(to bottom, #BAC0E1, #EDF2FF); */
     border-radius: 50%;
     text-align: center;
     line-height: 26px;
 }
 
 .backImg {
-    width: 14px;
-    height: 14px;
+    width: 30px;
+    height: 30px;
     z-index: 2;
 }
 
@@ -199,7 +253,9 @@ p {
     background-clip: text;
     color: transparent;
     font-size: 14px;
-    border-bottom: 1px dotted white;
+    /* border-bottom: 1px dotted white; */
+    border-right: 1px solid white;
+    padding-right: 16px;
 }
 
 .userSpan {
@@ -220,6 +276,7 @@ p {
     font-size: 14px;
     text-align: center;
     line-height: 25px;
+    margin: 0 10px;
 }
 
 .moreSet {
@@ -253,4 +310,12 @@ p {
     display: flex;
     justify-content: space-around;
     align-items: center;
-}</style>
+}
+
+.userBox {
+    width: 25%;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+}
+</style>

src/pages/components/SideMenu.vue

@@ -3,7 +3,7 @@
         <div class="bigBox">
             <template v-for="(item, index) in menuList">
                 <div class="menuBox" @click="routeBoxClick(item)">
-                    <img :style="{ 'background': item.isChosen ? 'linear-gradient(138deg, #dbdbdb 0%, #cccecf 100%)' : 'none' }"
+                    <img :style="{ 'background': item.isChosen ? 'linear-gradient(138deg, #F1F3F9 0%, #F1F3F9 100%)' : 'none' }"
                         :src="item.isChosen ? item.isChoose : item.noChoose" class="rImg" alt="">
                     <p class="rp">{{ item.name }}</p>
                 </div>
@@ -108,8 +108,8 @@ p {
 
 .rImg {
     display: block;
-    width: 28px;
-    height: 28px;
+    width: 40px;
+    height: 40px;
     border-radius: 5px;
     margin: 0 auto;
     /* border-image: linear-gradient(171deg, rgba(215, 237, 255, 1), rgba(158, 210, 253, 1)) 0 0; */
@@ -119,5 +119,11 @@ p {
     width: 80px;
     height: 30px;
     font-size: 14px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    color: #1A2447;
+    line-height: 22px;
+    -webkit-background-clip: text;
+    /* -webkit-text-fill-color: transparent; */
 }
 </style>

src/pages/components/drawModal/AddAbility.vue

@@ -14,7 +14,7 @@
                 </el-form-item>
                 <el-form-item label="端子描述关键词" prop="setMemo">
                     <el-input style="width: 350px;" v-model="abilityFrom.setMemo"></el-input>
-                    <p style="color: #2C5BE5;font-size: 16px;">关键词之间“:”表示或者,“&”表示并且</p>
+                    <p style="color: #2C5BE5;font-size: 16px;">关键词之间“|”表示或者,“&”表示并且</p>
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -78,7 +78,7 @@ export default {
                 { required: true, message: '请选择设计功能名称', trigger: 'change' },
             ],
             setSon: [
-                { required: true, message: '请输入设计端子关系', trigger: 'blur' },
+                { required: true, message: '请输入设计端子名称', trigger: 'blur' },
             ],
             setMemo: [
                 { required: true, message: '请输入端子描述关键词', trigger: 'blur' },
@@ -86,6 +86,7 @@ export default {
         })//表单验证
         let numState = ref(0)//0为新增，1为修改
         let needEditRow = ref({})//需要修改的整个对象属性
+        let newAddId = ref("")//新增的id
         // 监听props.tabledata变化赋值
         watch(() => props.tableData, (newVal) => {
             fatherToSon.value = newVal
@@ -93,7 +94,6 @@ export default {
         // 监听props.modelids变化并赋值
         watch(() => props.modelIds, (newVal) => {
             needModel.value = newVal
-            console.log(needModel.value, 'watch');
         }, { immediate: true })
         // 监听props.iedtypes变化并赋值
         watch(() => props.iedTypes, (newVal) => {
@@ -144,7 +144,8 @@ export default {
                 flow.saveModelAndIed({
                     model_id: needModel.value - 0,
                     ied_type: needIedType.value,
-                    func_name: abilityFrom.value.setAbName,
+                    func_id:newAddId?.value,
+                    func_name: abilityFrom.value?.setAbName,
                     fcda_name: abilityFrom.value.setSon,
                     fcda_match_exp: abilityFrom.value.setMemo,
                 }).then(res => {
@@ -196,8 +197,10 @@ export default {
         function abNameChange(e) {
             if (e.label) {
                 abilityFrom.value.setAbName = e.label
+                newAddId.value = e.id
             } else {
                 abilityFrom.value.setAbName = e
+                console.log(e,'id');
             }
 
         }
@@ -221,6 +224,7 @@ export default {
             needIedType,//需要的iedtype
             numState,//0为新增，1为修改
             needEditRow,//需要的整个对象属性
+            newAddId,//新增的id
         }
     }
 }

src/pages/home/HomePage.vue

@@ -60,12 +60,12 @@ export default {
 }
 
 .elMain {
-    width: 85vw;
+    width: 87vw;
     height: 91vh;
     background-image: url('../../assets/image/rightSide.png');
     background-repeat: no-repeat;
-    /* background-position: 20px 20px; */
-    background-size: 99% 100%;
+    background-position: 0px 0px;
+    background-size: 100% 100%;
     margin: 0;
     padding: 0;
 }

src/pages/login/LoginNow.vue

@@ -129,9 +129,13 @@ export default {
     margin: 0;
     background: #FFFFFF;
     box-shadow: 0px 1px 1.25rem 2px rgba(61, 128, 177, 0.13);
-    position: relative;
+    position: absolute;
     border: 1px solid #ededed;
     border-radius: 3px;
+    left: 50%;
+    top: 50%;
+    margin-top: -17.25rem;
+    margin-left: -15.9rem
 }
 
 .formBox {

src/pages/mission/components/HaveMis.vue

@@ -16,18 +16,19 @@
         <div>
           <p class="norep">待检测任务</p>
         </div>
-        <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;">
+        <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;"
+          v-if="nowRunList.name || misList.length > 0">
           <div :class="setImg(nowRunList)" v-if="nowRunList.name">
             <div class="intBoxOne">
               <p class="intOne">
                 <span style="font-size: 18px;color: white;">{{ nowRunList.name }}</span>
                 <span style="font-size: 12px;" @click="editItem(nowRunList)">编辑</span>
               </p>
-              <p>
+              <p style="margin-left: 8px;">
                 <img style="width: 15px;height: 15px;" src="../../../assets/icon/white_flash.png" alt="" />
                 <span style="font-size: 12px;color:white" class="commonSpan">{{ nowRunList.station_name }}</span>
               </p>
-              <p>
+              <p style="margin-left: 8px;">
                 <img style="width: 15px;height: 15px;" src="../../../assets/icon/white_clock.png" alt="" />
                 <span style="font-size: 12px;color:white" class="commonSpan">{{ nowRunList.ct }}</span>
               </p>
@@ -38,54 +39,76 @@
                   v-loading="emLoading"></em></span>
             </div>
           </div>
-          <div class="intBox" v-for="(item, index) in misList" :style="setImg(item, index)">
+          <div class="intBox" v-for="(item, index) in misList" :style="setImg(item, index)" @mouseover="intOver(index)"
+            @mouseout="intOut(index)">
             <div class="intBoxOne">
               <p class="intOne">
-                <span style="font-size: 18px;color: #1A2447;">{{ item.name }}</span>
+                <span style="font-size: 18px;">{{ item.name }}</span>
                 <span style="font-size: 12px;cursor: pointer;" @click="editItem(item, index)">编辑</span>
               </p>
-              <p>
-                <img style="width: 15px;height: 15px;" src="../../../assets/icon/flash_darkBlue.png" alt="" />
-                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.station_name }}</span>
+              <p style="margin-left: 8px;">
+                <img style="width: 15px;height: 15px;"
+                  :src="isImg && isIndex == index ? require('../../../assets/icon/white_flash.png') : require('../../../assets/icon/flash_darkBlue.png')"
+                  alt="" />
+                <span style="font-size: 12px;" class="commonSpan">{{ item.station_name }}</span>
               </p>
-              <p>
-                <img style="width: 15px;height: 15px;" src="../../../assets/icon/clock_darkBlue.png" alt="" />
-                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.ut }}</span>
+              <p style="margin-left: 8px;">
+                <img style="width: 15px;height: 15px;"
+                  :src="isImg && isIndex == index ? require('../../../assets/icon/white_clock.png') : require('../../../assets/icon/clock_darkBlue.png')"
+                  alt="" />
+                <span style="font-size: 12px;" class="commonSpan">{{ item.ut }}</span>
               </p>
             </div>
             <!-- 点击检测 -->
             <div class="setNow">
-              <span style="font-size: 16px;color:blue" class="setnowspan" @click="startNow(item, index)">立即检测</span>
+              <span style="font-size: 16px;" class="setnowspan" @click="startNow(item, index)">立即检测</span>
             </div>
           </div>
         </div>
+        <div
+          style="width: 100%;height: calc(100vh - 800px);margin: 0 auto;text-align: center;line-height: calc(100vh - 800px);"
+          v-else>
+          <p style="display: flex;justify-content: center;align-items: center;">
+            <el-icon style="font-size: 16px;display: block;color: #7484AB;">
+              <Warning />
+            </el-icon>
+            <span style="display: block;color: #7484AB;">暂无待检测任务，请新建</span>
+          </p>
+        </div>
       </div>
+
       <!-- 已完成 -->
       <div class="noReportBox">
         <div>
           <p class="norep">最近检测任务-已完成</p>
         </div>
         <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;">
-          <div class="intBox" v-for="(item, index) in passList">
+          <div class="intBox" v-for="(item, index) in passList" @mouseover="intOvers(index)" @mouseout="intOuts(index)">
             <div class="intBoxOne">
               <p class="intOne">
                 <span>{{ item.name }}</span>
-                <span>详情→</span>
+                <span>详情<el-icon>
+                    <Right />
+                  </el-icon></span>
               </p>
-              <p>
-                <img style="width: 15px;height: 15px;" src="../../../assets/icon/flash_darkBlue.png" alt="" />
-                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.station_name }}</span>
+              <p style="margin-left: 8px;">
+                <img style="width: 15px;height: 15px;"
+                  :src="isImgs && isIndexs == index ? require('../../../assets/icon/white_flash.png') : require('../../../assets/icon/flash_darkBlue.png')"
+                  alt="" />
+                <span style="font-size: 12px;" class="commonSpan">{{ item.station_name }}</span>
               </p>
-              <p>
-                <img style="width: 15px;height: 15px;" src="../../../assets/icon/clock_darkBlue.png" alt="" />
-                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ item.ct }}</span>
+              <p style="margin-left: 8px;">
+                <img style="width: 15px;height: 15px;"
+                  :src="isImgs && isIndexs == index ? require('../../../assets/icon/white_clock.png') : require('../../../assets/icon/clock_darkBlue.png')"
+                  alt="" />
+                <span style="font-size: 12px;" class="commonSpan">{{ item.ct }}</span>
               </p>
             </div>
             <!-- 点击检测 -->
             <div class="setNow">
-              <span style="color: #255CE7;" class="setnowspan" @click="goNetStructPicture(item)">scd可视化</span>
-              <span style="margin: 0 10px;color: #7484AB;" class="setnowspan">|</span>
-              <span style="color: #255CE7;" class="setnowspan">检测结果</span>
+              <span class="setnowspan" @click="goNetStructPicture(item)">scd可视化</span>
+              <span style="margin: 0 10px;" class="setnowspan">|</span>
+              <span class="setnowspan">检测结果</span>
             </div>
           </div>
         </div>
@@ -109,6 +132,10 @@ export default {
     let nowRunList = ref({})//正在检测任务列表
     let passList = ref([])//已完成检测任务列表
     let emLoading = ref(true)
+    let isImg = ref(false)
+    let isImgs = ref(false)
+    let isIndex = ref(999999)
+    let isIndexs = ref(999999)
     function scdLink() {
       router.push("/home/scdMap");
     }
@@ -130,7 +157,7 @@ export default {
         query: {
           id: row.scd_id,
           name: row.name,
-          station:row.station_id,
+          station: row.station_id,
         },
       });
     }
@@ -191,6 +218,22 @@ export default {
         return "intBox"
       }
     }
+    function intOver(num) {
+      isIndex.value = num
+      isImg.value = true
+    }
+    function intOut(num) {
+      isIndex.value = num
+      isImg.value = false
+    }
+    function intOvers(num) {
+      isIndexs.value = num
+      isImgs.value = true
+    }
+    function intOuts(num) {
+      isIndexs.value = num
+      isImgs.value = false
+    }
     onMounted(() => {
       getList()
     })
@@ -207,6 +250,14 @@ export default {
       setImg,
       passList,//已完成列表
       emLoading,
+      isImg,
+      isImgs,
+      intOver,
+      intOut,
+      intOvers,
+      intOuts,
+      isIndex,
+      isIndexs,
     };
   },
   components: {
@@ -216,6 +267,7 @@ export default {
 
 <style scoped>
 @import url('https://fonts.font.im/css?family=Montserrat');
+
 p {
   margin: 0;
   padding: 0;
@@ -254,6 +306,7 @@ p {
   font-family: Source Han Sans CN-Regular, Source Han Sans CN;
   font-weight: 400;
   color: #7484ab;
+  margin: 10px 0;
   /* line-height: 22px; */
 }
 
@@ -262,6 +315,7 @@ p {
   font-family: Source Han Sans CN-Regular, Source Han Sans CN;
   font-weight: 400;
   color: #1a2447;
+  margin: 10px 0;
 }
 
 .nowEm {
@@ -289,18 +343,32 @@ p {
 }
 
 .intBox {
-  width: 269px;
-  height: 116px;
-  line-height: 20px;
+  width: 336px;
+  height: 144px;
+  line-height: 30px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   margin: 15px 15px;
-  /* border: 1px solid #255ce7; */
   background-color: #F6F9FF;
   border-radius: 5px;
   box-shadow: inset 0px -3px 3px 0px #C8D4EC;
-  /* border: 1px solid brown; */
-  /* background-image: url(../../../assets/image/card_blue.png); */
+}
+
+.intBox:hover {
+  width: 336px;
+  height: 144px;
+  line-height: 30px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 15px 15px;
+  background-color: #7DC6FE;
+  border-radius: 5px;
+  box-shadow: inset 0px -3px 3px 0px #C8D4EC;
+  color: white;
+}
+
+.intBox>div>p>span:hover {
+  color: white;
 }
 
 .intBoxCopy {
@@ -339,6 +407,12 @@ p {
 
 .commonSpan {
   font-size: 14px;
+  color: #7484AB;
+}
+
+.intBox:hover .commonSpan .setnowspan,
+.intBox:hover span {
+  color: white;
 }
 
 .setNow {
@@ -349,6 +423,11 @@ p {
 .setnowspan {
   font-size: 17px;
   cursor: pointer;
+  color: blue;
+}
+
+.needColor {
+  color: #7484AB;
 }
 
 :deep(.el-loading-spinner .circular) {

src/utils/allImg.js

@@ -1,11 +1,11 @@
-import searchGray from '../assets/icon/search_gray.png'
-import searchBlue from '../assets/icon/search_blue.png'
-import reportGray from "../assets/icon/report_gray.png"
-import reportBlue from "../assets/icon/report_blue.png"
-import settingGray from "../assets/icon/setting_gray.png"
-import settingBlue from "../assets/icon/setting_blue.png"
-import systemGray from "../assets/icon/system_gray.png"
-import systemBlue from "../assets/icon/system_blue.png"
+import searchGray from '../assets/icon/real_icon/mission_gray@2x.png'
+import searchBlue from '../assets/icon/real_icon/mission_blue@2x.png'
+import reportGray from "../assets/icon/real_icon/report_gray@2x.png"
+import reportBlue from "../assets/icon/real_icon/report_blue@2x.png"
+import settingGray from "../assets/icon/real_icon/setting_gray@2x.png"
+import settingBlue from "../assets/icon/real_icon/setting_blue@2x.png"
+import systemGray from "../assets/icon/real_icon/system_gray@2x.png"
+import systemBlue from "../assets/icon/real_icon/system_blue@2x.png"
 export default{
     searchBlue,
     searchGray,