lct

Your Name

2022-08-12 9bc4417c85acb89059a5dc039dcad218a1c0d468

lct

 src/router/route.ts

@@ -87,5 +87,13 @@
        meta: {
            title: '巡检路线'
        }
    },
    {
        path: '/intelligentLine',
        name: 'intelligentMap',
        component: () => import('/@/views/intellectInspect/intelligentLine/index.vue'),
        meta: {
            title: '巡检路线'
        }
    }
];

 src/stores/interface/index.ts

@@ -12,6 +12,7 @@
    userName: string;
    uid: string;
    projectId: string;
    dataList: [];
}
export interface UserInfosStates {
    userInfos: UserInfosState;

 src/stores/userInfo.ts

@@ -16,14 +16,15 @@
            roles: [],
            authBtnList: [],
            uid:'',
            projectId:''
        },
            projectId: '',
            dataList: []
        }
    }),
    actions: {
        async setUserInfos(value: any) {
            this.userInfos.userName = value.username
            this.userInfos.uid = value.uid
            this.userInfos.roles = value.role
            this.userInfos.userName = value.username;
            this.userInfos.uid = value.uid;
            this.userInfos.roles = value.role;
            // const userName = Cookies.get('userName');
            // // 模拟数据
            // let defaultRoles: Array<string> = [];
@@ -65,6 +66,6 @@
            // } else {
            //     this.userInfos = userInfos;
            // }
        },
    },
        }
    }
});

 src/views/intellectInspect/intelligentLine/index.vue

@@ -10,46 +10,58 @@
      <div>全屏</div>
    </div>
    <div class="backBtn" @click="goBack()">
      <img src="../../../assets/loginPage/back-icon.png">
                <img src="../../../assets/loginPage/back-icon.png" />
      <div>退出</div>
    </div>
    </div>
    <div class="blocks">
      <div class="star-pic">
        <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png"></div>
        <div class="star"><img src="../../../assets/loginPage/device-pic.png"></div>
                <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png" /></div>
                <div class="star"><img src="../../../assets/loginPage/device-pic.png" /></div>
      </div>
      <div class="line-map" v-if="data&&data.length>0">
        <div class="line-item" v-for="(item,index) in data" :key="index">
            <div class="line-map" v-if="dataList && dataList.length > 0">
                <div class="line-item" v-for="(item, index) in dataList" :key="index">
          <div class="picbox">
            <img src="../../../assets/loginPage/equipment.jpg">
            <p>RFID: <span>{{item.rfid}}</span></p>
            <p>位置: <span>{{item.region.toString()}}</span></p>
                        <img src="../../../assets/loginPage/equipment.jpg" />
                        <p>
                            RFID: <span>{{ item.rfid }}</span>
                        </p>
                        <p>
                            位置: <span>{{ item.region.toString() }}</span>
                        </p>
          </div>
          <div class="area-head" :class="item.points.some(e=>e.reportResult == null)?'fadeBorder':''">
            <div class="indicator" :class="item.points.some(e=>e.reportResult == null)?'someUndone':(item.points.some(e=>e.reportResult == 1)?'somewarning':'')">
                    <div class="area-head" :class="item.points.some((e) => e.reportResult == null) ? 'fadeBorder' : ''">
                        <div class="indicator" :class="item.points.some((e) => e.reportResult == null) ? 'someUndone' : item.points.some((e) => e.reportResult == 1) ? 'somewarning' : ''">
              <div class="indi-dot"></div>
