面板

haoxuan

2023-08-17 126f31c98cc341e052edf8b3dd9b59e17696609e

面板

 public/1.ico

 public/favicon.ico

 src/components/Card.vue

@@ -1,16 +1,20 @@
/

<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 class="card_top">
      <div>
        设备12 <span class="el-icon-arrow-right" style="color: #4efefa"></span> 设备13
        <p>运输中</p>
        设备12<i style="font-size:14px;" class="el-icon-arrow-right font-arrow-20"></i> 设备13
       
      </div>
    </div>
    <div class="card_top-2">
      <span class="card-top-r-t">生产完成</span>
      <span class="card-top-r-b">12月28日 08:24</span>
    </div>
  </div>
</template>


 src/components/Knowledge.vue

@@ -5,21 +5,56 @@
      <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 class="text-item" x="70" y="100"  style="fill: #000; font-weight: bold; padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff; cursor: pointer;postion:absolute;left:200;top:40">
        误报警
      </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 class="text-item" x="70" y="160" text-anchor="middle" 
      style="padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff;">管路整动</text>
      <text class="text-item" x="195" y="280" text-anchor="middle" font-size="20px"
      style="padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff;">冷却油度高</text>
      <text
        x="100"
        y="180"
        style="fill: #000; font-weight: bold; font-size: 20px; cursor: pointer"
        x="60"
        y="220"
        class="text-item"
        style="padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff;"
        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>
      <text x="280" class="text-item" y="120" text-anchor="middle" font-size="20px"
      style="padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff;">清洁度超差</text>
        <text x="260" class="text-item" y="80" text-anchor="middle" font-size="20px"
      style="padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff;">保护器报警</text>
      <image xlink:href="../../public/语音.png" x="105" y="100" width="150" height="150" />
    </svg>
  </div>
@@ -37,3 +72,15 @@
  }
}
</script>
<style>
.text-item{
  width:auto;
        padding:5px;
        font-size:14px;
        display:inline-block;
        border-radius:8px;
        background:#007101;
        color:#fff;
        cursor: pointer
}
</style>

 src/views/visualization.vue

@@ -1,84 +1,114 @@
/

<template>
  <div class="home">
    <div class="left">
      <div class="left_top">
        <p class="title">设A423生产管理看板</p>
        <p class="title">
          设A423生产管理看板
          <span class="font el-icon-setting set-title"></span>
        </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 class="title-item"
            >订单编号: <span class="color_4efefa">Q-22038</span>
          </span>
          <span>当前工序: <span class="status">前纺(QF)</span> </span>

          <span>工作人数: <span class="status">6人</span> </span>
          <span class="title-item"
            >当前工序: <span class="color_4efefa">前纺(QF)</span>
          </span>
          <span class="title-item"
            >后道工序: <span class="color_4efefa">Q-22038</span>
          </span>
          <span class="title-item"
            >工作人数: <span class="color_4efefa">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 class="content-top">
              <div class="small_title">当前完成</div>
              <div class="content_leftBttom">
                <dl>
                  <dd style="font-size: 26px; font-weight: 600">0m</dd>
                </dl>
              </div>
            </div>
            <div class="content-top">
              <div class="small_title">正品生产</div>
              <div class="content_leftBttom">
                <dl>
                  <dd style="font-size: 26px; font-weight: 600">400m</dd>
                </dl>
              </div>
            </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="产品名称"
                >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-item label="起止时间"
                >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
              >
              <el-descriptions-item label="货物描述"
                >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
              >
              <el-descriptions-item label="客户名称"
                >江苏省苏州市吴中区吴中大道 1188 号</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>
            <el-descriptions :column="1" :colon="true">
              <el-descriptions-item label="完成度" style="width: 100%">
                <el-progress
                  define-back-color="#007101"
                  color="#00CC66"
                  :text-inside="true"
                  :stroke-width="30"
                  :percentage="progress"
                  :text-format="format"
                  >完成率50%</el-progress
                >
              </el-descriptions-item>
              <el-descriptions-item label="合格率" style="width: 100%">
                <el-progress
                  define-back-color="#007101"
                  color="#00CC66"
                  :text-inside="true"
                  :stroke-width="30"
                  :percentage="passrate"
                ></el-progress>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom_list">
            <div class="small_title">输入资源</div>
            <div class="bottom-title">输入资源</div>
            <Card />
            <Card />
            <Card />
            <span class="call">呼叫物料</span>
            <!-- <span class="call">呼叫物料</span> -->
          </div>
          <i class="el-icon-arrow-right font-arrow-20"></i>
          <div class="bottom_list">
            <div class="small_title">当前工序:前纺(QF)</div>
            <div class="bottom-title">当前工序:前纺(QF)</div>
            <!-- format:format(percentage) -->
            <div style="display: flex; margin: auto; width: 160px; margin-top: 12px">
            <div
              style="
                display: flex;
                margin: auto;
                width: 160px;
                margin-top: 12px;
              "
            >
              <el-progress
                :stroke-width="12"
                text-color="#4EFEFA"
