|  |  | 
 |  |  |   <div class="content"> | 
 |  |  |     <div class="header"> | 
 |  |  |       <div class="header-item" style="font-size: 20px;"> | 
 |  |  |         <el-dropdown trigger="click"> | 
 |  |  |         <el-dropdown trigger="click" v-if="route.name=='home'"> | 
 |  |  |           <div class="eare-title"> | 
 |  |  |             {{ tempCom.name}} | 
 |  |  |             <div class="right-icon"> | 
 |  |  | 
 |  |  |             </el-dropdown-menu> | 
 |  |  |           </template> | 
 |  |  |         </el-dropdown> | 
 |  |  |        | 
 |  |  |  | 
 |  |  |         <img v-else src="@/assets/img/btn_back@2x.png" style="width: 108px;height: 34px; margin-top: 14px;" @click="router.go(-1)"> | 
 |  |  |       </div> | 
 |  |  |        | 
 |  |  |       <div class="title">DM云工厂车间大屏</div> | 
 |  |  |       <div class="header-item right"> | 
 |  |  |  | 
 |  |  | 
 |  |  |           <div class="time">{{ tempDate.time }}</div> | 
 |  |  |           <div class="day">{{ `${tempDate.date} ${tempDate.day}` }}</div> | 
 |  |  |         </div> | 
 |  |  |         <img src="@/assets/img/title_line@2x.png" class="right-line" alt=""> | 
 |  |  |         <!-- <img src="@/assets/img/title_line@2x.png" class="right-line" alt=""> --> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <!-- 'background': `url(${getAssets(item.bgImg)})`, --> | 
 |  |  |     <div class="num-list"> | 
 |  |  |       <div | 
 |  |  |         v-for="(item, index) in layoutList" | 
 |  |  | 
 |  |  |         <img :src="getAssets(item.logo)" alt=""> | 
 |  |  |         <div class="item-right"> | 
 |  |  |           <div class="item-title">{{ item.name }}</div> | 
 |  |  |           <div class="num-value">1</div> | 
 |  |  |           <div class="num-value">{{ countList[index] }}</div> | 
 |  |  |         </div> | 
 |  |  |          | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <RouterView /> | 
 |  |  |     <KeepAlive> | 
 |  |  |       <router-view></router-view> | 
 |  |  |     </KeepAlive> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  | import { getAssets } from '@/utils' | 
 |  |  | import { getDepartmentList } from '@/utils/apis.js' | 
 |  |  | import { reactive, toRefs, onMounted } from 'vue'; | 
 |  |  | import { RouterView } from 'vue-router' | 
 |  |  |  | 
 |  |  | import { getDepartmentList } from '@/utils/api.js' | 
 |  |  | import { reactive, toRefs, onMounted, computed } from 'vue'; | 
 |  |  | import { useCounterStore } from '@/stores/counter.js' | 
 |  |  | import { useRoute, useRouter } from 'vue-router' | 
 |  |  | const enterprise = useCounterStore() | 
 |  |  | const route = useRoute() | 
 |  |  | const router = useRouter() | 
 |  |  | const layoutList = [ | 
 |  |  |   { bgImg: 'bg_zhixingzhong@2x.png', name: '执行中计划数(个)', logo: 'ic_zhixingzhong@2x.png' }, | 
 |  |  |   { bgImg: 'bg_yanqijihua@2x.png', name: '延期计划数(个)', logo: 'ic_yanqijihua@2x.png' }, | 
 |  |  | 
 |  |  |   { bgImg: 'bg_jinrishebei@2x.png', name: '今日生产设备(台)', logo: 'ic_jinrishebei@2x.png' }, | 
 |  |  |   { bgImg: 'bg_jinribuliang@2x.png', name: '今日不良品率(%)', logo: 'ic_jinribuliang@2x.png' }, | 
 |  |  | ] | 
 |  |  | const ingNum = computed(() => { | 
 |  |  |     return enterprise.ingNum | 
 |  |  | }) | 
 |  |  | const delayNum = computed(() => { | 
 |  |  |     return enterprise.delayNum | 
 |  |  | }) | 
 |  |  | const prouserNum = computed(() => { | 
 |  |  |     return enterprise.prouserNum | 
 |  |  | }) | 
 |  |  | const deviceNum = computed(() => { | 
 |  |  |     return enterprise.deviceNum | 
 |  |  | }) | 
 |  |  | const unqualifiedRate = computed(() => { | 
 |  |  |     return enterprise.unqualifiedRate | 
 |  |  | }) | 
 |  |  |  | 
 |  |  | const data = reactive({ | 
 |  |  |   tempCom: { name: '豆米科技' }, | 
 |  |  |   isFull: false, | 
 |  |  | 
 |  |  |     time: '', | 
 |  |  |     date: '', | 
 |  |  |     day: '' | 
 |  |  |   } | 
 |  |  |   }, | 
 |  |  |   comList: [], | 
 |  |  |   countList: [ | 
 |  |  |     ingNum||0, | 
 |  |  |     delayNum||0, | 
 |  |  |     prouserNum||0, | 
 |  |  |     deviceNum||0, | 
 |  |  |     unqualifiedRate||0 | 
 |  |  |   ] | 
 |  |  | }) | 
 |  |  |  | 
 |  |  | let { tempCom, isFull, tempDate } = toRefs(data) | 
 |  |  |  | 
 |  |  | const comList = reactive([]) | 
 |  |  |  | 
 |  |  | let { tempCom, isFull, tempDate, comList, countList } = toRefs(data) | 
 |  |  |  | 
 |  |  | const selectCom = (item, index) => { | 
 |  |  |   data.tempCom = item | 
 |  |  |   enterprise.setDepartId(data.tempCom.id) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const fullChange = () => { | 
 |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  | onMounted(() => { | 
 |  |  |   getDepartmentList(8) | 
 |  |  |   getDepartmentList(enterprise.companyId) | 
 |  |  |     .then(res => { | 
 |  |  |       debugger | 
 |  |  |       comList = res | 
 |  |  |        | 
 |  |  |       data.comList = res | 
 |  |  |       data.tempCom = res[0] | 
 |  |  |       console.log(data.tempCom); | 
 |  |  |       enterprise.setDepartId(data.tempCom.id) | 
 |  |  |     }) | 
 |  |  |     .catch(err => {}) | 
 |  |  |   const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',] | 
 |  |  | 
 |  |  |   background-position: center; | 
 |  |  |   background-size: 100% 100%; | 
 |  |  |   background-repeat: no-repeat; | 
 |  |  |   width: 100%; | 
 |  |  |   height: 100%; | 
 |  |  |   // width: 100%; | 
 |  |  |   // height: 100%; | 
 |  |  |   padding: 30px; | 
 |  |  |   overflow-y: scroll; | 
 |  |  |   // overflow-y: scroll; | 
 |  |  |   box-sizing: border-box; | 
 |  |  |   .header { | 
 |  |  |     background-image: url('@/assets/img/bg_maintitle@2x.png'); |