<!--              <div class="indi-pulse"></div>-->
<!--              <div class="indi-pulse1"></div>-->
            </div>
            <div class="arrow" v-if="item.points.some(e=>e.reportResult != null)">

            </div>
            <div class="top-line" :class="item.points.some(e=>e.reportResult == null)?'fadeLine':''"></div>
                        <div class="arrow" v-if="item.points.some((e) => e.reportResult != null)"></div>
                        <div class="top-line" :class="item.points.some((e) => e.reportResult == null) ? 'fadeLine' : ''"></div>
          </div>
          <div class="more-info">
            <div class="item" v-for="(t,i) in item.points" :key="i" :class="t.reportResult == null?'undone':(t.reportResult==1?'warning':'')">
                        <div class="item" v-for="(t, i) in item.points" :key="i" :class="t.reportResult == null ? 'undone' : t.reportResult == 1 ? 'warning' : ''">
                <section>
                  <div class="dot"></div>
                  <div class="pulse"></div>
                  <div class="pulse1"></div>
                </section>
                <div>
                  <div><span>巡检点：</span><span>{{t.point}}</span></div>
                  <div><span>巡检状态：</span><span>{{t.pointCheckStatus==1?'未完成':'已完成'}}</span></div>
                  <div v-if="t.reportResult!=null"><span>巡检指标：</span><span>{{t.quotaContent}}</span></div>
                  <div v-if="(t.dataReportType==2 || t.dataReportType==3)&&t.secondReferenceResult"><span>参数：</span><span class="target">{{t.secondReferenceResult+t.quotaUnit}}</span></div>
                  <div><span>巡检结果：</span><span class="target">{{t.reportResult==null?'--':(t.reportResult==0?'正常':'异常')}}</span></div>
                                <div>
                                    <span>巡检点：</span><span>{{ t.point }}</span>
                                </div>
                                <div>
                                    <span>巡检状态：</span><span>{{ t.pointCheckStatus == 1 ? '未完成' : '已完成' }}</span>
                                </div>
                                <div v-if="t.reportResult != null">
                                    <span>巡检指标：</span><span>{{ t.quotaContent }}</span>
                                </div>
                                <div v-if="(t.dataReportType == 2 || t.dataReportType == 3) && t.secondReferenceResult">
                                    <span>参数：</span><span class="target">{{ t.secondReferenceResult + t.quotaUnit }}</span>
                                </div>
                                <div>
                                    <span>巡检结果：</span><span class="target">{{ t.reportResult == null ? '--' : t.reportResult == 0 ? '正常' : '异常' }}</span>
                                </div>
                </div>
            </div>
          </div>
@@ -58,16 +70,12 @@
          <div class="picbox"></div>
          <div class="area-head">
            <div class="finish-point">
              <div>
                完成巡检
                            <div>完成巡检</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tip" v-else>
        抱歉，暂时查询不到巡检路线...
      </div>
            <div class="tip" v-else>抱歉，暂时查询不到巡检路线...</div>
    </div>
  </div>
</template>
@@ -75,32 +83,35 @@
<script lang="ts">
import screenfull from 'screenfull';
import { lineApi } from '/@/api/intelligentLine';
import { toRefs, reactive, ref, onMounted, onUnmounted } from 'vue';
import { toRefs, reactive, ref, onMounted, onUnmounted, computed } from 'vue';

import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import {useUserInfo} from "/@/stores/userInfo";
import { useUserInfo } from '/@/stores/userInfo';