@@ -92,8 +122,10 @@
            </div>

            <Card />
            <p style="font-size: 22px; margin-left: 12px; margin-top: 50px">编号:K23455</p>
            <div class="qfcall">
            <p style="font-size: 22px; margin-left: 12px; margin-top: 50px">
             
            </p>
            <!-- <div class="qfcall">
              <span
                style="
                  width: 63%;
@@ -116,99 +148,130 @@
                "
                >结束</span
              >
            </div>
            </div> -->
          </div>
          <i class="el-icon-arrow-right font-arrow-20"></i>
          <div class="bottom_list">
            <div class="small_title">输出资源</div>
            <div class="bottom-title">输出资源</div>
            <Card />
            <Card />
            <Card />
            <span class="call">呼叫运输</span>
            <!-- <span class="call">呼叫运输</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_top">
        <div class="right-top-l">作业状态</div>
        <div class="time">
          <dl>
            <dd><span style="font-size: 36px">17:50</span></dd>
            <dd><span>2023/02/16</span></dd>
            <dd><span style="font-size: 32px">17:50</span></dd>
            <dd>
              <span style="font-size: 12px; margin-right: 10px"
                >2023/02/16</span
              >
              <span style="font-size: 14px">星期四</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-top-m">
        设备状态:
        <span style="position: relative"
          >正常
          <span class="yuandian"></span>
        </span>
      </div>
      <div class="right-top-m-btn">
        <el-button type="primary" @click="openorder">
               控制</el-button
              >
      </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>
        <div class="right-small-title">当前值班</div>
        <dl class='right-small-person'>
          <dt>
            <el-avatar
            class="img-class"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </dt>
          <span style="font-size:20px; font-weight:600;margin-right:10px">张三</span>
          <span style="color:#666;">1867654329</span>
        </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 style="width:100%;font-size:18px;font-weight:600;margin-top:50px;text-align:center;line-height:50px;">编号：12233</div>
        <div class="right-small-btn">
          <el-button type="primary" @click="openorder">
                打印</el-button
                >
                <el-button type="primary" @click="openorder">
                完成</el-button
                >
        </div>
      </div>
      <div class="right_base">
        知识库
       
        <Knowledge />
        <span class="call">红灯呼叫</span>
        <div class="right-base-btn call">
        <el-button type="primary" @click="openorder">
          红灯呼叫</el-button
              >
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from "@/components/Card.vue"
import Knowledge from "../components/Knowledge.vue"
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
export default {
  components: {
    Card,
    Knowledge
    Knowledge,
  },
  data() {
    return {
      progress: 70, //进度
      passrate: 30, //合格率
      production: 25 //生产中
    }
      production: 25, //生产中
    };
  },
  created() {
    setInterval(() => {
      this.progress = this.getRandomNumber(1, 100)
      this.passrate = this.getRandomNumber(1, 100)
      this.production = this.getRandomNumber(1, 100)
    }, 3000)
      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)
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    format(percentage) {
      return `合格率：${percentage}%`
    }
  }
}
      return `合格率：${percentage}%`;
    },
  },
};
</script>

