排程看板
parent: d02345aa | 补丁 | 提交 | ignore whitespace
yangfeng
2023-03-17 382f2ff0a9f9997e9316428dda5cacc43c2dd24b 
看板
18个文件已添加
10596 ■■■■■ 已修改文件
.gitignore 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
babel.config.js 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
jsconfig.json 19 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package-lock.json 9873 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 32 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/favicon.ico 补丁 | 查看 | 原始文档 | blame | 历史
public/index.html 17 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/语音.png 补丁 | 查看 | 原始文档 | blame | 历史
src/App.vue 15 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/logo.png 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Card.vue 21 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Knowledge.vue 39 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 20 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js 29 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/store/index.js 17 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/AboutView.vue 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/visualization.vue 477 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
vue.config.js 4 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 .gitignore


New file


@@ -0,0 +1,23 @@


.DS_Store


node_modules


/dist






# local env files


.env.local


.env.*.local




# Log files


npm-debug.log*


yarn-debug.log*


yarn-error.log*


pnpm-debug.log*




# Editor directories and files


.idea


.vscode


*.suo


*.ntvs*


*.njsproj


*.sln


*.sw?




 babel.config.js


New file


@@ -0,0 +1,5 @@


module.exports = {


  presets: [


    '@vue/cli-plugin-babel/preset'


  ]


}




 jsconfig.json


New file


@@ -0,0 +1,19 @@


{


  "compilerOptions": {


    "target": "es5",


    "module": "esnext",


    "baseUrl": "./",


    "moduleResolution": "node",


    "paths": {


      "@/*": [


        "src/*"


      ]


    },


    "lib": [


      "esnext",


      "dom",


      "dom.iterable",


      "scripthost"


    ]


  }


}




 package-lock.json


New file


Diff too large




 package.json


New file


@@ -0,0 +1,32 @@


{


  "name": "spectaculars",


  "version": "0.1.0",


  "private": true,


  "scripts": {


    "serve": "vue-cli-service serve",


    "build": "vue-cli-service build"


  },


  "dependencies": {


    "chart": "^0.1.2",


    "chart.js": "^4.2.1",


    "core-js": "^3.8.3",


    "element-ui": "^2.15.13",


    "vue": "^2.6.14",


    "vue-router": "^3.5.1",


    "vuex": "^3.6.2"


  },


  "devDependencies": {


    "@vue/cli-plugin-babel": "~5.0.0",


    "@vue/cli-plugin-router": "~5.0.0",


    "@vue/cli-plugin-vuex": "~5.0.0",


    "@vue/cli-service": "~5.0.0",


    "sass": "^1.32.7",


    "sass-loader": "^12.0.0",


    "vue-template-compiler": "^2.6.14"


  },


  "browserslist": [


    "> 1%",


    "last 2 versions",


    "not dead"


  ]


}




 public/favicon.ico




 public/index.html


New file


@@ -0,0 +1,17 @@


<!DOCTYPE html>


<html lang="">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <link rel="icon" href="<%= BASE_URL %>favicon.ico">


    <title><%= htmlWebpackPlugin.options.title %></title>


  </head>


  <body>


    <noscript>


      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>


    </noscript>


    <div id="app"></div>


    <!-- built files will be auto injected -->


  </body>


</html>




 public/ÓïÒô.png




 src/App.vue


New file


@@ -0,0 +1,15 @@


<template>


  <div id="app">


    <nav></nav>


    <router-view />


  </div>


</template>




<style lang="scss">


#app,


html,


body {


  width: 100%;


  height: 100%;


}


</style>




 src/assets/logo.png




 src/components/Card.vue


New file


@@ -0,0 +1,21 @@


/


<template>


  <div class="card">


    <div class="card_content">


      <div class="card_contentLeft">包号:G22122304 100吨</div>


      <div class="card_contentRight">生产时间:12月28日 08:24</div>


    </div>


    <div class="card_top" style="background: #0a2164">


      <div>


        è®¾å¤‡12 <span class="el-icon-arrow-right" style="color: #4efefa"></span> è®¾å¤‡13


        <p>运输中</p>


      </div>


    </div>


  </div>


</template>




<script>


export default {}


</script>




<style></style>




 src/components/Knowledge.vue


New file


@@ -0,0 +1,39 @@


