tj

package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "axios": "^1.3.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/App.vue

@@ -1,6 +1,15 @@
 <script setup>
 import Header from '@/components/Header/index.vue'
 import Layout from '@/components/Layouts/index.vue'
+import Dialog from '@/components/Dialog'
+import {onMounted} from 'vue'
+
+onMounted(() => {
+  Dialog({
+    title:"标题",
+    message:'内容'
+  })
+})
 </script>
 
 <template>

src/components/Dialog/index.js

@@ -0,0 +1,37 @@
+import { createApp } from 'vue'
+import Dialog from './index.vue'
+
+const createDialog = (message, option = {}) => {
+    const mountNode = document.createElement('div')
+    const dialogEl=document.querySelector('.custom-dialog')
+    if(dialogEl){
+        dialogEl.parentNode.removeChild(dialogEl)
+    }
+    if(typeof(message)==='object'){
+        option=message
+    }
+    const Instance = createApp(Dialog, {
+        show: true,
+        message,
+        ...option,
+        close: () => { 
+            if( option.close&&typeof(option.close)==='function'){
+                option.close()
+            }
+            if(option.duration>0){
+                setTimeout(()=>{
+                    Instance.unmount(mountNode); 
+                    document.body.removeChild(mountNode);                
+                },option.duration)
+            }else{
+                Instance.unmount(mountNode); 
+                document.body.removeChild(mountNode);
+            }
+        }
+    })
+
+    document.body.appendChild(mountNode)
+    Instance.mount(mountNode)
+}
+
+export default createDialog

src/components/Dialog/index.vue

@@ -0,0 +1,116 @@
+<script setup name="Dialog">
+defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    title: {
+        type: String,
+        default: '标题名称'
+    },
+    message: {
+        default: '这是一段内容'
+    },
+    close: {
+        type: Function,
+        default: fun => fun()
+    }
+})
+</script>
+<template>
+    <div v-if="show" class="dialog-mask custom-dialog">
+        <div class="dialog-box">
+            <div class="dialog-header">
+                <p class="el-message-box__title">{{title}}</p>
+            </div>
+            <p class="dialog-content">{{message}}</p>
+            <div class="dialog-footer">
+                <button class="el-button primary small" @click="close">確認</button>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.dialog-mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .dialog-box {
+    display: inline-block;
+    min-width: 420px;
+    padding-bottom: 10px;
+    vertical-align: middle;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+    font-size: 18px;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    text-align: left;
+    overflow: hidden;
+    backface-visibility: hidden;
+        .dialog-header {
+            position: relative;
+            padding: 15px 15px 10px;
+            .el-message-box__title{
+                padding-left: 0;
+                margin-bottom: 0;
+                font-size: 18px;
+                line-height: 1;
+                color: #303133;
+            }            
+        }
+        .dialog-content {
+            padding: 10px 15px;
+            color: #606266;
+            font-size: 14px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }   
+        .dialog-footer {
+            padding: 5px 15px 0;
+            text-align: right
+        }             
+    }
+}
+.el-button{
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    appearance:none;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    user-select:none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 4px;
+    &.primary{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+    }
+    &.small{
+        padding: 9px 15px;
+        font-size: 12px;
+        border-radius: 3px;
+    }
+}
+</style>

src/components/Header/index.vue

@@ -1,11 +1,9 @@
 <template>