<style lang="scss">
.font-arrow-20 {
  font-size: 30px;
  color: #4efefa;
  font-weight: 700;
}
.bottom_list {
  position: relative;
  padding:10px;
  .bottom-title{
    font-weight: 600;
    font-size:16px;


  }
  .call {
    background: #4efefa;
    display: inline-block;
@@ -243,18 +306,19 @@
.small_title {
  font-size: 20px;
  font-weight: 600;
  margin-left: 14px;
  margin-top: 14px;
}
.home {
  width: 100%;
  height: 100%;
  height: auto;
  min-height: 100%;
  color: #fff;

  background: rgba(2, 10, 38, 1);
  overflow: hidden;
  .left {
    width: calc(78% - 60px);
    height: calc(100% - 60px);
    background: #0a2164;
    height: auto;
    min-height: 100%;
    background: rgba(2, 10, 38, 1);
    float: left;
    padding: 30px;
    padding-top: 20px;
@@ -264,48 +328,55 @@

      text-align: center;
    }
    .status {
    .color_4efefa {
      color: #4efefa;
    }

    .statelist {
      width: 50%;
      width: 100%;
      margin: 0 auto;
      height: 20px;
      height: 50px;
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: space-around;
      align-items: center;
      span {
        // background: blue;
        width: 30%;
        height: 100%;
      .title-item {
        width: 20%;
        padding: 15px 20px;
        text-align: center;
        border-radius: 4px;
        display: inline-block;
        background: rgba(12, 79, 218, 1);
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        line-height: 50px;
      }
    }
    .content {
      width: 100%;
      height: 200px;
      margin: 60px 0px;
      height: 240px;
      margin: 20px 0px;
      overflow: hidden;
      .content_left {
        width: 20%;
        width: 22%;
        height: 100%;
        float: left;
        padding: 2%;
        background: #233b9e;
        // padding:2%;
        .content-top {
          background: hsl(225, 85%, 67%);
          height: calc(50% - 25px);
          padding-top: 20px;
          text-align: center;
          line-height: 30px;
          &:nth-of-type(1) {
            margin-bottom: 10px;
          }
        }
        .content_leftBttom {
          width: 100%;
          height: 70%;
        }
        dl {
          float: left;
          width: 50%;
          height: 100%;
          margin-top: calc(50% - 70px);
          margin-top: 5px;
        }
        dd {
          width: 100%;
@@ -318,16 +389,18 @@
        }
      }
      .content_right {
        width: 70%;
        width: calc(75% - 20px);
        height: 100%;
        float: right;
        padding: 2%;
        margin-left: 2%;
        background: #233b9e;
        padding: 0 10px;
        // background: #233b9e;
        .el-descriptions__body {
          background: transparent;
        }
        .el-descriptions__table {
          width: 100%;
          margin: 10px 0px;
          background: #233b9e;
          // background: #233b9e;
          color: #fff;
          .el-descriptions--small {
            width: 100%;
@@ -335,7 +408,6 @@
          }
        }
        .el-progress {
          margin: 10px 0px;
          width: 80%;
        }
      }
@@ -356,24 +428,50 @@
        // background: #333333;
        width: 30%;
        height: 100%;
        background: #233b9e;
        background: #111438;

        .card {
          width: 90%;
          width: calc(100% - 20px);
          height: 70px;
          // border: 1px solid #ccc;
          background:#ffff;
          border-radius: 5px;
          margin-left: 1%;
          margin-top: 20px;
          padding: 2%;
          .card_top {
            width: 100%;
            height: 30%;
          margin-top: 10px;
          color: #333;
          .card_top-2{
            width: 50%;
            height:45px;
            border-radius: 5px;
            padding: 2%;
            color: #fff;
            background:#fff;
            font-size: 12px;
            line-height: 24px;
            float:left;
            .card-top-r-t{
              width:100%;
              text-align:center;
              display:inline-block;
              height:20px;
              line-height:20px;
              margin-top:3px;
            }
            .card-top-r-b{
              width:100%;
              height:20px;
              line-height:20px;
               text-align:center;
              display:inline-block;
              
            }
          }
          .card_top {
            width: 50%;
            height:45px;
            border-radius: 5px;
            background:#f2f2f2;
            font-size: 12px;
            line-height: 45px;
            float:left;
            
           
            > div {
              margin-left: 12px;
              position: relative;
@@ -386,15 +484,18 @@
            }
          }
          .card_content {
            padding: 2%;
            width: 100%;
            border-radius: 5px;
            height: 70%;
            background: #4765c0;
            height: 25px;
            // background: #4765c0;
            .card_contentLeft {
              width: 100%;
              height: 58%;
              font-size: 18px;
              width: calc(100% - 10px);
              height: 25px;
              line-height:25px;
              font-size: 12px;
              padding:0 5px;
              border-radius:5px 5px 0 0;
              background:#ffcc33;
            }
            .card_contentRight {
              width: 100%;
@@ -408,19 +509,34 @@
  }
  .right {
    width: calc(20% - 10px);
    height: calc(100% - 48px);
    height: auto;
    min-height: 100%;
    background: #233b9e;
    float: left;
    padding: 1%;
    .right_top {
      width: 100%;
      height: 15%;
      height: 100px;
      position: relative;
      .right-top-l {
        position: absolute;
        top: 10px;
        left: -5%;
        width: 100px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 0 6px 6px 0;
        background: hsl(225, 85%, 67%);
        display: inline-block;
      }
      // background: pink;
      .time {
        width: 100%;
        height: 50%;

        width: 70%;
        height: 100px;
        float: right;
        position: relative;
        text-align: right;
        dl {
          height: 80%;
          // padding-top: 10%;
@@ -433,22 +549,93 @@
        }
      }
    }
    .right-top-m {
      width:100%;
      background:rgba(28,48,133,1);
      line-height:50px;
      font-weight: 700;
      font-size:18px;
      padding:0 4%;
      overflow-x:hidden;
      margin-left:-4%;
      .yuandian {
        width: 25px;
        height: 25px;
        line-height:40px;
        margin-top:12.5px;
        display:inline-block;
        background: #15d815;
        display: block;
        border-radius: 50%;
        float:right;
        
      }
    }
    .right-top-m-btn{
        margin-top:10px;
        width:100%;
        .el-button--primary{
          width:100%;
          background:#fff;
          color:#4765c0;
          font-weight: 700;
          font-size:18px;
        }
      }
    .right_dutyLst {
      width: 100%;
      height: 35%;
      width: calc(100% - 20px);
      height: 270px;
      border-radius: 4px;
      line-height:30px;
      overflow: hidden;
      dl {
      background:#00CC66;
      margin-top:10px;
      padding:5px 10px;
      .right-small-title{
        width:auto;
        padding:5px;
        font-size:14px;
        float:right;
        border-radius:8px;
        background:#007101;
      }
      .right-small-person {
        width: 100%;
        height: 22%;
        height: 60px;
        line-height:60px;
        margin-top:50px;
        border-radius: 10px;
        background: #0a2164;
        background:#fff;
        color:#333;
        
        dt {
          float: left;
          padding: 16px;
          padding: 5px;
          margin-right:10px;
          .img-class{
            height:50px;
            padding:0!important;
          }
        }
        dd {
        span {
          // background: pink;
          padding-top: 10px;
        }
      }
      .right-small-btn{
        margin-top:10px;
        width:100%;
        .el-button--primary{
          width:45%;
          background:#fff;
          float:right;
          border-radius:6px;
          color:#4765c0;
          font-weight: 700;
          font-size:18px;
          &:nth-of-type(1){
            float:left;
          }
        }
      }
    }
@@ -456,21 +643,33 @@
      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;
      .right-base-btn{
        .el-button--primary{
          width:100%;
          background:#ff0000;
          float:right;
          border-radius:6px;
          color:#fff;
          font-weight: 700;
          font-size:18px;
          
        }
      }
      // .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;
      // }
    }
  }
}