1.优化项目2.综合看板静态页面初步实现

loulijun2021

2022-07-29 32ec691abab0c837f34ce2c4908a40a10b9dbec7

1.优化项目2.综合看板静态页面初步实现

 src/api/user.js

@@ -36,3 +36,10 @@
    params: data
  })
}
export function ForcedOffline(data) {
  return request({
    url: '/Login/ForcedOffline',
    method: 'post',
    params: data
  })
}

 src/assets/images/kb_headtitle.png

 src/assets/images/kb_headtitle2.png

 src/assets/images/layout_logo.png

 src/assets/images/layout_logo2.png

 src/layout/components/Sidebar/index.vue

@@ -2,7 +2,8 @@
  <div :class="{'has-logo':showLogo}">

    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper" style="margin-top:56px;height: 85%">
    <div class="layoutLogo" />
    <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbarWrapperClass">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
@@ -82,6 +83,22 @@
</script>
<style lang="scss">
$main_color: #42b983;

.layoutLogo{
  position: absolute;
  top: 5px;
  z-index:10;
  left: 5px;
  width: 200px;
  height: 90px;
  background:url("../../../assets/images/layout_logo.png") no-repeat;
}

.scrollbarWrapperClass{
  margin-top:90px;
  height: 85%;
}

.el-button--text, .el-button--text.is-disabled, .el-button--text.is-disabled:focus, .el-button--text.is-disabled:hover, .el-button--text:active {
  color: white;
  font-size: 18px;

 src/main.js

@@ -57,20 +57,6 @@
import watermark from './utils/watermark.js'
Vue.prototype.$watermark = watermark

// 时间过滤器
Vue.filter('dataFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
new Vue({
  el: '#app',
  router,

 src/store/modules/user.js

@@ -35,15 +35,21 @@
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
      login({ username: username.trim(), password: password }).then(res => {
      // login({ UserName: '001', PassWord: 123, HOrgName: 1 }).then(response => {
        const { data: res } = response
      //   const { data: res } = response
      //   if (res.code === '200') {
        setCookie('username', res.data.username)
        setCookie('admin', res.data.usercode)
        setCookie('navTabId', res.data.usercode)
        setCookie('usertype', res.data.usertype)
        setCookie('userid', res.data.userid)
        // }
        // console.log(res.code === '302', 8989)
        // if (res.code === '302') {
        setCookie('code', res.code)
        // }

        setCookie('username', res.username)
        setCookie('admin', res.usercode)
        setCookie('navTabId', res.usercode)
        setCookie('usertype', res.usertype)
        setCookie('userid', res.userid)
        // commit('SET_TOKEN', data.token)
        // setToken(res)
        // commit('SET_TOKEN', res)
@@ -109,11 +115,13 @@
          removeToken() // must remove  token  first
          resetRouter()

          removeCookie('ruleCode')
          removeCookie('username')
          removeCookie('admin')
          removeCookie('navTabId')
          removeCookie('usertype')
          removeCookie('userid')
          removeCookie('code')

          // reset visited views and cached views
          dispatch('tagsView/delAllViews', null, { root: true })

 src/utils/myEcharts.js

@@ -116,6 +116,7 @@

  return option
}

export function bar01(data) {
  var dataX = data.map(r => r.key)
  var dataY = data.map(r => r.value)
@@ -347,3 +348,127 @@

  return option
}

// 综合看板图
export function bar02() {
  const data = [70, 60, 50, 40, 30]

  const titlename = ['外观划伤', '表面油污', '尺寸', '颜色', '大小']
  const valdata = [683, 500, 400, 300, 200]
  const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: 'Top5不良',
      x: 'center',
      y: '4%',
      textStyle: {
        color: '#fff',
        fontSize: '22'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16'

      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          formatter: function(value, index) {
            return [
              '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
            ].join('\n')
          },
          rich: {
            lg: {
            // backgroundColor: '#339911',
              color: '#fff',
              borderRadius: 15,
              // padding: 5,
              align: 'center',
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: false,
        inverse: true,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }

      }
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 22,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: function(params) {
              // const num = myColor.length
              // return myColor[params.dataIndex % num]
              return myColor[params.dataIndex]
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            color: '#fff'
          // formatter: '{c}%',
          }
        }
      }
    ]
  }

  return option
}

 src/utils/request.js

@@ -1,7 +1,7 @@
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getCookie, getToken } from '@/utils/auth'
import { getCookie, getToken, removeCookie } from '@/utils/auth'
// create an axios instance

const service = axios.create({
@@ -51,13 +51,24 @@
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code === '300') {
    if (res.code === '300' || res.code === '303') {
      Message({
        message: res.Message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      if (res.code === '303') {
        removeCookie('ruleCode')
        removeCookie('username')
        removeCookie('admin')
        removeCookie('navTabId')
        removeCookie('usertype')
        removeCookie('userid')
        removeCookie('code')
        setTimeout(() => {
          window.location.reload()
        }, 3000)
      }
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      //   // to re-login
@@ -72,7 +83,24 @@
      //   })
      // }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
    }
    // else if (res.code === '303') {
    //   console.log(res.code, 888)
    //   Message({
    //     message: res.Message || 'Error',
    //     type: 'error',
    //     duration: 5 * 1000
    //   })
    //   removeCookie('ruleCode')
    //   removeCookie('username')
    //   removeCookie('admin')
    //   removeCookie('navTabId')
    //   removeCookie('usertype')
    //   removeCookie('userid')
    //   removeCookie('code')
    //   this.$router.push({ path: this.redirect || '/' })
    // }
    else {
      return res
    }
  },

 src/views/kb/kbCommon.css

@@ -3,25 +3,41 @@
  height: 1080px;
  position: relative;
  background-color: #000;
  font-size: 20px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: #fff;
}

.kb_header {
  /*background-color: #000;*/
  background-color: #123;
  /*background-color: #123;*/
  height: 90px;
  line-height: 90px;
  font-size: 40px;
  color: #09d8f2;
}

.kb_header_text{
  letter-spacing: 5px;
}

.kb_headerPic{
  position: absolute;
  top: 39px;
  width: 1808px;
  height: 12px;
  /*background-size: 100% 100%;*/
  background: url("../../assets/images/kb_headtitle2.png") no-repeat;
  margin-left: 56px;
  /*margin-left: 40px;*/
}
.kb_headTime{
  position: absolute;
  left: 100px;
  right: 10px;
  width: 300px;
  height: 50px;
  z-index: 10;
  top: 20px;
  top: 30px;
  font-size: 22px;
}

@@ -39,6 +55,16 @@
  /*align-content: center;*/
}

.flex_e_c{
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}

.kb_pd10{
 padding: 10px;
}

.kb_mt10{
  margin-top: 10px;
}

 src/views/kb/zhkb.vue

@@ -2,30 +2,659 @@
  <div>
    <div class="kb_dashboard">
      <div class="kb_header ">
        <div class="flex_c_c">
        <div class="flex_c_c kb_header_text">
          大岛车间综合看板
        </div>
        <div class="kb_headerPic" />
        <div class="kb_headTime">
          <span>{{ headTime |dataFormat }}</span>
          <span>{{ headTime }}</span>
        </div>
      </div>

      <div class="kb_content">
        <div class="kb_left">
          <!-- 1-->
          <div class="kb_left_top_title01">生产产线：</div>
          <div class="kb_left_top kb_pd10">
            <div v-for="item in leftTopData" :key="item.id">
              <div class="kb_block ">
                <div>{{ item.name }}</div>
                <div style="margin-top: 10px">{{ item.value }}</div>
            <!--            <div v-for="item in leftTopData" :key="item.id">-->
            <!--              <div class="kb_block ">-->
            <!--                <div>{{ item.name }}</div>-->
            <!--                <div style="margin-top: 10px">{{ item.value }}</div>-->
            <!--              </div>-->
            <!--            </div>-->
            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:</div>
                  <div class="kb_mt10">产线总量:</div>
                </div>
                <div>
                  <div>锂电产线</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>加工单号:</div>
                  <div class="kb_mt10">产品名称:</div>
                  <div class="kb_mt10">任务数量:</div>
                </div>
                <div>
                  <div>MO-2022-07-29-0001</div>
                  <div class="kb_mt10">F09锂电</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block03 kb_pd10 ">
                <div class="flex_e_c">

                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">2000</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 flex_c_c">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div v-if="false" class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 flex_c_c">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>

                </div>
                <div class="kb_block03_02 flex_e_c">

                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 0)" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 255)" />
                    </div>
                  </div>

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content02">-->
                  <!--                      <div class="circle" />-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content03">-->
                  <!--                      &lt;!&ndash;                      <div class="circle" :class="circleMarginLeft" />&ndash;&gt;-->
                  <!--                      <div class="circle" style="background-color: #fff" />-->
                  <!--                      &lt;!&ndash;                      <div class="line" :class="lineWidth" />&ndash;&gt;-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                </div>

              </div>
            </div>
            <!--到时候下面三个删掉-->
            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:</div>
                  <div class="kb_mt10">产线总量:</div>
                </div>
                <div>
                  <div>锂电产线</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>加工单号:</div>
                  <div class="kb_mt10">产品名称:</div>
                  <div class="kb_mt10">任务数量:</div>
                </div>
                <div>
                  <div>MO-2022-07-29-0001</div>
                  <div class="kb_mt10">F09锂电</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block03 kb_pd10 ">
                <div class="flex_e_c">

                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">2000</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 flex_c_c">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div v-if="false" class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 flex_c_c">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>

                </div>
                <div class="kb_block03_02 flex_e_c">

                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 0)" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 255)" />
                    </div>
                  </div>

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content02">-->
                  <!--                      <div class="circle" />-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content03">-->
                  <!--                      &lt;!&ndash;                      <div class="circle" :class="circleMarginLeft" />&ndash;&gt;-->
                  <!--                      <div class="circle" style="background-color: #fff" />-->
                  <!--                      &lt;!&ndash;                      <div class="line" :class="lineWidth" />&ndash;&gt;-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                </div>

              </div>
            </div>
            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:</div>
                  <div class="kb_mt10">产线总量:</div>
                </div>
                <div>
                  <div>锂电产线</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>加工单号:</div>
                  <div class="kb_mt10">产品名称:</div>
                  <div class="kb_mt10">任务数量:</div>
                </div>
                <div>
                  <div>MO-2022-07-29-0001</div>
                  <div class="kb_mt10">F09锂电</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block03 kb_pd10 ">
                <div class="flex_e_c">

                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">2000</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 flex_c_c">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div v-if="false" class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 flex_c_c">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>

                </div>
                <div class="kb_block03_02 flex_e_c">

                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 0)" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 255)" />
                    </div>
                  </div>

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content02">-->
                  <!--                      <div class="circle" />-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content03">-->
                  <!--                      &lt;!&ndash;                      <div class="circle" :class="circleMarginLeft" />&ndash;&gt;-->
                  <!--                      <div class="circle" style="background-color: #fff" />-->
                  <!--                      &lt;!&ndash;                      <div class="line" :class="lineWidth" />&ndash;&gt;-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                </div>

              </div>
            </div>
            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
                  <div>产线名称:</div>
                  <div class="kb_mt10">产线总量:</div>
                </div>
                <div>
                  <div>锂电产线</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>加工单号:</div>
                  <div class="kb_mt10">产品名称:</div>
                  <div class="kb_mt10">任务数量:</div>
                </div>
                <div>
                  <div>MO-2022-07-29-0001</div>
                  <div class="kb_mt10">F09锂电</div>
                  <div class="kb_mt10">300</div>
                </div>
              </div>
              <div class="kb_block03 kb_pd10 ">
                <div class="flex_e_c">

                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">2000</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 ">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 flex_c_c">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>
                  <div v-if="false" class="kb_block03_content flex_c_c">
                    <div class="content01">领料</div>
                    <div class="content02">
                      <div class="content02_1 ">任务</div>
                      <div class="content02_2 borderTop ">200</div>
                    </div>
                    <div class="content02">
                      <div class="content02_1 flex_c_c">合格</div>
                      <div class="content02_2 borderTop ">199</div>
                    </div>
                    <div class="content02" style="border-right: 0">
                      <div class="content02_1 ">不良</div>
                      <div class="content02_2 borderTop ">1</div>
                    </div>
                  </div>

                </div>
                <div class="kb_block03_02 flex_e_c">

                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 0)" />
                    </div>
                  </div>
                  <div class="kb_block03_02_content flex_c_c">
                    <div class="flex_c_c content01">
                      <div class="circle" style="background-color: rgb(255 255 255)" />
                    </div>
                  </div>

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content02">-->
                  <!--                      <div class="circle" />-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content03">-->
                  <!--                      &lt;!&ndash;                      <div class="circle" :class="circleMarginLeft" />&ndash;&gt;-->
                  <!--                      <div class="circle" style="background-color: #fff" />-->
                  <!--                      &lt;!&ndash;                      <div class="line" :class="lineWidth" />&ndash;&gt;-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                </div>

              </div>
            </div>
          </div>
          <!-- 2-->
          <div class="kb_left_top_title02">在制订单：</div>
          <div class="kb_left_bottom kb_pd10">
            2
            <div class="kb_left_bottom_content">
              <el-table
                :data="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
              >
                <el-table-column
                  prop="xh"
                  label="序号"
                  width="53"
                />
                <el-table-column
                  prop="jgzt"
                  label="加工状态"
                  width="85"
                />
                <el-table-column
                  prop="pfsj"
                  label="派发时间"
                  width="86"
                />
                <el-table-column
                  prop="xsddh"
                  label="销售订单号"
                  width="150"
                />
                <el-table-column
                  prop="jgdh"
                  label="加工单号"
                />
                <el-table-column
                  prop="cpmc"
                  label="产品名称"
                  width="105"
                />
                <el-table-column
                  prop="gg"
                  label="规格"
                  width="60"
                />
                <el-table-column
                  prop="dw"
                  label="单位"
                  width="60"
                />
                <el-table-column
                  prop="rwsl"
                  label="任务数量"
                  width="90"
                />
                <el-table-column
                  prop="wgsl"
                  label="完工数量"
                  width="90"
                />
                <el-table-column
                  prop="blsl"
                  label="不良数量"
                  width="90"
                />
                <el-table-column
                  prop="wcl"
                  label="完成率"
                  width="70"
                />
                <el-table-column
                  prop="yjks"
                  label="预计开始"
                  width="86"
                />
                <el-table-column
                  prop="yjjs"
                  label="预计结束"
                  width="86"
                />
              </el-table>
            </div>
          </div>
        </div>
        <div class="kb_right kb_pd10">
          3
          <div class="kb_right_top kb_pd10">
            <div class="kb_right_top_content">
              <div class="content_head">当日车间产线产品数量排行</div>
              <div class="content_body">
                <el-table
                  :data="tableDataRank"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                >
                  <el-table-column
                    prop="xh"
                    label="序号"
                    width="70"
                  />
                  <el-table-column
                    prop="cj"
                    label="车间"
                    width="100"
                  />
                  <el-table-column
                    prop="cx"
                    label="产线"
                    width="100"
                  />
                  <el-table-column
                    prop="cp"
                    label="产品"
                  />
                  <el-table-column
                    prop="sl"
                    label="数量"
                    width="100"
                  />
                </el-table>
              </div>
            </div>
          </div>
          <div class="kb_right_bottom kb_pd10">
            <div class="kb_right_bottom_content">
              <div id="bar02" style="width: 100%;height:100%" />
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -34,34 +663,234 @@