<template>


  <div class="keyword-ring">


    <svg width="400" height="400">


      <circle cx="200" cy="200" r="155" fill="none" stroke-width="3" />


      <circle cx="200" cy="200" r="125" fill="none" stroke-width="3" />


      <circle cx="200" cy="200" r="95" fill="none" stroke-width="3" />


      <circle cx="200" cy="200" r="65" fill="none" stroke-width="3" />


      <text x="200" y="40" style="fill: #000; font-weight: bold; font-size: 20px; cursor: pointer" text-anchor="middle">


        è¯¯æŠ¥è­¦


      </text>


      <text x="290" y="145" text-anchor="middle" font-size="20px">管路整动</text>


      <text x="195" y="280" text-anchor="middle" font-size="20px">清洁度超差</text>


      <text


        x="100"


        y="180"


        style="fill: #000; font-weight: bold; font-size: 20px; cursor: pointer"


        text-anchor="middle"


      >


        è¯¯æŠ¥è­¦


      </text>


      <text x="100" y="75" text-anchor="middle" font-size="20px">管路整动</text>


      <text x="295" y="80" text-anchor="middle" font-size="20px">清洁度超差</text>


      <image xlink:href="../../public/语音.png" x="105" y="100" width="150" height="150" />


    </svg>


  </div>


</template>


<script>


const data = {


  // æ‚¨çš„关键词数据


}




const MyComponent = {


  data() {


    return {


      myImage: "../../public/语音.png"


    }


  }


}


</script>




 src/main.js


New file


@@ -0,0 +1,20 @@


import Vue from "vue"


import App from "./App.vue"


import router from "./router"


import store from "./store"


import ElementUI from "element-ui"


import "element-ui/lib/theme-chalk/index.css"




Vue.config.productionTip = false




// import Element from "element-ui"


// Vue.use(Element, { size: "small", zIndex: 3000 })




Vue.use(ElementUI)




new Vue({


  router,


  store,


  el: "#app",


  render: (h) => h(App)


}).$mount("#app")




 src/router/index.js


New file


@@ -0,0 +1,29 @@


import Vue from "vue"


import VueRouter from "vue-router"


import HomeView from "../views/visualization.vue"




Vue.use(VueRouter)




const routes = [


  {


    path: "/",


    name: "home",


    component: HomeView


  },


  {


    path: "/about",


    name: "about",


    // route level code-splitting


    // this generates a separate chunk (about.[hash].js) for this route


    // which is lazy-loaded when the route is visited.


    component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue")


  }


]




const router = new VueRouter({


  mode: "history",


  base: process.env.BASE_URL,


  routes


})




export default router




 src/store/index.js


New file


@@ -0,0 +1,17 @@


import Vue from 'vue'


import Vuex from 'vuex'




Vue.use(Vuex)




export default new Vuex.Store({


  state: {


  },


  getters: {


  },


  mutations: {


  },


  actions: {


  },


  modules: {


  }


})




 src/views/AboutView.vue


New file


@@ -0,0 +1,5 @@


<template>


  <div class="about">


    <h1>This is an about page</h1>


  </div>


</template>




 src/views/visualization.vue


New file


@@ -0,0 +1,477 @@


/