// 定义接口来定义对象的类型
interface stateType {
  present: string,
  isScreenfull: boolean,
  path: string,
  socket: any,
  socketData: string,
  data: Array<any>
    present: string;
    isScreenfull: boolean;
    path: string;
    socket: any;
    socketData: string;
    data: Array<any>;
}
export default {
  name: 'intelligentLine',
  components: {},
  setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
    const state = reactive<stateType>({
      present: '',
      isScreenfull: false,
      path: "http://192.168.0.29:8008/ws/test/",
            path: 'http://192.168.0.29:8008/ws/test/',
      socketData: '',
      socket: null,
      data: []
@@ -108,66 +119,71 @@

    onMounted(()=>{
      setInterval(() => {
        state.present = new Date().toLocaleString()
      }, 1000)
      init()
                state.present = new Date().toLocaleString();
            }, 1000);
            init();
      // getLine()
    })
        });

        const dataList = computed(() => {
            return userInfos.value.dataList;
        });

    // socket获取数据
    const init=()=>{
      if(typeof(window.WebSocket) === "undefined"){
        alert("您的浏览器不支持socket")
            if (typeof window.WebSocket === 'undefined') {
                alert('您的浏览器不支持socket');
      }else{
        // 实例化socket
        var url = state.path + '80938081556545536'
        url = url.replace("https","ws").replace("http","ws");
        console.log(url,'获取地址')
        state.socket = new window.WebSocket(url)
                var url = state.path + '80938081556545536';
                url = url.replace('https', 'ws').replace('http', 'ws');
                console.log(url, '获取地址');
                state.socket = new window.WebSocket(url);
        // 监听socket连接
        state.socket.onopen=()=>{
          console.log("socket连接成功")
        }
                    console.log('socket连接成功');
                };
        // 监听socket错误信息
        state.socket.onerror = ()=>{
          console.log("socket连接错误")
        }
                    console.log('socket连接错误');
                };
        // 监听socket消息
        state.socket.onmessage = (msg)=>{
          console.log(msg,'msg')
          console.log(typeof msg.data,'type')
          if(msg.data =='连接成功') return
          state.socketData = msg.data
          console.log(JSON.parse(state.socketData),'------------------',)
          if(typeof JSON.parse(state.socketData) == Array){
            state.data = JSON.parse(state.socketData)
            console.log(state.data)
          }
                    // console.log(msg, 'msg');
                    // console.log(typeof msg.data, 'type');
                    if (msg.data === '连接成功') return;
                    // state.socketData = msg.data;
                    // console.log(JSON.parse(state.socketData), '------------------');
                    // if (typeof JSON.parse(state.socketData) == Array) {
                    //     debugger;
                    debugger;
                    userInfos.value.dataList = JSON.parse(msg.data);
                    console.log(state.data);
                    // }
          // console.log(msg,'msg')
          // console.log(this.data,'data-------')
                };
        }
      }
    }
        };

    const send= ()=> {
      state.socket.send(params)
    }

            state.socket.send(params);
        };

    // 接口获取数据
    const getLine = async()=>{
      let res = await lineApi().getLine({ id: '80647416891768832' });
      if (res.data.code === '200') {
        console.log(res.data.data,'获取巡检点')
        state.data = res.data.data
        console.log(state.data,'---')
                console.log(res.data.data, '获取巡检点');
                state.data = res.data.data;
                console.log(state.data, '---');
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }
        };

    // 全屏
    const onScreenfullClick=()=>{
@@ -178,33 +194,33 @@
       screenfull.toggle();
       screenfull.on('change', () => {
         if (screenfull.isFullscreen) {
           state.isScreenfull = true
         }
         else{
           state.isScreenfull = false
                    state.isScreenfull = true;
                } else {
                    state.isScreenfull = false;
         }
       });
     }
        };

     // 返回
     const goBack = ()=>{
       window.history.go(-1)
     }
            window.history.go(-1);
        };

    // 页面关闭处理
    onUnmounted( ()=> {
    // 销毁监听
      state.socket.onclose = ()=>{
        console.log("socket已经关闭")
      }
    })
                console.log('socket已经关闭');
            };
        });
    return{
            dataList,
      goBack,
      onScreenfullClick,
      ...toRefs(state)
        };
    }
  }
}
};
// export default {
//   name: 'NewForm',
//   props: {
@@ -323,7 +339,7 @@
    0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
        opacity: 0;
    }

    25% {
@@ -347,7 +363,7 @@
    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 0.0;
        opacity: 0;
    }
  }

@@ -355,7 +371,7 @@
    0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
        opacity: 0;
    }

    25% {
@@ -379,7 +395,7 @@
    100% {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.0;
        opacity: 0;
    }
  }
  
@@ -405,7 +421,7 @@
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../../../assets/loginPage/map-bg.jpg") no-repeat center;
    background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center;
    background-size: 100% 100%;
    .big-title{
      height: 40px;
@@ -433,12 +449,12 @@
        margin-right: 20px;
        .toFull{
          font-weight: bolder;
          color: #00FFFF;
                color: #00ffff;
          margin-right: 10px;
        }
        div{
          font-size: 16px;
          color: #00FFFF;
                color: #00ffff;
        }
      }

@@ -453,7 +469,7 @@
        }
        div{
          font-size: 16px;
          color: #00FFFF;
                color: #00ffff;
        }
      }
    }