<script>
import './kbCommon.css'
import { bar02, loadEcharts } from '@/utils/myEcharts'

export default {
  name: 'Index2',
  data() {
    return {
      headTime: new Date(),
      leftTopData: [
        { id: 1, name: '锂电产线', value: 1000, children: [] },
        { id: 2, name: '包装产线', value: 1200, children: [] },
        { id: 3, name: '包装产线', value: 1300, children: [] }
      ]//
      headTime: '',
      leftTopDataAll: [
        // { id: 1, name: '锂电产线', value: 1000, children: [] },
        { id: 2, name: '包装产线1', value: 1200, children: [] },
        { id: 3, name: '包装产线2', value: 1300, children: [] },
        { id: 4, name: '包装产线3', value: 1300, children: [] },
        { id: 5, name: '包装产线4', value: 1300, children: [] },
        { id: 6, name: '包装产线5', value: 1300, children: [] }
      ],
      leftTopDataAllLength: 0,
      leftTopDataCurrentNumber: 0,
      leftTopData: [],
      tableData: [
        {
          xh: 1,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 2,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 3,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 4,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 5,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 6,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 7,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 8,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 9,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        },
        {
          xh: 10,
          jgzt: '开始',
          pfsj: '07/29',
          xsddh: '202207290001',
          jgdh: 'MO-2022-07-29-0001',
          cpmc: '产品名测试',
          gg: '@20',
          dw: 'PCS',
          rwsl: 2000,
          wgsl: 1900,
          blsl: 100,
          wcl: '99%',
          yjks: '07/21',
          yjjs: '07/29'
        }
      ],
      tableDataRank: [// 排行
        { xh: 'NO.1', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.2', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.3', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.4', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.5', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.6', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.7', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.8', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }
      ]

    }
  },

  created() {
    setInterval(this.getNowTime, 1000)
  },
  mounted() {
    // setInterval(this.getNowTime, 500)
    this.handleData()
    this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)
    this.leftTopDataAllLength = this.leftTopDataAll.length

    // this.handleData()
    // setInterval(this.handleData, 2000)

    this.getEcharts()
  },
  methods: {
    // 处理数据
    handleData() {
      console.log(this.leftTopDataCurrentNumber)
      this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)

      if (this.leftTopDataCurrentNumber === this.leftTopDataAllLength - 2 || this.leftTopDataCurrentNumber === this.leftTopDataAllLength - 1) {
        this.leftTopDataCurrentNumber = 0
      } else {
        this.leftTopDataCurrentNumber = this.leftTopDataCurrentNumber + 2
      }
    },

    // 获取echarts
    getEcharts() {
      loadEcharts('bar02', bar02())
    },

    // 获取当前时间
    getNowTime() {
      const dt = new Date()

      const wk = dt.getDay()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
@@ -69,8 +898,29 @@
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weeks[wk]

      this.headTime = `${y}-${m}-${d}      ${hh}:${mm}:${ss}`
      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
      // return { backgroundColor: 'transparent', padding: '0', textAlign: 'center' }
      return {
        backgroundColor: '#000',
        padding: '17px 0',
        textAlign: 'center',
        color: '#fff',
        borderRight: '1px solid rgba(255,255,255,0.6)'
      }
    },
    cellStyle() {
      return {
        padding: '8px 0',
        textAlign: 'center',
        backgroundColor: '#000',
        color: '#fff',
        borderRight: '1px solid rgba(255,255,255,0.6)'
      }
    }
  }
}
@@ -83,11 +933,24 @@
  position: relative;
  height: 990px;
  width: 100%;
  background-color: #99a9bf;
  background-color: #000;
  letter-spacing: 2px;

  .kb_left {
    width: 1340px;
    width: 1345px;
    height: 100%;
    padding-left: 5px;

    .kb_left_top_title01 {
      position: absolute;
      top: -3px;
      left:15px;
    }
    .kb_left_top_title02{
      position: absolute;
      top: 483px;
      left:15px;
    }

    .kb_left_top {
      height: 495px;
@@ -95,29 +958,157 @@
      flex-direction: column;
      justify-content: space-around;

      .kb_block{
        width: 150px;
        height: 150px;
        color: #fff;
        letter-spacing:5px;
        background-color: #42b983;
      .kb_left_top_block {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.6);

        .kb_block01 {
          width: 171px;
          display: flex;
        align-items: center;
        flex-direction: column;
          border-right: 1px solid rgba(255,255,255,0.6);
      }

        .kb_block02 {
          width: 304px;
          display: flex;
          align-items: center;
          border-right: 1px solid rgba(255,255,255,0.6);
        }

        .kb_block03 {
          width: 843px;
          display: flex;
          flex-direction: column;
          //text-align: center;

          .kb_block03_content {
            border: 1px solid rgba(255,255,255,0.6);
            width: 200px;
            height: 50px;

            .content01 {
              width: 50px;
              border-right: 1px solid rgba(255,255,255,0.6);
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .content02 {
              width: 50px;
              border-right: 1px solid rgba(255,255,255,0.6);

              .content02_1 {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50%;
              }

              .content02_2 {
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              .borderTop {
                border-top: 1px solid rgba(255,255,255,0.6);
              }
            }
          }
        }

        .kb_block03_02 {
          margin-top: 7px;

          .kb_block03_02_content {
            width: 200px;

            .content01 {
              .circle {
                width: 26px;
                height: 26px;
                background-color: #00ff8b;
                border-radius: 50%;
              }

            }

          }
        }

        .kb_block03_03 {
          //position: absolute;

          .kb_block03_03_content {
            width: 200px;

            .line {
              width: 50px;
              height: 2px;
              margin-top: 12px;
              background-color: #42b983;
              position: absolute;
              //top: 55px;
              //margin-left: 300px;
              //right: 0;
              //left:  200px;
            }
          }
        }

      }

    }

    .kb_left_bottom {
      height: 495px;
      background-color: #20a0ff;

      .kb_left_bottom_content {
        border: 1px solid rgba(255,255,255,0.6);
        height: 460px;
      }
    }
  }

  .kb_right {
    width: 580px;
    width: 575px;
    height: 100%;
    background-color: #42b983;

    .kb_right_top {
      height: 476px;
      width: 100%;

      .kb_right_top_content {
        border: 1px solid rgba(255,255,255,0.6);
        height: 100%;
        display: flex;
        flex-direction: column;

        .content_head {
          font-size: 26px;
          height: 76px;
          line-height: 76px;
          border-bottom: 1px solid rgba(255,255,255,0.6);
          text-align: center;
        }
      }
    }

    .kb_right_bottom {
      height: 481px;
      margin-top: 8px;

      .kb_right_bottom_content {
        border: 1px solid rgba(255,255,255,0.6);
        width: 100%;
        height: 100%;
      }
    }
  }
}


 src/views/login/index.vue

@@ -116,11 +116,32 @@
      </el-form>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :show-close="false"
      top="5vh"
    >
      <div style="font-size:20px;">
        <!--        <i class="el-icon-warning-outline" style="color: #ffef00" />-->
        当前账号已登录，是否强制下线!
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">否</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">是</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getCookie, removeCookie, setCookie } from '@/utils/auth'
import { ForcedOffline } from '@/api/user'

