.env.development
@@ -28,5 +28,23 @@ #VITE_API_URL_OUT = 'http://121.239.169.27:16006/safeplatform-out' #线上正式环境外包接口地址 VITE_API_URL_SOCKET = 'http://192.168.0.29:8018' #VITE_API_URL = 'http://192.168.0.52:8011/safeplatform' #本地预发接口地址 #VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out' #本地外包预发接口地址 #VITE_API_URL_SOCKET = 'http://192.168.0.29:8018' #黄振websocket接口地址 #VITE_API_URL = 'http://192.168.0.52:7021/safeplatform' #本地测试接口地址 VITE_API_URL_SOCKET = 'http://192.168.0.52:7021/safeplatform' #本地测试websocket接口地址 #VITE_API_URL = 'http://192.168.0.29:7008' #黄振接口test地址 #VITE_API_URL_SOCKET = 'http://192.168.0.29:16107' #黄振websocket test接口地址 src/api/intelligentLine/index.ts
@@ -15,7 +15,7 @@ getUrl: () => { // debugger return request({ url: import.meta.env.VITE_API_URL_SOCKET + `/ws/namesrv/get/one`, url: import.meta.env.VITE_API_URL_SOCKET + `/ws/namesrv/get/one?srv=safeplatform-websocket`, method: 'get' }); } src/assets/avator.png
src/assets/newMenu/card-1.pngsrc/assets/newMenu/card-10.pngsrc/assets/newMenu/card-11.pngsrc/assets/newMenu/card-2.pngsrc/assets/newMenu/card-3.pngsrc/assets/newMenu/card-4.pngsrc/assets/newMenu/card-5.pngsrc/assets/newMenu/card-6.pngsrc/assets/newMenu/card-7.pngsrc/assets/newMenu/card-8.pngsrc/assets/newMenu/card-9.pngsrc/layout/navBars/breadcrumb/user.vue
@@ -57,7 +57,7 @@ </div> <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick"> <span class="layout-navbars-breadcrumb-user-link"> <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" /> <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/> {{ userInfos.userName }} <el-icon class="el-icon--right"> <ele-ArrowDown /> src/views/doublePrevent/dpIndex/index.vue
@@ -1,12 +1,13 @@ <template> <div class="home-container"> <el-scrollbar height="100%"> <div class="main-cont"> <div class="table-item"> <div class="item-head"> <span>告警风险事件概括</span> <div @click="toRiskEve">查看更多>></div> </div> <el-table :data="eventData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> <el-table :data="eventData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }"> <el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column> <el-table-column prop="riskUnitName" label="风险分析单元名称" show-overflow-tooltip></el-table-column> <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column> @@ -18,7 +19,7 @@ <span>隐患状态详情</span> <div @click="toRiskStatus">查看更多>></div> </div> <el-table :data="riskStatusData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> <el-table :data="riskStatusData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }"> <el-table-column type="index" label="序号" width="60" /> <!-- <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip width="170px"></el-table-column>--> <el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column> @@ -86,6 +87,7 @@ <div id="riskLevel"></div> </div> </div> </el-scrollbar> </div> </template> @@ -375,37 +377,106 @@ <style scoped lang="scss"> $homeNavLengh: 8; @media screen and (min-width: 1366px) { .item-head{ height: 25px; line-height: 25px; span{ font-size: 20px; } div{ font-size: 16px; } } .levelItem{ font-size: 16px; span{ margin-bottom: 10px; font-size: 24px; font-weight: bolder; } } } @media screen and (min-width: 1024px) and (max-width: 1366px){ .item-head{ height: 20px; line-height: 20px; span{ font-size: 16px; } div{ font-size: 14px; } } .levelItem{ font-size: 14px; span{ margin-bottom: 10px; font-size: 20px; font-weight: bolder; } } } @media screen and (max-width: 1024px) { .item-head{ height: 20px; line-height: 20px; span{ font-size: 13px; } div{ font-size: 12px; } } .levelItem{ font-size: 12px; span{ margin-bottom: 10px; font-size: 16px; font-weight: bolder; } } } .home-container { height: calc(100vh - 144px); /*height: 100%;*/ height: 100%; box-sizing: border-box; overflow: hidden; .main-cont { width: 100%; height: 100%; display: grid; margin-bottom: 40px; box-sizing: border-box; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; justify-content: center; .table-item{ height: calc(50vh - 82px); border-radius: 8px; background: #fff; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; .item-head{ display: flex; align-items: center; justify-content: space-between; height: 25px; margin-bottom: 20px; line-height: 25px; border-left: 4px solid #409eff; padding-left: 10px; span{ font-size: 20px; color: #333; font-weight: bolder; } @@ -418,52 +489,52 @@ } } #riskFix{ height: calc(50vh - 157px); height: 300px; } #riskLevel{ height: calc(50vh - 157px); height: 300px } .deviceTable{ height: calc((50vh - 167px) / 3 * 2); height: 200px; } .deviceLevel{ height: calc((50vh - 167px) / 3); display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); align-items: center; justify-content: space-between; .levelItem{ display: flex; margin-top: 20px; flex-direction: column; .deviceLevel{ width: 100%; height: 100px; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 15px; box-sizing: border-box; border-radius: 8px; color: #fff; font-size: 16px; justify-content: space-between; span{ margin-bottom: 10px; font-size: 24px; font-weight: bolder; .levelItem{ display: flex; height: 100%; flex-direction: column; justify-content: flex-start; align-items: center; padding: 15px; box-sizing: border-box; border-radius: 8px; color: #fff; span{ margin-bottom: 10px; font-weight: bolder; } } .red{ background: #F56C6C; } .orange{ background: #E6A23C; } .green{ background: #67C23A; } .blue{ background: #409EFF; } } .red{ background: #F56C6C; } .orange{ background: #E6A23C; } .green{ background: #67C23A; } .blue{ background: #409EFF; } } } .table-item2{ grid-column-start: 2; src/views/intellectInspect/intelligentLine/index.vue
@@ -142,7 +142,7 @@ const res = await lineApi().getUrl(); if (res.data.code === '200') { state.path = 'http://' + res.data.data.ip + ':' + res.data.data.port + '/ws/test/' if (typeof window.WebSocket === 'undefined') { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket'); } else { // 实例化socket @@ -152,7 +152,7 @@ console.log(url,'url',uid,'uid') url = url.replace('https', 'ws').replace('http', 'ws'); console.log(url, '获取地址'); state.socket = new window.WebSocket(url); state.socket = new WebSocket(url); // 监听socket连接 state.socket.onopen = () => { console.log('socket连接成功'); @@ -231,120 +231,605 @@ }; } }; // export default { // name: 'NewForm', // props: { // // }, // data(){ // return{ // present: '', // isScreenfull: false, // path: "http://192.168.0.29:8008/ws/test/", // socket: null, // socketData: '', // data: [] // } // }, // created() { // setInterval(() => { // this.present = new Date().toLocaleString() // }, 1000) // }, // mounted () { // // 初始化 // this.init() // // this.getLine() // }, // methods:{ // goBack(){ // window.history.go(-1) // }, // // async getLine (){ // let res = await lineApi().getLine({ id: '80647416891768832' }); // if (res.data.code === '200') { // console.log(res.data.data,'获取巡检点') // this.data = res.data.data // console.log(this.data,'---') // } else { // ElMessage({ // type: 'warning', // message: res.data.msg // }); // } // }, // // // 全屏点击时 // onScreenfullClick(){ // const t = this // if (!screenfull.isEnabled) { // ElMessage.warning('暂不不支持全屏'); // return false; // } // screenfull.toggle(); // screenfull.on('change', () => { // if (screenfull.isFullscreen) { // t.isScreenfull = true // } // else{ // t.isScreenfull = false // } // }); // }, // // // socket获取数据 // init: function () { // if(typeof(window.WebSocket) === "undefined"){ // alert("您的浏览器不支持socket") // }else{ // // 实例化socket // var url = this.path + '80938081556545536' // url = url.replace("https","ws").replace("http","ws"); // console.log(url,'获取地址') // this.socket = new window.WebSocket(url) // // 监听socket连接 // this.socket.onopen = this.open // // 监听socket错误信息 // this.socket.onerror = this.error // // 监听socket消息 // this.socket.onmessage = this.getMessage // } // }, // open: function () { // console.log("socket连接成功") // }, // error: function () { // console.log("连接错误") // }, // getMessage: function (msg) { // console.log(typeof msg.data,'type') // if(msg.data =='连接成功') return // this.socketData = msg.data // console.log(JSON.parse(this.socketData),'------------------',) // if(typeof JSON.parse(this.socketData) == Array){ // this.data = JSON.parse(this.socketData) // console.log(this.data) // } // // console.log(msg,'msg') // // console.log(this.data,'data-------') // }, // send: function () { // this.socket.send(params) // }, // close: function () { // console.log("socket已经关闭") // } // }, // destroyed () { // // 销毁监听 // this.socket.onclose = this.close // } // } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> @media screen and (min-width: 1366px) { .big-title { font-size: 28px; margin: 10px 0 20px; } .btns { position: absolute; z-index: 99999; right: 60px; top: 40px; div { font-size: 16px; color: #00ffff; } } .line-item { width: calc((100vw - 40px) / 6); padding-left: 20px; display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px; flex-wrap: nowrap; .picbox { width: 100%; height: 180px; padding: 10px; margin-bottom: 40px; box-sizing: border-box; img { display: block; width: 100%; height: 100px; margin-bottom: 8px; border-radius: 4px; } p { font-size: 14px; white-space: nowrap; color: rgba(255, 255, 255, 0.8); margin-top: 10px; span { color: #fff; } } } } .item { width: calc((100vw - 40px) / 6); height: calc((100vh - 130px) / 5); padding: 0 20px 20px 50px; position: relative; box-sizing: border-box; border-left: 1px solid #36fcfc; &:last-of-type { border: none; } section { width: 24px; height: 24px; border-radius: 50%; position: absolute; border: 1px solid rgba(0, 225, 255, 0.6); top: -12px; left: 10px; .dot { position: absolute; width: 12px; height: 12px; left: 5px; top: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 1px solid #0072ff; border-radius: 50%; background-color: #00e1ff; z-index: 2; } .pulse { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } .pulse1 { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn1 2s ease-out; -moz-animation: warn1 2s ease-out; animation: warn1 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } } & > div { padding: 10px 0; transform: translateY(-14px); border-radius: 8px; 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, 1); display: flex; flex-direction: column; justify-content: center; div { margin-bottom: 5px; &:last-of-type { margin-bottom: 0; } span { display: inline-block; white-space: nowrap; width: 50%; font-size: 13px; color: #fff; text-align: left; &:first-of-type { text-align: right; color: rgba(255, 255, 255, 0.8); } } } } .noBorder{ border: 1px solid rgba(54, 252, 252, 0.1); } .redBorder{ border: 1px solid #ff0000; } p { width: 140px; height: 50px; font-size: 18px; line-height: 48px; text-align: center; color: #fff; border-radius: 8px; 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); } } .finish-point { position: absolute; width: 90px; height: 90px; border: 2px solid #0072ff; left: -30px; top: -45px; border-radius: 50%; & > div { width: 80px; height: 80px; position: absolute; left: 3px; top: 3px; background: #0072ff; border-radius: 50%; color: #fff; font-size: 16px; line-height: 80px; text-align: center; font-weight: bolder; } } } @media screen and (min-width: 1200px) and (max-width: 1366px){ .big-title { font-size: 28px; margin: 10px 0 20px; } .btns { position: absolute; z-index: 99999; right: 40px; top: 40px; div { font-size: 14px; color: #00ffff; } } .line-item { width: calc((100vw - 40px) / 5); padding-left: 20px; display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px; flex-wrap: nowrap; .picbox { width: 100%; height: 180px; padding: 10px; margin-bottom: 40px; box-sizing: border-box; img { display: block; width: 100%; height: 100px; margin-bottom: 6px; border-radius: 4px; } p { font-size: 14px; white-space: nowrap; color: rgba(255, 255, 255, 0.8); margin-top: 10px; span { color: #fff; } } } } .item { width: calc((100vw - 40px) / 5); height: calc((100vh - 130px) / 5); padding: 0 20px 20px 40px; position: relative; box-sizing: border-box; border-left: 1px solid #36fcfc; &:last-of-type { border: none; } section { width: 24px; height: 24px; border-radius: 50%; position: absolute; border: 1px solid rgba(0, 225, 255, 0.6); top: -12px; left: 10px; .dot { position: absolute; width: 12px; height: 12px; left: 5px; top: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 1px solid #0072ff; border-radius: 50%; background-color: #00e1ff; z-index: 2; } .pulse { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } .pulse1 { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn1 2s ease-out; -moz-animation: warn1 2s ease-out; animation: warn1 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } } & > div { width: 90%; padding: 10px 0; transform: translateY(-14px); border-radius: 8px; 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, 1); display: flex; flex-direction: column; justify-content: center; div { width: 100%; margin-bottom: 5px; &:last-of-type { margin-bottom: 0; } span { display: inline-block; white-space: nowrap; width: 50%; font-size: 13px; color: #fff; text-align: left; &:first-of-type { text-align: right; color: rgba(255, 255, 255, 0.8); } } } } .noBorder{ border: 1px solid rgba(54, 252, 252, 0.1); } .redBorder{ border: 1px solid #ff0000; } p { width: 140px; height: 50px; font-size: 18px; line-height: 48px; text-align: center; color: #fff; border-radius: 8px; 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); } } .finish-point { position: absolute; width: 80px; height: 80px; border: 1px solid #0072ff; left: -20px; top: -40px; border-radius: 50%; & > div { width: 70px; height: 70px; position: absolute; left: 4px; top: 4px; background: #0072ff; border-radius: 50%; color: #fff; font-size: 14px; line-height: 70px; text-align: center; font-weight: bolder; } } } @media screen and (max-width: 1200px){ .big-title { font-size: 20px; margin: 5px 0 10px; } .btns { position: absolute; z-index: 99999; right: 20px; top: 40px; div { font-size: 12px; color: #00ffff; } } .line-item { width: 20vw; padding-left: 10px; display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px; flex-wrap: nowrap; .picbox { width: 100%; height: 160px; padding: 10px; margin-bottom: 30px; box-sizing: border-box; img { display: block; width: 100%; height: 80px; margin-bottom: 10px; border-radius: 4px; } p { font-size: 12px; color: rgba(255, 255, 255, 0.8); margin-top: 6px; span { color: #fff; } } } } .item { width: 20vw; height: calc((100vh - 130px) / 5); padding: 0 0 20px 30px; position: relative; box-sizing: border-box; border-left: 1px solid #36fcfc; &:last-of-type { border: none; } section { width: 24px; height: 24px; border-radius: 50%; position: absolute; border: 1px solid rgba(0, 225, 255, 0.6); top: -12px; left: 2px; .dot { position: absolute; width: 12px; height: 12px; left: 5px; top: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 1px solid #0072ff; border-radius: 50%; background-color: #00e1ff; z-index: 2; } .pulse { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } .pulse1 { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn1 2s ease-out; -moz-animation: warn1 2s ease-out; animation: warn1 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } } & > div { width: 80%; padding: 4px 0; transform: translateY(-14px); border-radius: 8px; 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, 1); display: flex; flex-direction: column; justify-content: center; div { width: 100%; margin-bottom: 2px; &:last-of-type { margin-bottom: 0; } span { width: 50%; display: inline-block; white-space: nowrap; font-size: 12px; color: #fff; text-align: left; &:first-of-type { text-align: right; color: rgba(255, 255, 255, 0.8); } } } } .noBorder{ border: 1px solid rgba(54, 252, 252, 0.1); } .redBorder{ border: 1px solid #ff0000; } p { width: 140px; height: 50px; font-size: 18px; line-height: 48px; text-align: center; color: #fff; border-radius: 8px; 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); } } .finish-point { position: absolute; width: 70px; height: 70px; border: 1px solid #0072ff; left: -10px; top: -35px; border-radius: 50%; & > div { width: 60px; height: 60px; position: absolute; left: 4px; top: 4px; background: #0072ff; border-radius: 50%; color: #fff; font-size: 12px; line-height: 60px; text-align: center; font-weight: bolder; } } } @keyframes warn { 0% { transform: scale(0.3); @@ -436,9 +921,7 @@ .big-title { height: 40px; line-height: 40px; font-size: 28px; font-weight: bold; margin: 10px 0 20px; text-align: center; color: #fff; display: flex; @@ -446,10 +929,6 @@ justify-content: center; } .btns { position: absolute; z-index: 99999; right: 60px; top: 40px; display: flex; align-items: center; .fullbtn { @@ -462,10 +941,6 @@ color: #00ffff; margin-right: 10px; } div { font-size: 16px; color: #00ffff; } } .backBtn { @@ -476,10 +951,6 @@ width: 14px; height: 14px; margin-right: 10px; } div { font-size: 16px; color: #00ffff; } } } @@ -506,37 +977,7 @@ align-items: flex-start; .line-item { width: calc((100vw - 180px) / 6); padding-left: 20px; display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px; flex-wrap: nowrap; .picbox { width: 100%; height: calc((100vh - 130px) / 5); padding: 10px; margin-bottom: 40px; box-sizing: border-box; img { display: block; width: 100%; height: 100px; margin-bottom: 10px; border-radius: 4px; } p { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 10px; span { color: #fff; } } } .area-head { position: relative; width: 100%; @@ -677,128 +1118,6 @@ .more-info { width: 100%; .item { width: calc((100vw - 120px) / 6); height: calc((100vh - 130px) / 5); padding: 0 50px 20px; position: relative; box-sizing: border-box; border-left: 1px solid #36fcfc; &:last-of-type { border: none; } section { width: 24px; height: 24px; border-radius: 50%; position: absolute; border: 1px solid rgba(0, 225, 255, 0.6); top: -12px; left: 10px; .dot { position: absolute; width: 12px; height: 12px; left: 5px; top: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 1px solid #0072ff; border-radius: 50%; background-color: #00e1ff; z-index: 2; } .pulse { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } .pulse1 { position: absolute; width: 48px; height: 48px; left: -13px; top: -13px; border: 1px solid #00e1ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn1 2s ease-out; -moz-animation: warn1 2s ease-out; animation: warn1 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #00e1ff; } } & > div { padding: 10px 0; transform: translateY(-14px); border-radius: 8px; 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, 1); display: flex; flex-direction: column; justify-content: center; div { margin-bottom: 5px; &:last-of-type { margin-bottom: none; } span { display: inline-block; width: 50%; font-size: 13px; color: #fff; text-align: left; &:first-of-type { text-align: right; color: rgba(255, 255, 255, 0.8); } } } } .noBorder{ border: 1px solid rgba(54, 252, 252, 0.1); } .redBorder{ border: 1px solid #ff0000; } p { width: 140px; height: 50px; font-size: 18px; line-height: 48px; text-align: center; color: #fff; border-radius: 8px; 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 { & > section { border: 1px solid #ff0000; @@ -850,30 +1169,6 @@ width: 100%; height: 80px; border-left: none; .finish-point { position: absolute; width: 90px; height: 90px; border: 2px solid #0072ff; left: -30px; top: -45px; border-radius: 50%; & > div { width: 80px; height: 80px; position: absolute; left: 3px; top: 3px; background: #0072ff; border-radius: 50%; color: #fff; font-size: 16px; line-height: 80px; text-align: center; font-weight: bolder; } } } } .pic-tit { src/views/newHome/index.vue
@@ -57,7 +57,7 @@ </div> </div> </div> <img class="bgImg1" src="../../assets/newMenu/card1.png" /> <img class="bgImg1" src="../../assets/newMenu/card-1.png" /> </div> <div class="grid-content cont-bg-1" v-throttle @click="render('2')"> <div class="toplayer"> @@ -67,7 +67,7 @@ <div class="enTit">Double prevention</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card4.png" /> <img class="bgImg" src="../../assets/newMenu/card-4.png" /> </div> <div class="grid-content cont-bg-1" v-throttle @click="render('4')"> <div class="toplayer"> @@ -77,7 +77,7 @@ <div class="enTit">Intelligent inspection system</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card8.png" /> <img class="bgImg" src="../../assets/newMenu/card-8.png" /> </div> <div class="grid-content cont-bg-1" v-throttle @click="render('3')"> <div class="toplayer"> @@ -87,7 +87,7 @@ <div class="enTit">special work</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card7.png" /> <img class="bgImg" src="../../assets/newMenu/card-7.png" /> </div> <div class="grid-content cont-bg-1" v-throttle @click="render('7')"> <div class="toplayer"> @@ -97,7 +97,7 @@ <div class="enTit">Target Responsibility Management</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card2.png" /> <img class="bgImg" src="../../assets/newMenu/card-2.png" /> </div> <div class="grid-content cont-bg-2" v-throttle @click="render('10')"> <div class="toplayer"> @@ -107,7 +107,7 @@ <div class="enTit">Security Knowledge Graph</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card3.png" /> <img class="bgImg" src="../../assets/newMenu/card-3.png" /> </div> <div class="grid-content cont-bg-2" v-throttle @click="render('9')"> <div class="toplayer"> @@ -117,7 +117,7 @@ <div class="enTit">Comprehensive equipment control</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card9.png" /> <img class="bgImg" src="../../assets/newMenu/card-9.png" /> </div> <div class="grid-content cont-bg-2" v-throttle @click="render('6')"> <div class="toplayer"> @@ -127,17 +127,17 @@ <div class="enTit">Emergency management</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card5.png" /> <img class="bgImg" src="../../assets/newMenu/card-5.png" /> </div> <div class="grid-content cont-bg-2" v-throttle @click="render('11')"> <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon9.png" /> <div> <div class="itemTit">危险化学品全生命周期安全<br />管理系统</div> <div class="itemTit">危险化学品全生命周期安全管理系统</div> <div class="enTit">Full life cycle of hazardous chemicals</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card10.png" /> <img class="bgImg" src="../../assets/newMenu/card-10.png" /> </div> <div class="grid-content cont-bg-2" v-throttle @click="render('8')"> <div class="toplayer"> @@ -147,7 +147,7 @@ <div class="enTit">Incident Management</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card6.png" /> <img class="bgImg" src="../../assets/newMenu/card-6.png" /> </div> <div class="grid-content cont-bg-2" @click="render('1')"> <div class="toplayer"> @@ -157,7 +157,7 @@ <div class="enTit">Basic data permissions</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card11.png" /> <img class="bgImg" src="../../assets/newMenu/card-11.png" /> </div> </div> </div> @@ -400,6 +400,312 @@ </script> <style scoped lang="scss"> @media screen and (min-width: 1400px) { .gridCont { width: 100%; height: 100%; display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; justify-content: center; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; padding: 0 20px; z-index: 99; .itemTit { font-size: 28px; line-height: 34px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; color: #072270; } .enTit{ font-size: 18px; line-height: 20px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } .iconImg { width: 88px; height: 88px; margin-right: 20px; } } .bgImg { position: absolute; width: 30%; height: auto; right: -10px; top: 15px; } } .grid-content-1{ grid-row-start: 1; grid-row-end: 3; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; z-index: 99; &>div{ display: flex; align-items: flex-start; } .itemTit1 { font-size: 34px; line-height: 42px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; letter-spacing: 1px; color: #072270; margin-bottom: 12px; } .enTit1{ font-size: 22px; line-height: 24px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } } .bgImg1 { position: absolute; width: 45%; height: auto; right: -20px; top: 30%; } } .bot-rights{ font-size: 18px; color: #333; } } @media screen and (min-width: 1200px) and (max-width: 1400px){ .gridCont { width: 100%; height: 100%; display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; justify-content: center; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; padding: 0 20px; z-index: 99; .itemTit { font-size: 26px; line-height: 30px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; color: #072270; margin-bottom: 2px; } .enTit{ font-size: 14px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } .iconImg { width: 44px; height: 44px; margin-right: 10px; } } .bgImg { position: absolute; width: 30%; height: auto; right: -10px; top: 15px; } } .grid-content-1{ grid-row-start: 1; grid-row-end: 3; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; z-index: 99; &>div{ display: flex; align-items: flex-start; } .itemTit1 { font-size: 28px; line-height: 36px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; letter-spacing: 1px; color: #072270; margin-bottom: 12px; } .enTit1{ font-size: 16px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } } .bgImg1 { position: absolute; width: 45%; height: auto; right: -20px; top: 30%; } } .bot-rights{ font-size: 15px; color: #333; } } @media screen and (max-width: 1200px){ .gridCont { width: 100%; height: 100%; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; justify-content: center; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; padding: 0 15px; z-index: 99; .itemTit { font-size: 18px; line-height: 22px; font-family: 'PingFang SC'; font-weight: 600; color: #072270; } .enTit{ font-size: 12px; line-height: 14px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } .iconImg { width: 32px; height: 32px; margin-right: 10px; } } .bgImg { position: absolute; width: 45%; height: auto; right: -10px; top: 15px; } } .grid-content-1{ grid-row-start: 1; grid-row-end: 3; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; z-index: 99; &>div{ display: flex; align-items: flex-start; } .itemTit1 { font-size: 24px; line-height: 36px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; letter-spacing: 1px; color: #072270; margin-bottom: 12px; } .enTit1{ font-size: 14px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } } .bgImg1 { position: absolute; width: 45%; height: auto; right: -20px; top: 30%; } } .bot-rights{ font-size: 12px; color: #333; } } .login-container { width: 100%; height: 100%; @@ -499,7 +805,7 @@ height: 100%; z-index: 99; background: url('../../assets/newMenu/leftbg.png') no-repeat center; background-size: 100% auto; background-size: 100% 100%; } .topCont{ position: absolute; @@ -579,13 +885,6 @@ top: 260px; left: 240px; .gridCont { width: 100%; height: 100%; display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; justify-content: center; .grid-content { border-radius: 16px; @@ -594,71 +893,10 @@ cursor: pointer; transition: 0.3s; border: none; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; padding: 0 20px; z-index: 99; } &:hover { background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%); box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa; } .itemTit { font-size: 29px; line-height: 36px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; color: #072270; margin-bottom: 2px; } .enTit{ font-size: 18px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } .enTit1{ font-size: 22px; color: #072270; font-family: 'PingFang SC'; font-weight: 600; } .itemTit1 { font-size: 36px; line-height: 48px; height: 40%; font-family: 'PingFang SC'; font-weight: 600; letter-spacing: 1px; color: #072270; margin-bottom: 18px; } .iconImg { width: 88px; height: 88px; margin-right: 20px; } .bgImg1 { position: absolute; width: 45%; height: auto; right: -20px; top: 30%; } .bgImg { position: absolute; width: 30%; height: auto; right: -10px; top: 15px; } } .cont-bg-1{ @@ -667,26 +905,7 @@ .cont-bg-2{ background: #CDD6FF; } .grid-content-1{ grid-row-start: 1; grid-row-end: 3; .toplayer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; z-index: 99; &>div{ display: flex; align-items: flex-start; } } } /*.grid-content-2{*/ /* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/ @@ -713,8 +932,6 @@ height: 8px; } div{ font-size: 18px; color: #333; margin: 0 20px; } } src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
@@ -219,9 +219,7 @@ </div> </el-form> <div class="applyBtn"> <el-col :span="24" class="submitBtn"> <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button> </el-col> <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button> </div> <el-dialog v-model="dialogAddWorker" title="添加作业人"> <el-form :model="addWorkerForm" label-width="120px" :rules="addWorkerRules" ref='ruleFormRef3'> @@ -624,26 +622,20 @@ .homeCard{ width: 100%; padding: 20px; box-sizing: border-box; background: #fff; border-radius: 4px; margin-bottom: 20px; &:last-of-type{ margin-bottom: 100px; } } .applyBtn{ position: absolute; width: 100%; padding: 20px; background: #fff; bottom: 0; left: 0; height: 80px; z-index: 999; margin-bottom: 0; border-radius: 0; z-index: 5; box-shadow: 0 -3px 8px rgba(150,150,150,.1); display: flex; align-items: center; justify-content: center; } .el-row{ margin-bottom: 20px; @@ -662,10 +654,6 @@ } .el-cascader{ width: 100% !important; } .submitBtn{ display: flex; justify-content: center; } } </style>