修改ui
This commit is contained in:
		@@ -18,7 +18,35 @@ export default {
 | 
			
		||||
      levelList: null
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    changeColor() {
 | 
			
		||||
      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
 | 
			
		||||
        return true
 | 
			
		||||
      } else {
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    // changeColor(val) {
 | 
			
		||||
    //   if (val == true) {
 | 
			
		||||
    //     var tag = document.getElementsByClassName("breadcrumb-container")
 | 
			
		||||
    //     console.log('tag', tag)
 | 
			
		||||
    //     // for (let i in tag) {
 | 
			
		||||
    //       tag[i].style.color = 'rgba(255, 255, 255, 0.45)'
 | 
			
		||||
    //       // tag[i].classList.remove("default")
 | 
			
		||||
    //     // }
 | 
			
		||||
    //     // console.log('this.$refs.scrollContainer', this.$refs.tag);
 | 
			
		||||
    //   } else {
 | 
			
		||||
    //     var tag = document.getElementsByClassName("breadcrumb-container")
 | 
			
		||||
    //     console.log('tag', tag)
 | 
			
		||||
    //     for (let i in tag) {
 | 
			
		||||
    //       tag[i].style.color = ''
 | 
			
		||||
    //       // tag[i].classList.remove("default")
 | 
			
		||||
    //     }
 | 
			
		||||
    //     // this.$refs.mainContainer.style.backgroundColor = ''
 | 
			
		||||
    //   }
 | 
			
		||||
    // },
 | 
			
		||||
    $route(route) {
 | 
			
		||||
      // if you go to the redirect page, do not update the breadcrumbs
 | 
			
		||||
      if (route.path.startsWith('/redirect/')) {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="navbar">
 | 
			
		||||
  <div ref="navbar" class="navbar">
 | 
			
		||||
    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
 | 
			
		||||
      @toggleClick="toggleSideBar" />
 | 
			
		||||
 | 
			
		||||
@@ -41,6 +41,13 @@ export default {
 | 
			
		||||
      'nickname',
 | 
			
		||||
      'device'
 | 
			
		||||
    ]),
 | 
			
		||||
    changeColor() {
 | 
			
		||||
      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
 | 
			
		||||
        return true
 | 
			
		||||
      } else {
 | 
			
		||||
        return false
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    setting: {
 | 
			
		||||
      get() {
 | 
			
		||||
        return this.$store.state.settings.showSettings
 | 
			
		||||
@@ -58,6 +65,18 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    // changeColor(val) {
 | 
			
		||||
    //   if (val == true) {
 | 
			
		||||
    //     // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
 | 
			
		||||
    //     this.$refs.navbar.style.backgroundColor = 'rgba(0, 21, 41, 1)'
 | 
			
		||||
    //     this.$refs.navbar.style.boxShadow = '0px 1px 8px 0px rgba(0,131,255,0.35)'
 | 
			
		||||
    //   } else {
 | 
			
		||||
    //     this.$refs.navbar.style.backgroundColor = ''
 | 
			
		||||
    //     this.$refs.navbar.style.boxShadow = ''
 | 
			
		||||
    //   }
 | 
			
		||||
    // },
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    toggleSideBar() {
 | 
			
		||||
      this.$store.dispatch('app/toggleSideBar')
 | 
			
		||||
 
 | 
			
		||||
@@ -56,23 +56,26 @@ export default {
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    changeColor(val) {
 | 
			
		||||
      // if (val == true) {
 | 
			
		||||
      //   this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
 | 
			
		||||
      //   var tag = document.getElementsByClassName("tags-view-item")
 | 
			
		||||
      //   console.log('tag', tag)
 | 
			
		||||
      //   for (let i in tag) {
 | 
			
		||||
      //     tag[i].classList.add("changeColor")
 | 
			
		||||
      //     // tag[i].classList.remove("default")
 | 
			
		||||
      //   }
 | 
			
		||||
      //   console.log('this.$refs.scrollContainer', this.$refs.tag);
 | 
			
		||||
      // } else {
 | 
			
		||||
      //   this.$refs.tagsViewContainer.style.backgroundColor = ''
 | 
			
		||||
      //   var tag = document.getElementsByClassName("tags-view-item")
 | 
			
		||||
      //   for (let i in tag) {
 | 
			
		||||
      //     // tag[i].classList.remove("changeColor")
 | 
			
		||||
      //     // tag[i].classList.add("default")
 | 
			
		||||
      //   }
 | 
			
		||||
      // }
 | 
			
		||||
      if (val == true) {
 | 
			
		||||
        console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
 | 
			
		||||
        this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
 | 
			
		||||
        this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
 | 
			
		||||
        var tag = document.getElementsByClassName("tags-view-item")
 | 
			
		||||
        console.log('tag', tag)
 | 
			
		||||
        for (let i in tag) {
 | 
			
		||||
          tag[i].classList.add("changeColor")
 | 
			
		||||
          // tag[i].classList.remove("default")
 | 
			
		||||
        }
 | 
			
		||||
        console.log('this.$refs.scrollContainer', this.$refs.tag);
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$refs.tagsViewContainer.style.backgroundColor = ''
 | 
			
		||||
        this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
 | 
			
		||||
        var tag = document.getElementsByClassName("tags-view-item")
 | 
			
		||||
        for (let i in tag) {
 | 
			
		||||
          tag[i].classList.remove("changeColor")
 | 
			
		||||
          // tag[i].classList.add("default")
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    $route() {
 | 
			
		||||
      this.addTags()
 | 
			
		||||
@@ -96,11 +99,23 @@ export default {
 | 
			
		||||
      return route.path === this.$route.path
 | 
			
		||||
    },
 | 
			
		||||
    activeStyle(tag) {
 | 
			
		||||
      if (!this.isActive(tag)) return {};
 | 
			
		||||
      return {
 | 
			
		||||
        "background-color": this.theme,
 | 
			
		||||
        "border-color": this.theme
 | 
			
		||||
      };
 | 
			
		||||
      if (this.changeColor) {
 | 
			
		||||
        if (!this.isActive(tag)) return {
 | 
			
		||||
          "background-color": 'rgba(0, 59, 115, 1)',
 | 
			
		||||
          "border-color": 'rgba(0, 59, 115, 1)',
 | 
			
		||||
          "color": 'rgba(255, 255, 255, 1)'
 | 
			
		||||
        };
 | 
			
		||||
        return {
 | 
			
		||||
          "background-color": this.theme,
 | 
			
		||||
          "border-color": this.theme
 | 
			
		||||
        };
 | 
			
		||||
      } else {
 | 
			
		||||
        if (!this.isActive(tag)) return {};
 | 
			
		||||
        return {
 | 
			
		||||
          "background-color": this.theme,
 | 
			
		||||
          "border-color": this.theme
 | 
			
		||||
        };
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    isAffix(tag) {
 | 
			
		||||
      return tag.meta && tag.meta.affix
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
 | 
			
		||||
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
 | 
			
		||||
    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
 | 
			
		||||
    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
 | 
			
		||||
    <div ref="mainContainer" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
 | 
			
		||||
      <div :class="{ 'fixed-header': fixedHeader }">
 | 
			
		||||
        <navbar />
 | 
			
		||||
        <tags-view v-if="needTagsView" />
 | 
			
		||||
@@ -59,19 +59,14 @@ export default {
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    // changeColor(val) {
 | 
			
		||||
    //   if (val == true) {
 | 
			
		||||
    //     var tag = document.getElementsByClassName("main-container")
 | 
			
		||||
    //     console.log('tag', tag);
 | 
			
		||||
    //     tag.style.backgroundColor = 'rgba(0, 21, 41, 1)'
 | 
			
		||||
    //   } else {
 | 
			
		||||
    //     var tag = document.getElementsByClassName("main-container")
 | 
			
		||||
    //     // for (let i in tag) {
 | 
			
		||||
    //     tag.style.backgroundColor = ''
 | 
			
		||||
    //       // tag[i].classList.add("default")
 | 
			
		||||
    //     // }
 | 
			
		||||
    //   }
 | 
			
		||||
    // },
 | 
			
		||||
    changeColor(val) {
 | 
			
		||||
      if (val == true) {
 | 
			
		||||
        console.log('this.$refs.mainContainer', this.$refs.mainContainer);
 | 
			
		||||
        this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$refs.mainContainer.style.backgroundColor = ''
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    handleClickOutside() {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2023-11-06 15:15:30
 | 
			
		||||
 * @LastEditTime: 2024-07-05 09:31:40
 | 
			
		||||
 * @LastEditTime: 2024-07-05 15:16:01
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -78,49 +78,51 @@
 | 
			
		||||
            dataForm.endDate[2] : '' }}</p>
 | 
			
		||||
        </el-col>
 | 
			
		||||
      </el-row>
 | 
			
		||||
      <div style="width: 100%; padding: 0 32px">
 | 
			
		||||
        <el-divider style="margin: 0"></el-divider>
 | 
			
		||||
      <div v-loading="loading">
 | 
			
		||||
        <div style="width: 100%; padding: 0 32px">
 | 
			
		||||
          <el-divider style="margin: 0"></el-divider>
 | 
			
		||||
        </div>
 | 
			
		||||
        <el-row :gutter="0" style="margin: 20px 32px">
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <div>
 | 
			
		||||
              <small-title slot="title" :no-padding="true">
 | 
			
		||||
                产品良率
 | 
			
		||||
              </small-title>
 | 
			
		||||
              <div ref="pie" :style="{ height: '40vh', width: '100%' }" />
 | 
			
		||||
            </div>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="16">
 | 
			
		||||
            <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
 | 
			
		||||
              <small-title slot="title" :no-padding="true">
 | 
			
		||||
                待制品分布
 | 
			
		||||
              </small-title>
 | 
			
		||||
              <div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
 | 
			
		||||
            </div>
 | 
			
		||||
          </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
        <div style="width: 100%; padding: 0 32px">
 | 
			
		||||
          <el-divider style="margin: 0"></el-divider>
 | 
			
		||||
        </div>
 | 
			
		||||
        <el-row :gutter="0" style="margin: 20px 32px">
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <div>
 | 
			
		||||
              <small-title slot="title" :no-padding="true">
 | 
			
		||||
                生产明细
 | 
			
		||||
              </small-title>
 | 
			
		||||
              <div ref="bar" :style="{ height: '40vh', width: '100%' }" />
 | 
			
		||||
            </div>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="16">
 | 
			
		||||
            <div v-show="dataForm.orderStatus === 2"
 | 
			
		||||
              style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
 | 
			
		||||
              <small-title slot="title" :no-padding="true">
 | 
			
		||||
                历史趋势
 | 
			
		||||
              </small-title>
 | 
			
		||||
              <div ref="line" :style="{ height: '40vh', width: '50vw' }" />
 | 
			
		||||
            </div>
 | 
			
		||||
          </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
      </div>
 | 
			
		||||
      <el-row :gutter="0" style="margin: 20px 32px">
 | 
			
		||||
        <el-col :span="8">
 | 
			
		||||
          <div>
 | 
			
		||||
            <small-title slot="title" :no-padding="true">
 | 
			
		||||
              产品良率
 | 
			
		||||
            </small-title>
 | 
			
		||||
            <div ref="pie" :style="{ height: '40vh', width: '100%' }" />
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-col>
 | 
			
		||||
        <el-col :span="16">
 | 
			
		||||
          <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
 | 
			
		||||
            <small-title slot="title" :no-padding="true">
 | 
			
		||||
              待制品分布
 | 
			
		||||
            </small-title>
 | 
			
		||||
            <div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-col>
 | 
			
		||||
      </el-row>
 | 
			
		||||
      <div style="width: 100%; padding: 0 32px">
 | 
			
		||||
        <el-divider style="margin: 0"></el-divider>
 | 
			
		||||
      </div>
 | 
			
		||||
      <el-row :gutter="0" style="margin: 20px 32px">
 | 
			
		||||
        <el-col :span="8">
 | 
			
		||||
          <div>
 | 
			
		||||
            <small-title slot="title" :no-padding="true">
 | 
			
		||||
              生产明细
 | 
			
		||||
            </small-title>
 | 
			
		||||
            <div ref="bar" :style="{ height: '40vh', width: '100%' }" />
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-col>
 | 
			
		||||
        <el-col :span="16">
 | 
			
		||||
          <div v-show="dataForm.orderStatus === 2"
 | 
			
		||||
            style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
 | 
			
		||||
            <small-title slot="title" :no-padding="true">
 | 
			
		||||
              历史趋势
 | 
			
		||||
            </small-title>
 | 
			
		||||
            <div ref="line" :style="{ height: '40vh', width: '50vw' }" />
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-col>
 | 
			
		||||
      </el-row>
 | 
			
		||||
    </div>
 | 
			
		||||
  </el-drawer>
 | 
			
		||||
 | 
			
		||||
@@ -154,6 +156,7 @@ export default {
 | 
			
		||||
      barChart: null,
 | 
			
		||||
      equipmentLineChart: null,
 | 
			
		||||
      visible: false,
 | 
			
		||||
      loading:true,
 | 
			
		||||
      dataForm: {},
 | 
			
		||||
      colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
 | 
			
		||||
    }
 | 
			
		||||
@@ -206,6 +209,7 @@ export default {
 | 
			
		||||
      if (id) {
 | 
			
		||||
        getWorkOrderDetail(id).then(res => {
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            this.loading = false
 | 
			
		||||
            this.dataForm = res.data.prodWorkOrderDO
 | 
			
		||||
            this.buildChart(this.dataForm)
 | 
			
		||||
            // 在制品
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user