export default {
  name: 'Login',
@@ -166,7 +187,8 @@
      passwordType: 'password',
      redirect: undefined,
      focus1: false,
      focus2: false
      focus2: false,
      dialogVisible: false
    }
  },
  watch: {
@@ -193,7 +215,12 @@
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            console.log(getCookie('code') === '302')
            if (getCookie('code') === '302') {
              this.dialogVisible = true
            } else {
            this.$router.push({ path: this.redirect || '/' })
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
@@ -203,6 +230,34 @@
          return false
        }
      })
    },

    dialogVisibleCancel() {
      removeCookie('username')
      removeCookie('admin')
      removeCookie('navTabId')
      removeCookie('usertype')
      removeCookie('userid')
      removeCookie('code')
      this.dialogVisible = false
    },
    async dialogVisibleConfirm() {
      const usercode = getCookie('navTabId')
      const username = getCookie('admin')
      const usertype = getCookie('usertype')
      const userid = getCookie('userid')
      const data = {
        usercode,
        username,
        usertype,
        userid
      }
      const res = await ForcedOffline(data)
      if (res.code === '200') {
        this.$message.success('强制下线成功！')
        this.dialogVisible = false
        this.$router.push({ path: this.redirect || '/' })
      }
    }
  }
}
@@ -393,4 +448,7 @@
    -webkit-text-fill-color: #000 !important;
  }
}
::v-deep .el-dialog__title{
  color: red;
}
</style>