@@ -498,7 +514,7 @@
            }
            p{
              font-size: 14px;
              color: rgba(255,255,255,.8);
                        color: rgba(255, 255, 255, 0.8);
              margin-top: 10px;
              span{
                color: #fff;
@@ -510,7 +526,7 @@
            width: 100%;
            height: 80px;
            padding-left: 38px;
            border-left: 1px solid #36FCFC;
                    border-left: 1px solid #36fcfc;

            .indicator{
              width: 36px;
@@ -632,7 +648,7 @@
            }
            .top-line{
              width: 100%;
              border-top: 2px solid #36FCFC;
                        border-top: 2px solid #36fcfc;
            }
            .fadeLine{
              width: 100%;
@@ -640,7 +656,7 @@
            }
          }
          .fadeBorder{
            border-left: 1px solid rgba(54,252,252,.4);
                    border-left: 1px solid rgba(54, 252, 252, 0.4);
          }
          .more-info{
            width: 100%;
@@ -651,7 +667,7 @@
              padding: 0 50px 20px;
              position: relative;
              box-sizing: border-box;
              border-left: 1px solid #36FCFC;
                        border-left: 1px solid #36fcfc;

              &:last-of-type{
                border: none;
@@ -662,7 +678,7 @@
                height: 24px;
                border-radius: 50%;
                position: absolute;
                border: 1px solid rgba(0,225,255,.6);
                            border: 1px solid rgba(0, 225, 255, 0.6);
                top: -12px;
                left: 10px;

@@ -724,8 +740,8 @@
                padding: 10px 0;
                transform: translateY(-14px);
                border-radius: 8px;
                background-image: linear-gradient(to right,rgba(8,109,209,.4),rgba(11,255,255,.2));
                border: 1px solid rgba(54,252,252,.6);
                            background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
                            border: 1px solid rgba(54, 252, 252, 0.6);
                display: flex;
                flex-direction: column;
                justify-content: center;
@@ -744,7 +760,7 @@

                    &:first-of-type{
                      text-align: right;
                      color: rgba(255,255,255,.8);
                                        color: rgba(255, 255, 255, 0.8);
                    }
                  }
                }
@@ -758,8 +774,8 @@
                text-align: center;
                color: #fff;
                border-radius: 8px;
                background-image: linear-gradient(to right,rgba(11,255,255,.2),rgba(8,109,209,.4));
                border: 1px solid rgba(54,252,252,.6);
                            background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
                            border: 1px solid rgba(54, 252, 252, 0.6);
              }
            }
            .warning{
@@ -790,7 +806,7 @@
              }
            }
            .undone{
              border-left: 1px solid rgba(54,252,252,.4);
                        border-left: 1px solid rgba(54, 252, 252, 0.4);
              &>section{
                border: 1px solid #ccc;

@@ -874,7 +890,7 @@
            span{
              width: 1px;
              height: 50px;
              background: #36FCFC;
                    background: #36fcfc;
              position: absolute;
              top: -10px;
              left: 0;
@@ -909,15 +925,15 @@
          padding: 10px 20px;
          display: flex;
          align-items: center;
          border: 1px solid #36FCFC;
                border: 1px solid #36fcfc;

          .task-des-l{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 20px;
            color: #36FCFC;
            border-right: 1px solid #36FCFC;
                    color: #36fcfc;
                    border-right: 1px solid #36fcfc;
            padding-right: 20px;
            img{
              margin-bottom: 10px;
@@ -930,7 +946,7 @@
            align-items: center;
            font-size: 20px;
            line-height: 28px;
            color: #FCFC36;
                    color: #fcfc36;
            padding-left: 20px;
          }
        }
@@ -939,13 +955,13 @@
          height: 138px;
          padding: 20px 30px;
          box-sizing: border-box;
          background: url("../../../assets/loginPage/xj-bg.png") no-repeat center;
                background: url('../../../assets/loginPage/xj-bg.png') no-repeat center;
          background-size: 100% 100%;

          .data-area{
            display: flex;
            align-items: center;
            border-bottom: 1px solid #040C3B;
                    border-bottom: 1px solid #040c3b;
            font-weight: bold;
            padding-bottom: 10px;
            box-sizing: border-box;
@@ -959,10 +975,10 @@

            div{
              font-size: 15px;
              color: rgba(4,12,59,.8);
                        color: rgba(4, 12, 59, 0.8);

              span{
                color: #040C3B;
                            color: #040c3b;
              }
            }
          }
@@ -978,15 +994,15 @@
              align-items: center;
              width: 50%;
              font-size: 14px;
              color: rgba(4,12,59,.8);
                        color: rgba(4, 12, 59, 0.8);

              p{
                margin-top: 6px;
                color: #040C3B;
                            color: #040c3b;
              }

              &:first-of-type{
                border-right: 1px solid #040C3B;
                            border-right: 1px solid #040c3b;
              }
            }
          }