<template>


  <div class="home">


    <div class="left">


      <div class="left_top">


        <p class="title">设A423生产管理看板</p>


        <div class="statelist">


          <span


            >状态:<span style="position: relative"


              >正常


              <span


                style="


                  width: 12px;


                  height: 12px;


                  background: #15d815;


                  display: block;


                  border-radius: 50%;


                  position: absolute;


                  right: -18px;


                  top: 4px;


                "


              ></span


            ></span>


          </span>


          <span>当前工序: <span class="status">前纺(QF)</span> </span>




          <span>工作人数: <span class="status">6人</span> </span>


        </div>


        <div class="content">


          <div class="content_left">


            <div class="small_title">订单编号Q-22038</div>


            <div class="content_leftBttom">


              <dl>


                <dd style="font-size: 32px; color: #4cfdf5">100m</dd>


                <dd style="font-size: 14px">生产中</dd>


              </dl>


              <dl>


                <dd style="font-size: 32px">400m</dd>


                <dd style="font-size: 14px">当前完成</dd>


              </dl>


            </div>


          </div>


          <div class="content_right">


            <el-descriptions :column="2" :colon="true">


              <el-descriptions-item label="产品名称">kooriookami</el-descriptions-item>


              <el-descriptions-item label="数量:">18100000000</el-descriptions-item>


              <el-descriptions-item label="交货日期:">苏州市</el-descriptions-item>


              <el-descriptions-item label="工时:"> å­¦æ ¡ </el-descriptions-item>


              <el-descriptions-item label="起止时间">江苏省苏州市吴中区吴中大道 1188 å·</el-descriptions-item>


            </el-descriptions>


            <el-progress


              define-back-color="#131D26"


              color="#4EFEFA"


              :text-inside="true"


              :stroke-width="22"


              :percentage="progress"


              :text-format="format"


              >完成率50%</el-progress


            >




            <el-progress


              define-back-color="#131D26"


              color="#4EFEFA"


              :text-inside="true"


              :stroke-width="22"


              :percentage="passrate"


            ></el-progress>


          </div>


        </div>


        <div class="bottom">


          <div class="bottom_list">


            <div class="small_title">输入资源</div>


            <Card />


            <Card />


            <Card />


            <span class="call">呼叫物料</span>


          </div>


          <div class="bottom_list">


            <div class="small_title">当前工序:前纺(QF)</div>


            <!-- format:format(percentage) -->


            <div style="display: flex; margin: auto; width: 160px; margin-top: 12px">


              <el-progress


                :stroke-width="12"


                text-color="#4EFEFA"


                color="#4C6CEC"


                define-back-color="#4EFEFA"


                type="circle"


                :percentage="production"


                :width="160"


                style="font-size: 20px"


              ></el-progress>


            </div>




            <Card />


            <p style="font-size: 22px; margin-left: 12px; margin-top: 50px">编号:K23455</p>


            <div class="qfcall">


              <span


                style="


                  width: 63%;


                  height: 100%;


                  background: #4efefa;


                  display: inline-block;


                  border-radius: 5px;


                  color: #000;


                "


                >打印</span


              >


              <span


                style="


                  width: 33%;


                  height: 100%;


                  background: #ff0000;


                  display: inline-block;


                  border-radius: 5px;


                  margin-left: 2%;


                "


                >结束</span


              >


            </div>


          </div>


          <div class="bottom_list">


            <div class="small_title">输出资源</div>


            <Card />


            <Card />


            <Card />


            <span class="call">呼叫运输</span>


          </div>


        </div>


      </div>


    </div>


    <div class="right">


      <div class="right_top">


        <div class="time">


          <dl>


            <dd><span style="font-size: 36px">17:50</span></dd>


            <dd><span>2023/02/16</span></dd>


          </dl>


          <span style="right: 50px" class="font el-icon-date"></span>


          <span class="font el-icon-setting"></span>


          <!-- <span>17:50</span> -->


        </div>


      </div>


      <div class="right_dutyLst">


        <p class="small_title">当前值班</p>


        <dl>


          <dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>


          <dd>张三</dd>


          <dd>1867654329</dd>


        </dl>


        <dl>


          <dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>


          <dd>张三</dd>


          <dd>1867654329</dd>


        </dl>


        <dl>


          <dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>


          <dd>张三</dd>


          <dd>1867654329</dd>


        </dl>


        <dl>


          <dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>


          <dd>张三</dd>


          <dd>1867654329</dd>


        </dl>


      </div>


      <div class="right_base">


        çŸ¥è¯†åº“


        <Knowledge />


        <span class="call">红灯呼叫</span>


      </div>


    </div>


  </div>


</template>




<script>


import Card from "@/components/Card.vue"


import Knowledge from "../components/Knowledge.vue"


export default {


  components: {


    Card,


    Knowledge


  },


  data() {


    return {


      progress: 70, //进度


      passrate: 30, //合格率


      production: 25 //生产中


    }


  },


  created() {


    setInterval(() => {


      this.progress = this.getRandomNumber(1, 100)


      this.passrate = this.getRandomNumber(1, 100)


      this.production = this.getRandomNumber(1, 100)


    }, 3000)


  },




  methods: {


    getRandomNumber(min, max) {


      return Math.floor(Math.random() * (max - min + 1) + min)


    },


    format(percentage) {


      return `合格率：${percentage}%`


    }


  }


}


</script>




<style lang="scss">


.bottom_list {


  position: relative;


  .call {


    background: #4efefa;


    display: inline-block;


    width: 94%;


    height: 10%;


    text-align: center;


    line-height: 45px;


    position: absolute;


    bottom: 20px;


    left: 0px;


    border-radius: 5px;


    margin-left: 3%;


    color: #000;


    font-size: 16px;


  }


  .qfcall {


    display: inline-block;


    width: 94%;


    height: 10%;


    text-align: center;


    line-height: 45px;


    position: absolute;


    bottom: 20px;


    left: 0px;


    border-radius: 5px;


    margin-left: 3%;


    // color: #000;


    font-size: 16px;


  }


}