-    <div id="header">
-    <!-- 切图中包含文字 并且提供的字体跟图片的不是100%契合所以使用图片，如果文字需要改动请自行ps处理掉文字即可 -->
-        <!-- <p class="head-font">冀东海德堡(泾阳)水泥有限公司厂区风险分布四色图</p> -->
-    </div>
+    <div id="header" />
 </template>
 <script>
     export default {
+        name:"Header",
         data(){
             return{
 

src/components/Layouts/index.vue

@@ -13,22 +13,42 @@
             </div>    
             <div class="map-card rt">
                 <div class="title">作业项目</div>
-                <div class="item">重大风险</div>
-                <div class="item level-1">较大风险</div>
-                <div class="item level-2">一般风险</div>
-                <div class="item level-3">
-                    <span>低风险</span>
-                    <span class="number">3</span>
+                <div class="item" v-for="(item,index) in items" :key="'project-work'+index" :class="item.color?'custom':'project-'+index">
+                    <span>
+                        <span class="icon" v-if="item.color" :style="{backgroundColor: item.color}" />
+                        <span>{{item.name}}</span>                    
+                    </span>
+                    <span class="number" v-if="item.number">{{item.number}}</span>
                 </div>
             </div>              
         </div>
     </div>
 </template>
-<script >
+<script>
 export default {
-    setup(props) {
-        
-    }
+    name:'Layouts',
+    setup() {
+        return{
+            items:[
+                {color:'#F53F3F',name:"动火作业"},
+                {color:'#F49062',name:"受限空间作业"},
+                {color:'#CC5120',name:"高处作业"},
+                {color:'#165DFF',name:"起重作业"},
+                {color:'#FADC19',name:"预热器清堵作业",number:"3"},
+                {color:'#9FDB1D',name:"篦冷机清大块作业",number:"5"},
+                {color:'#00B42A',name:"交叉作业"},
+                {color:'#14C9C9',name:"临时用电作业",number:"1"},
+                {color:'#3491FA',name:"动土作业",number:"1"},
+                {color:'#722ED1',name:"断路作业",number:"2"},
+                {color:'#E744E7',name:"防护设备拆除"},
+                {color:'#F5319D',name:"高温及其他危险作业"},
+                {color:'#86909C',name:"盲板抽堵作业"}
+            ]
+        }
+    },
+    mounted() {
+            
+    },
 }
 </script>
 <style lang="scss" scoped>
@@ -42,7 +62,7 @@ export default {
     .layout-cont{
         width: 100%;
         height: 100%;
-        border: 1px solid rgb(0, 255, 213);  
+        // border: 1px solid rgb(0, 255, 213);  
         box-sizing: border-box; 
         .map{
         // 2420.41*1868.11
@@ -50,7 +70,7 @@ export default {
             width: 63.03vw;
             height: 86.49vh;
             margin: 0 auto;
-            border: 1px solid red;
+            // border: 1px solid red;
             img{
                 width: 100%;
                 height: 100%;
@@ -106,8 +126,22 @@ export default {
                     background-color: red;
                     position: absolute;
                     left: 0;
-                    top: 0.35vh;
+                    top: 0.12vh;
+                    border: 2px solid #000;
                 } 
+                &.custom::before{
+                    display: none;
+                }
+                &.custom .icon{
+                    display: block;
+                    width: 1vw;
+                    height: 0.6vw;
+                    background-color: red;
+                    position: absolute;
+                    left: 0;
+                    top: 0.12vh;
+                    border: 2px solid #000;                    
+                }
                 &.level-1::before{
                     background-color: #FF6100;
                 }   
@@ -116,7 +150,47 @@ export default {
                 } 
                 &.level-3::before{
                     background-color: #0000FF;
-                }             
+                }  
+                // 作业项目 
+                &.project-1::before{
+                    background-color: #F53F3F;
+                }    
+                &.project-2::before{
+                    background-color: #F49062;
+                } 
+                &.project-3::before{
+                    background-color: #CC5120;
+                } 
+                &.project-4::before{
+                    background-color: #165DFF;
+                } 
+                &.project-5::before{
+                    background-color: #FADC19;
+                } 
+                &.project-6::before{
+                    background-color: #9FDB1D;
+                } 
+                &.project-7::before{
+                    background-color: #00B42A;
+                } 
+                &.project-8::before{
+                    background-color: #14C9C9;
+                }      
+                &.project-9::before{
+                    background-color: #3491FA;
+                } 
+                &.project-10::before{
+                    background-color: #722ED1;
+                } 
+                &.project-11::before{
+                    background-color: #E744E7;
+                } 
+                &.project-12::before{
+                    background-color: #F5319D;
+                } 
+                &.project-13::before{
+                    background-color: #86909C;
+                }                   
             }
         }
     }

src/config/index.js

@@ -0,0 +1,4 @@
+export default {
+    dev:"",
+    pro:""
+}

src/style.css

@@ -63,7 +63,9 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
+p{
+  margin: 0;
+}
 #app {
   position: absolute;
   left: 0;

src/utils/index.js

@@ -0,0 +1,3 @@
+export function getToken(){
+    return localStorage.getItem(token)
+}

src/utils/request.js

@@ -0,0 +1,60 @@
+import axios from 'axios'
+import Dialog from '@/components/Dialog'
+import store from '@/store'
+import { getToken } from '@/utils'
+import {dev, pro } from '@/config'
+const baseURL = process.env.NODE_ENV === 'development' ? dev : pro
+// create an axios instance
+const service = axios.create({
+  baseURL: baseURL, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 1000 * 60 * 3 // request timeout
+})
+
+// let loadingInstance = null
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    if (store.getters.token) {
+      config.headers['Authorization'] = 'Bearer ' + getToken()
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    if (res.code !== 0) {
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (res.code === 401) {
+        // to re-login
+        Dialog({
+            message:'登录失效，请重新登录！'
+        })
+      } else {
+        Dialog({
+          message: res.msg || 'Error'
+        })
+      }
+      return Promise.reject(new Error(res.message || 'Error'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    Dialog({
+      message: error.message || 'Error'
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

yarn.lock

@@ -220,6 +220,20 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.4.tgz#f5760cefd9cfb51fd2481acf88c05f67c4523024"
+  integrity sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -247,11 +261,23 @@ braces@~3.0.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 csstype@^2.6.8:
   version "2.6.21"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 esbuild@^0.17.5:
   version "0.17.12"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.12.tgz#2ad7523bf1bc01881e9d904bc04e693bd3bdcf2f"
@@ -292,6 +318,20 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -359,6 +399,18 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -393,6 +445,11 @@ postcss@^8.1.10, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"