| | |
| | | <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="back"> |
| | | </div> |
| | | <div class="title">DM云工厂车间大屏</div> |
| | | |
| | | <div class="title">{{ title }}</div> |
| | | <div class="header-item right"> |
| | | |
| | | <img v-if="!isFull" src="@/assets/img/ic_fullscreen@2x.png" class="full-ic" @click="fullChange"> |
| | |
| | | <!-- <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, ref, 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 title = computed(() => { |
| | | return enterprise.procedureName ? `${enterprise.procedureName}工序数据看板` : 'DM云工厂车间大屏' |
| | | }) |
| | | const data = reactive({ |
| | | tempCom: { name: '豆米科技' }, |
| | | isFull: false, |
| | |
| | | date: '', |
| | | day: '' |
| | | }, |
| | | comList: [] |
| | | comList: [], |
| | | countList: [ |
| | | ingNum||0, |
| | | delayNum||0, |
| | | prouserNum||0, |
| | | deviceNum||0, |
| | | unqualifiedRate||0 |
| | | ] |
| | | }) |
| | | |
| | | let { tempCom, isFull, tempDate, comList } = toRefs(data) |
| | | |
| | | |
| | | 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 => { |
| | | data.comList = res |
| | | data.tempCom = res[0] |
| | | enterprise.setDepartId(data.tempCom.id) |
| | | }) |
| | | .catch(err => {}) |
| | | const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',] |
| | | const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] |
| | | setInterval(() => { |
| | | let date = new Date() |
| | | data.tempDate = { |
| | |
| | | } |
| | | }, 1000) |
| | | // console.log(date.getDay()); |
| | | |
| | | |
| | | }) |
| | | const back = () => { |
| | | enterprise.setProcedureName('') |
| | | router.go(-1) |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content { |
| | | background-image: url('@/assets/img/bg@2x.png'); |
| | | background-image: url('@/assets/img/bg.png'); |
| | | background-position: center; |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | // width: 1920px; |
| | | // height: 1080px; |
| | | 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'); |