.small_title {


  font-size: 20px;


  font-weight: 600;


  margin-left: 14px;


  margin-top: 14px;


}


.home {


  width: 100%;


  height: 100%;


  color: #fff;




  .left {


    width: calc(78% - 60px);


    height: calc(100% - 60px);


    background: #0a2164;


    float: left;


    padding: 30px;


    padding-top: 20px;


    .title {


      font-size: 30px;


      font-weight: 600;




      text-align: center;


    }


    .status {


      color: #4efefa;


    }




    .statelist {


      width: 50%;


      margin: 0 auto;


      height: 20px;


      display: flex;


      flex-wrap: nowrap;


      align-content: center;


      justify-content: space-around;


      align-items: center;


      span {


        // background: blue;


        width: 30%;


        height: 100%;


        font-size: 16px;


        font-weight: 600;


        text-align: center;


        line-height: 50px;


      }


    }


    .content {


      width: 100%;


      height: 200px;


      margin: 60px 0px;


      .content_left {


        width: 20%;


        height: 100%;


        float: left;


        padding: 2%;


        background: #233b9e;


        .content_leftBttom {


          width: 100%;


          height: 70%;


        }


        dl {


          float: left;


          width: 50%;


          height: 100%;


          margin-top: calc(50% - 70px);


        }


        dd {


          width: 100%;


          height: 30px;


          // text-align: left;


          font-size: 24px;


          margin: 0;


          text-align: center;


          line-height: 36px;


        }


      }


      .content_right {


        width: 70%;


        height: 100%;


        float: right;


        padding: 2%;


        margin-left: 2%;


        background: #233b9e;


        .el-descriptions__table {


          width: 100%;


          margin: 10px 0px;


          background: #233b9e;


          color: #fff;


          .el-descriptions--small {


            width: 100%;


            // margin: 50px 50px;


          }


        }


        .el-progress {


          margin: 10px 0px;


          width: 80%;


        }


      }


    }




    .bottom {


      width: 100%;


      height: 500px;


      display: flex;


      flex-wrap: nowrap;


      align-content: center;


      justify-content: space-between;


      align-items: center;


      margin-top: 6%;


      // position: relative;




      > div {


        // background: #333333;


        width: 30%;


        height: 100%;


        background: #233b9e;




        .card {


          width: 90%;


          height: 70px;


          // border: 1px solid #ccc;


          border-radius: 5px;


          margin-left: 1%;


          margin-top: 20px;


          padding: 2%;


          .card_top {


            width: 100%;


            height: 30%;


            border-radius: 5px;


            padding: 2%;


            color: #fff;


            font-size: 12px;


            line-height: 24px;


            > div {


              margin-left: 12px;


              position: relative;


              p {


                position: absolute;


                top: -14px;


                right: 15px;


                font-size: 14px;


              }


            }


          }


          .card_content {


            padding: 2%;


            width: 100%;


            border-radius: 5px;


            height: 70%;


            background: #4765c0;


            .card_contentLeft {


              width: 100%;


              height: 58%;


              font-size: 18px;


            }


            .card_contentRight {


              width: 100%;


              height: 38%;


              font-size: 12px;


            }


          }


        }


      }


    }


  }


  .right {


    width: calc(20% - 10px);


    height: calc(100% - 48px);


    background: #233b9e;


    float: left;


    padding: 1%;


    .right_top {


      width: 100%;


      height: 15%;


      // background: pink;


      .time {


        width: 100%;


        height: 50%;




        position: relative;


        dl {


          height: 80%;


          // padding-top: 10%;


        }


        .font {


          font-size: 36px;


          position: absolute;


          top: 20px;


          right: 0px;


        }


      }


    }


    .right_dutyLst {


      width: 100%;


      height: 35%;


      overflow: hidden;


      dl {


        width: 100%;


        height: 22%;


        border-radius: 10px;


        background: #0a2164;


        dt {


          float: left;


          padding: 16px;


        }


        dd {


          // background: pink;


          padding-top: 10px;


        }


      }


    }


    .right_base {


      width: 100%;


      height: 45%;


      position: relative;


      .call {


        background: #ff0000;


        display: inline-block;


        width: 94%;


        height: 12%;


        text-align: center;


        line-height: 45px;


        position: absolute;


        bottom: 5px;


        left: 0px;


        border-radius: 5px;


        margin-left: 3%;




        font-size: 16px;


      }


    }


  }


}


</style>




 vue.config.js


New file


@@ -0,0 +1,4 @@


const { defineConfig } = require('@vue/cli-service')


module.exports = defineConfig({


  transpileDependencies: true


})