From c9ce3d6fb1b98d2074b9aa1b8a3f297153620f94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=93=B2=E5=A5=87?= <13840175730@139.com>
Date: Wed, 13 Mar 2024 17:56:15 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0=E9=A6=96=E9=A1=B5=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=202.=E5=A2=9E=E5=8A=A0=E5=AE=9E=E9=99=85=E4=BA=A7?=
 =?UTF-8?q?=E8=83=BD=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/components/Content.vue  |  71 ++++++
 src/views/dashboard/components/Template.vue |   4 +-
 src/views/dashboard/index.vue               | 249 +++++++++++++++++---
 3 files changed, 291 insertions(+), 33 deletions(-)
 create mode 100644 src/views/dashboard/components/Content.vue

diff --git a/src/views/dashboard/components/Content.vue b/src/views/dashboard/components/Content.vue
new file mode 100644
index 0000000..6697507
--- /dev/null
+++ b/src/views/dashboard/components/Content.vue
@@ -0,0 +1,71 @@
+<template>
+  <div style="width: 100%">
+    <div class="box" v-for="(item,index) in data[deptName]">
+      <input v-if="activeCheckbox" type="checkbox" style="width: 25px;height: 25px;position: relative;top:-10px;left: 115px"/>
+      <div style="line-height:30px;border-radius: 15px;border: 3px solid gray;margin:3% 7%;background-color: white">
+        {{item.name}}
+      </div>
+      <div style="text-align: center;margin-top: 12px">
+        <img :src="item.headImage" :style="{width: myStyle.headImgWidth||'100%'}">
+      </div>
+      <div style="line-height:30px;border-radius: 5px;border: 3px solid gray;margin:2% 5%;background-color: white;color: gray">产能:30米/小时</div>
+      <hr style="margin: 1%"/>
+      <div style="line-height:25px;border-radius: 5px;border: 3px solid gray;margin:1% 5%;background-color: white;color: blue">今日计划:240米</div>
+      <div style="line-height:25px;border-radius: 5px;border: 3px solid gray;margin:1% 5%;background-color: white;color: green">今日产量:170.4米</div>
+      <el-progress type="line" :text-inside="true" :stroke-width="25" :style="{width:'90%',margin:'3% 5%'}"
+                   :percentage="Math.round(170.4/240*100,2)"
+                   :color="'green'" text-color="white"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+export default {
+  name:"Content",
+  props:{
+    data:Object,
+    deptName:String,
+    type:String,
+    myStyle:Object,
+    users:Number
+  },
+  data(){
+    return {
+      activeName:'1',
+      activeCheckbox:false,
+    }
+  },
+  methods:{
+    itemClick(item){
+      this.$emit('initDetail',item);
+    },
+    test(){
+      return XEUtils.random(1,60)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box{
+  width:20%;
+  height: 430px;
+  text-align: center;
+  border: 3px solid yellow;
+  border-radius: 25px;
+  float: left;
+  margin: 25px;
+}
+.deptName{
+  color: white;
+  border:1px solid blue;
+  border-radius:15px;
+  background-color: blue;
+  width: 80%;
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+  box-shadow: 2px 2px 2px 1px black;
+}
+</style>
diff --git a/src/views/dashboard/components/Template.vue b/src/views/dashboard/components/Template.vue
index bfadf5a..10c3e94 100644
--- a/src/views/dashboard/components/Template.vue
+++ b/src/views/dashboard/components/Template.vue
@@ -3,7 +3,9 @@
     <el-collapse-item :name="deptName">
       <template slot="title">
         <div style="width: 100%;height:100%;margin-left: 5%;text-align: center;line-height: 50px">
-          <button class="deptName">{{deptName}}({{type==='ks'?'总人数:':'出勤:'}}{{users}})</button>
+          <button class="deptName">{{deptName}}
+            <span v-if="type==='ks'||type==='cq'">({{type==='ks'?'总人数:':'出勤:'}}{{users}})</span>
+          </button>
         </div>
       </template>
       <div class="box" v-for="(item,index) in data[deptName]" @click="itemClick(item)">
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 6b7925a..c7e7e18 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,37 +1,135 @@
 <template>
-  <el-container style="width: 100%;height:90.9vh;background-color: gray">
-
-
+  <!-- 总览-->
+  <el-container style="width: 100%;height:90.9vh;background-color: rgba(138,43,226,0.68)">
+    <el-row style="width: 100%">
+      <el-col :span="3">
+        <div style="padding: 15px;margin-top: 80px">
+          <div class="group-btn">
+            资 料
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            上 料
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            1 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            2 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            3 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            4 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            5 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            6 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+          <div class="group-btn">
+            7 跨
+            <!--向右的三角-->
+            <div class="arrow-right"></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="21">
+        <el-header style="width: 100%; height: 35px;font-size: 12px;">
+          <el-form :inline="true" style="margin-top: 25px">
+            <el-row>
+              <el-col :span="4">
+                <el-form-item>
+                  <el-input v-model="queryParam.dcCh" placeholder="船号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item>
+                  <el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" format="yyyy/MM/dd" type="date" placeholder="日期"/>
+                </el-form-item>
+              </el-col>
+<!--              <el-col :span="4">
+                <el-form-item>
+                  <el-date-picker v-model="queryParam.endTime" value-format="yyyy/MM/dd" format="yyyy/MM/dd" type="date" placeholder="结束时间"/>
+                </el-form-item>
+              </el-col>-->
+<!--              <el-col :span="12" style="text-align: left">
+                <el-button type="success">对比</el-button>
+                <el-button type="success">全选</el-button>
+                <el-button type="success">确定</el-button>
+              </el-col>-->
+            </el-row>
+          </el-form>
+        </el-header>
+        <div class="rg-table-box" style="width:100%;height:88vh;overflow-y: auto;">
+          <div v-for="(item,index) in ks">
+            <Content :data="data" :deptName="item" :type="'mp'" :myStyle="{headImgWidth:'70%'}" :users="cqUsers[item]||0"/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!--    <div style="width: 100%">
+          <div style="width: 100%;height: 60vh;background-color: yellow"></div>
+          <div style="width: 100%;height: 30.9vh;background-color: blue"></div>
+        </div>-->
   </el-container>
-<!--  <div class="dashboard-editor-container" style="background-color: blueviolet;">-->
-<!--    <div class=" clearfix">-->
-<!--      <pan-thumb :image="avatar" style="float: left">-->
-<!--        &lt;!&ndash; Your roles:-->
-<!--        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;-->
-<!--      </pan-thumb>-->
-<!--      <div class="info-container">-->
-<!--        <span class="display_name">{{ name }}</span>-->
-<!--        &lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div>-->
-<!--      <img :src="emptyGif" class="emptyGif">-->
-<!--    </div>-->
-  </div>
+  <!--  <div class="dashboard-editor-container" style="background-color: blueviolet;">
+      <div class=" clearfix" style="width: 100%;height: 60vh;background-color: yellow">
+        <pan-thumb :image="avatar" style="float: left">
+          &lt;!&ndash; Your roles:
+          <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;
+        </pan-thumb>
+        <div class="info-container">
+          <span class="display_name">{{ name }}</span>
+          &lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;
+        </div>
+      </div>
+      <div>
+        <img :src="emptyGif" class="emptyGif">
+      </div>
+    </div>-->
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import PanThumb from '@/components/PanThumb'
-
-import { dictALL} from '@/api/user'
+import XEUtils from 'xe-utils'
+import {dictALL} from '@/api/user'
+import Template from "@/views/dashboard/components/Template.vue";
+import Content from "@/views/dashboard/components/Content.vue";
 
 export default {
   name: 'Dashboard',
-  components: { PanThumb },
+  components: {Content, Template, PanThumb },
   data() {
     return {
-
+      ks: ['资料', '上料', '1跨', '2跨', '3跨', '4跨', '5跨', '6跨', '7跨'],
+      data: {},
+      cqData:{},
+      cqUsers: {},
+      totalUsers:{},
+      queryParam:{
+        dcCh:'',
+        beginTime:'',
+        endTime:'',
+      }
     }
   },
   computed: {
@@ -44,9 +142,47 @@ export default {
   },
   created(){
     // this.initDict();
-
+    this.initData()
   },
   methods:{
+    initData(){
+      let i =0
+      for (const item of this.ks) {
+        if (!this.data[item]){
+          this.data[item]=[]
+        }
+        if (!this.cqData[item]){
+          this.cqData[item]=[]
+        }
+        if (!this.cqUsers[item]){
+          this.cqUsers[item]=0
+        }
+        let totalUser=XEUtils.random(1,10)
+        this.totalUsers[item]=totalUser
+        if ('准备室'===item){
+          totalUser=1
+          this.totalUsers[item]=totalUser
+        }
+        for (let j = 0; j < totalUser; j++) {
+          ++i
+          const cq=XEUtils.random(0, 1);
+          const data={
+            ks:item,
+            yhdm:'设备'+j,
+            name:'设备'+j,
+            headImage:'static/img/btn_em.35e6aa07.jpg',
+            gzl:XEUtils.random(0, 100),
+            cq:cq
+          }
+          if (cq){
+            this.cqUsers[item]+=1
+            this.cqData[item].push(data)
+          }else {
+            this.data[item].push(data)
+          }
+        }
+      }
+    },
     //挂载字典数据
     initDict(){
       dictALL().then(res=>{
@@ -63,15 +199,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .emptyGif {
-    display: block;
-    width: 45%;
-    margin: 0 auto;
-  }
+.arrow-right {
+  width: 0;
+  height: 0;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  border-left:16px solid yellowgreen;
+  position: relative;
+  top: -3.45vh;
+  left: 7.555vw;
+}
+
+.group-btn {
+  width: 80%;
+  height:32px;
+  color: white;
+  line-height:32px;
+  font-size:16px;
+  margin-top:15px;
+  text-align:center;
+  background-color: yellowgreen
+}
+
+.emptyGif {
+  display: block;
+  width: 45%;
+  margin: 0 auto;
+}
 
-  .dashboard-editor-container {
-    background-color: #e3e3e3;
-    min-height: 100vh;
+.dashboard-editor-container {
+  background-color: #e3e3e3;
+  min-height: 100vh;
     padding: 50px 60px 0px;
     .pan-info-roles {
       font-size: 12px;
@@ -93,4 +251,31 @@ export default {
       }
     }
   }
+
+.rg-table-box::-webkit-scrollbar {
+  /*整体样式*/
+  width: 0;
+}
+
+.rg-table-box::-webkit-scrollbar-track {
+  /*轨道*/
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #ededed;
+  border-radius: 10px;
+}
+.rg-table-box::-webkit-scrollbar-thumb {
+  /*滚动条小方块*/
+  border-radius: 10px;
+  background-color: #2e75d3;
+  background-image: -webkit-linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.2) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0.2) 75%,
+      transparent 75%,
+      transparent
+  );
+}
 </style>