|
|
@@ -33,530 +33,514 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="box-container-footer" >
|
|
|
- <div class="box-container-title" >
|
|
|
- 托盘实时情况
|
|
|
- </div>
|
|
|
- <div class="box-middle">
|
|
|
- <template v-for="item in borderData">
|
|
|
- <div class="box-middle-content">
|
|
|
- <div class="box-content">
|
|
|
- <div class="box-top">
|
|
|
- <span class="box-top-name">{{ item.titleName }}</span>
|
|
|
- <span class="box-top-unit">{{ item.titleUnit }}</span>
|
|
|
- </div>
|
|
|
- <div class="box-footer">
|
|
|
- <span class="box-footer-value">{{ item.value }}</span>
|
|
|
- </div>
|
|
|
+ <div class="box-container-footer">
|
|
|
+ <div class="box-container-title"> 托盘实时情况 </div>
|
|
|
+ <div class="box-middle">
|
|
|
+ <template v-for="item in borderData">
|
|
|
+ <div class="box-middle-content">
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-top">
|
|
|
+ <span class="box-top-name">{{ item.titleName }}</span>
|
|
|
+ <span class="box-top-unit">{{ item.titleUnit }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-footer">
|
|
|
+ <span class="box-footer-value">{{ item.value }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="box-footer">
|
|
|
- <div class="box-footer-col">
|
|
|
- <div class="box-echarts-top">
|
|
|
- <span class="box-top-name">项目名称</span>
|
|
|
- </div>
|
|
|
- <dv-scroll-board
|
|
|
- :config="config"
|
|
|
- style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
- />
|
|
|
</div>
|
|
|
- <div class="box-footer-col">
|
|
|
- <div class="box-echarts-top">
|
|
|
- <span class="box-top-name">托盘发货数量</span>
|
|
|
- </div>
|
|
|
- <dv-scroll-board
|
|
|
- :config="config"
|
|
|
- style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
- />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="box-footer">
|
|
|
+ <div class="box-footer-col">
|
|
|
+ <div class="box-echarts-top">
|
|
|
+ <span class="box-top-name">项目名称</span>
|
|
|
</div>
|
|
|
- <div class="box-footer-col">
|
|
|
- <div class="box-echarts-top">
|
|
|
- <span class="box-top-name">托盘回收数量</span>
|
|
|
- </div>
|
|
|
- <dv-scroll-board
|
|
|
- :config="config"
|
|
|
- style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
- />
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="{...config,data:config.data.map(item=>[item.projectName])}"
|
|
|
+ style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="box-footer-col">
|
|
|
+ <div class="box-echarts-top">
|
|
|
+ <span class="box-top-name">托盘发货数量</span>
|
|
|
</div>
|
|
|
- <div class="box-footer-col">
|
|
|
- <div class="box-echarts-top">
|
|
|
- <span class="box-top-name">托盘未回数量</span>
|
|
|
- </div>
|
|
|
- <dv-scroll-board
|
|
|
- :config="config"
|
|
|
- style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
- />
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="{...config,data:config.data.map(item=>[item.sendTotalCount])}"
|
|
|
+ style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="box-footer-col">
|
|
|
+ <div class="box-echarts-top">
|
|
|
+ <span class="box-top-name">托盘回收数量</span>
|
|
|
+ </div>
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="{...config,data:config.data.map(item=>[item.receiveTotalCount])}"
|
|
|
+ style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="box-footer-col">
|
|
|
+ <div class="box-echarts-top">
|
|
|
+ <span class="box-top-name">托盘未回数量</span>
|
|
|
</div>
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="{...config,data:config.data.map(item=>[item.noReceiveTotalCount])}"
|
|
|
+ style="width: 90%; height: 87%; transform: translate(5%, 1%)"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</vue-fullscreen>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import dvBorderContent from './dv-border-content.vue';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import { component } from 'vue-fullscreen';
|
|
|
-import {
|
|
|
- } from '@/api/bpm/visPage';
|
|
|
-export default {
|
|
|
- name: 'index6',
|
|
|
- components: {
|
|
|
- dvBorderContent,
|
|
|
- VueFullscreen: component
|
|
|
- },
|
|
|
- computed: {
|
|
|
- contentWidth() {
|
|
|
- return this.$store.state.theme.contentWidth;
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- isFullscreen: {
|
|
|
- handler() {
|
|
|
- this.isFlag = false;
|
|
|
- this.$nextTick(() => {
|
|
|
- let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
|
|
|
- document.documentElement;
|
|
|
- let eleAdminHeaderHeight =
|
|
|
- (!this.isFullscreen &&
|
|
|
- document.getElementsByClassName('ele-admin-header')[0]
|
|
|
- ?.offsetHeight) ||
|
|
|
- 0;
|
|
|
- let eleAdminSidebarWidth =
|
|
|
- (!this.isFullscreen &&
|
|
|
- document.getElementsByClassName('ele-admin-sidebar')[0]
|
|
|
- ?.offsetWidth) ||
|
|
|
- 0;
|
|
|
- let eleAdminTabsWidth =
|
|
|
- (!this.isFullscreen &&
|
|
|
- document.getElementsByClassName('ele-admin-tabs')[0]
|
|
|
- ?.offsetHeight) ||
|
|
|
- 0;
|
|
|
+ import dvBorderContent from './dv-border-content.vue';
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import { component } from 'vue-fullscreen';
|
|
|
+ import { trayGroupVO } from '@/api/vis/index';
|
|
|
+ export default {
|
|
|
+ name: 'index6',
|
|
|
+ components: {
|
|
|
+ dvBorderContent,
|
|
|
+ VueFullscreen: component
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ contentWidth() {
|
|
|
+ return this.$store.state.theme.contentWidth;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isFullscreen: {
|
|
|
+ handler() {
|
|
|
+ this.isFlag = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
|
|
|
+ document.documentElement;
|
|
|
+ let eleAdminHeaderHeight =
|
|
|
+ (!this.isFullscreen &&
|
|
|
+ document.getElementsByClassName('ele-admin-header')[0]
|
|
|
+ ?.offsetHeight) ||
|
|
|
+ 0;
|
|
|
+ let eleAdminSidebarWidth =
|
|
|
+ (!this.isFullscreen &&
|
|
|
+ document.getElementsByClassName('ele-admin-sidebar')[0]
|
|
|
+ ?.offsetWidth) ||
|
|
|
+ 0;
|
|
|
+ let eleAdminTabsWidth =
|
|
|
+ (!this.isFullscreen &&
|
|
|
+ document.getElementsByClassName('ele-admin-tabs')[0]
|
|
|
+ ?.offsetHeight) ||
|
|
|
+ 0;
|
|
|
|
|
|
- const setContainerSize = (item) => {
|
|
|
- item.style.height =
|
|
|
- deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
|
|
|
- item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
|
|
|
- };
|
|
|
- let boxContainer = [
|
|
|
- ...document.getElementsByClassName('box-container')
|
|
|
- ];
|
|
|
- boxContainer.forEach(setContainerSize);
|
|
|
+ const setContainerSize = (item) => {
|
|
|
+ item.style.height =
|
|
|
+ deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
|
|
|
+ item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
|
|
|
+ };
|
|
|
+ let boxContainer = [
|
|
|
+ ...document.getElementsByClassName('box-container')
|
|
|
+ ];
|
|
|
+ boxContainer.forEach(setContainerSize);
|
|
|
|
|
|
- document.documentElement.style.fontSize = this.isFullscreen
|
|
|
- ? '24px'
|
|
|
- : '16px';
|
|
|
- this.isFlag = true;
|
|
|
+ document.documentElement.style.fontSize = this.isFullscreen
|
|
|
+ ? '24px'
|
|
|
+ : '16px';
|
|
|
+ this.isFlag = true;
|
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
+ this.$nextTick(() => {});
|
|
|
});
|
|
|
- });
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
},
|
|
|
- immediate: true
|
|
|
- },
|
|
|
- contentWidth: {
|
|
|
- handler() {
|
|
|
- this.isFlag = false;
|
|
|
- this.$nextTick(() => {
|
|
|
- let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
|
|
|
- document.documentElement;
|
|
|
- let eleAdminHeaderHeight =
|
|
|
- (!this.isFullscreen &&
|
|
|
- document.getElementsByClassName('ele-admin-header')[0]
|
|
|
- ?.offsetHeight) ||
|
|
|
- 0;
|
|
|
- let eleAdminSidebarWidth =
|
|
|
- (!this.isFullscreen &&
|
|
|
- document.getElementsByClassName('ele-admin-sidebar')[0]
|
|
|
- ?.offsetWidth) ||
|
|
|
- 0;
|
|
|
- let eleAdminTabsWidth =
|
|
|
- (!this.isFullscreen &&
|
|
|
- document.getElementsByClassName('ele-admin-tabs')[0]
|
|
|
- ?.offsetHeight) ||
|
|
|
- 0;
|
|
|
- const setContainerSize = (item) => {
|
|
|
- item.style.height =
|
|
|
- deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
|
|
|
- item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
|
|
|
- };
|
|
|
- let boxContainer = [
|
|
|
- ...document.getElementsByClassName('box-container')
|
|
|
- ];
|
|
|
- boxContainer.forEach(setContainerSize);
|
|
|
- document.documentElement.style.fontSize = this.isFullscreen
|
|
|
- ? '24px'
|
|
|
- : '16px';
|
|
|
- this.isFlag = true;
|
|
|
+ contentWidth: {
|
|
|
+ handler() {
|
|
|
+ this.isFlag = false;
|
|
|
this.$nextTick(() => {
|
|
|
+ let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
|
|
|
+ document.documentElement;
|
|
|
+ let eleAdminHeaderHeight =
|
|
|
+ (!this.isFullscreen &&
|
|
|
+ document.getElementsByClassName('ele-admin-header')[0]
|
|
|
+ ?.offsetHeight) ||
|
|
|
+ 0;
|
|
|
+ let eleAdminSidebarWidth =
|
|
|
+ (!this.isFullscreen &&
|
|
|
+ document.getElementsByClassName('ele-admin-sidebar')[0]
|
|
|
+ ?.offsetWidth) ||
|
|
|
+ 0;
|
|
|
+ let eleAdminTabsWidth =
|
|
|
+ (!this.isFullscreen &&
|
|
|
+ document.getElementsByClassName('ele-admin-tabs')[0]
|
|
|
+ ?.offsetHeight) ||
|
|
|
+ 0;
|
|
|
+ const setContainerSize = (item) => {
|
|
|
+ item.style.height =
|
|
|
+ deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
|
|
|
+ item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
|
|
|
+ };
|
|
|
+ let boxContainer = [
|
|
|
+ ...document.getElementsByClassName('box-container')
|
|
|
+ ];
|
|
|
+ boxContainer.forEach(setContainerSize);
|
|
|
+ document.documentElement.style.fontSize = this.isFullscreen
|
|
|
+ ? '24px'
|
|
|
+ : '16px';
|
|
|
+ this.isFlag = true;
|
|
|
+ this.$nextTick(() => {});
|
|
|
});
|
|
|
- });
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- deactivated() {
|
|
|
- clearInterval(this.updateTimer);
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isFullscreen: false, // 是否是全屏
|
|
|
- isFlag: false, // 是否展示图表
|
|
|
- date: '',
|
|
|
- time: '',
|
|
|
- week: '',
|
|
|
- signedTotal: 0,
|
|
|
- deliveryTotal: 0,
|
|
|
- salesTotal: 0,
|
|
|
- WeightGainTotal: 0,
|
|
|
- WeightStorageTotal: 0,
|
|
|
- salesChart: null,
|
|
|
- outputChart: null,
|
|
|
- borderData: [
|
|
|
- {
|
|
|
- titleName: '托盘发货数量',
|
|
|
- value: '0',
|
|
|
- },
|
|
|
- {
|
|
|
- titleName: '托盘回收数量',
|
|
|
- value: '0',
|
|
|
- },
|
|
|
- {
|
|
|
- titleName: '托盘未回数量',
|
|
|
- value: '0',
|
|
|
},
|
|
|
- {
|
|
|
- titleName: '托盘闲置数量',
|
|
|
- value: '0',
|
|
|
- },
|
|
|
- {
|
|
|
- titleName: '托盘使用数量',
|
|
|
- value: '0',
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deactivated() {
|
|
|
+ clearInterval(this.updateTimer);
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isFullscreen: false, // 是否是全屏
|
|
|
+ isFlag: false, // 是否展示图表
|
|
|
+ date: '',
|
|
|
+ time: '',
|
|
|
+ week: '',
|
|
|
+ signedTotal: 0,
|
|
|
+ deliveryTotal: 0,
|
|
|
+ salesTotal: 0,
|
|
|
+ WeightGainTotal: 0,
|
|
|
+ WeightStorageTotal: 0,
|
|
|
+ salesChart: null,
|
|
|
+ outputChart: null,
|
|
|
+ borderData: [
|
|
|
+ {
|
|
|
+ titleName: '托盘发货数量',
|
|
|
+ value: '0',
|
|
|
+ key: 'sendTotalCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ titleName: '托盘回收数量',
|
|
|
+ value: '0',
|
|
|
+ key: 'receiveTotalCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ titleName: '托盘未回数量',
|
|
|
+ value: '0',
|
|
|
+ key: 'noReceiveTotalCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ titleName: '托盘闲置数量',
|
|
|
+ value: '0',
|
|
|
+ key: 'idleTotalCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ titleName: '托盘使用数量',
|
|
|
+ value: '0',
|
|
|
+ key: 'useTotalCount'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ config: {
|
|
|
+ header: [],
|
|
|
+ data: [],
|
|
|
+ align: ['center', 'center'],
|
|
|
+ headerBGC: '#031d42',
|
|
|
+ oddRowBGC: '#031d42',
|
|
|
+ evenRowBGC: '#031d42',
|
|
|
+ waitTime: 5000,
|
|
|
+ rowNum: 10
|
|
|
}
|
|
|
- ],
|
|
|
- config: {
|
|
|
- header: [],
|
|
|
- data: [
|
|
|
- ['行1列1', '行1列2', ],
|
|
|
- ['行2列1', '行2列2',],
|
|
|
- ['行3列1', '行3列2',],
|
|
|
- ['行4列1', '行4列2',],
|
|
|
- ['行5列1', '行5列2',],
|
|
|
- ['行6列1', '行6列2',],
|
|
|
- ['行7列1', '行7列2',],
|
|
|
- ['行8列1', '行8列2',],
|
|
|
- ['行9列1', '行9列2',],
|
|
|
- ['行10列1', '行10列2',],
|
|
|
- ['行1列1', '行1列2', ],
|
|
|
- ['行2列1', '行2列2',],
|
|
|
- ['行3列1', '行3列2',],
|
|
|
- ['行4列1', '行4列2',],
|
|
|
- ['行5列1', '行5列2',],
|
|
|
- ['行6列1', '行6列2',],
|
|
|
- ['行7列1', '行7列2',],
|
|
|
- ['行8列1', '行8列2',],
|
|
|
- ['行9列1', '行9列2',],
|
|
|
- ['行10列1', '行10列2',]
|
|
|
- ],
|
|
|
- align: ['center', 'center'],
|
|
|
- headerBGC: '#031d42',
|
|
|
- oddRowBGC: '#031d42',
|
|
|
- evenRowBGC: '#031d42',
|
|
|
- waitTime: 5000,
|
|
|
- rowNum: 10
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- window.isFullscreen = false
|
|
|
- this.updateTimer = setInterval(this.updateTime, 1000);
|
|
|
- },
|
|
|
- mounted() {
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ window.isFullscreen = false;
|
|
|
+ this.updateTimer = setInterval(this.updateTime, 1000);
|
|
|
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- /* 全屏切换 */
|
|
|
- onFullscreen() {
|
|
|
- this.isFullscreen = !this.isFullscreen;
|
|
|
+ trayGroupVO().then((res) => {
|
|
|
+ this.borderData.forEach((item,index)=>{
|
|
|
+ this.$set(this.borderData[index],'value',res[this.borderData[index].key])
|
|
|
+ })
|
|
|
+ this.config.data=res.trayProjectListGroup
|
|
|
+
|
|
|
+ });
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ /* 全屏切换 */
|
|
|
+ onFullscreen() {
|
|
|
+ this.isFullscreen = !this.isFullscreen;
|
|
|
+ },
|
|
|
|
|
|
- //实时更新日期
|
|
|
- updateTime() {
|
|
|
- let now = new Date();
|
|
|
- let hours = now.getHours();
|
|
|
- let minutes = now.getMinutes();
|
|
|
- let seconds = now.getSeconds();
|
|
|
- this.time =
|
|
|
- hours.toString().padStart(2, '0') +
|
|
|
- ':' +
|
|
|
- minutes.toString().padStart(2, '0') +
|
|
|
- ':' +
|
|
|
- seconds.toString().padStart(2, '0');
|
|
|
+ //实时更新日期
|
|
|
+ updateTime() {
|
|
|
+ let now = new Date();
|
|
|
+ let hours = now.getHours();
|
|
|
+ let minutes = now.getMinutes();
|
|
|
+ let seconds = now.getSeconds();
|
|
|
+ this.time =
|
|
|
+ hours.toString().padStart(2, '0') +
|
|
|
+ ':' +
|
|
|
+ minutes.toString().padStart(2, '0') +
|
|
|
+ ':' +
|
|
|
+ seconds.toString().padStart(2, '0');
|
|
|
|
|
|
- let year = now.getFullYear();
|
|
|
- let month = now.getMonth() + 1;
|
|
|
- let day = now.getDate();
|
|
|
- this.date = year + '年' + month + '月' + day + '日';
|
|
|
+ let year = now.getFullYear();
|
|
|
+ let month = now.getMonth() + 1;
|
|
|
+ let day = now.getDate();
|
|
|
+ this.date = year + '年' + month + '月' + day + '日';
|
|
|
|
|
|
- let weekInfo = {
|
|
|
- 1: '一',
|
|
|
- 2: '二',
|
|
|
- 3: '三',
|
|
|
- 4: '四',
|
|
|
- 5: '五',
|
|
|
- 6: '六',
|
|
|
- 0: '日'
|
|
|
- };
|
|
|
- this.week = '星期' + weekInfo[now.getDay()];
|
|
|
+ let weekInfo = {
|
|
|
+ 1: '一',
|
|
|
+ 2: '二',
|
|
|
+ 3: '三',
|
|
|
+ 4: '四',
|
|
|
+ 5: '五',
|
|
|
+ 6: '六',
|
|
|
+ 0: '日'
|
|
|
+ };
|
|
|
+ this.week = '星期' + weekInfo[now.getDay()];
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.box-container {
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'AlibabaPuHuiTi';
|
|
|
-
|
|
|
- background: #080848;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .box-container-footer {
|
|
|
- width: 98%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #041355;
|
|
|
- border-radius: 5px;
|
|
|
- background-color: #051256;
|
|
|
- .box-container-title {
|
|
|
- width: 100%;
|
|
|
- height: 5%;
|
|
|
- background-color: #012b83;
|
|
|
- border-top-left-radius: 5px;
|
|
|
- border-top-right-radius: 5px;
|
|
|
- color: #32c5e1;
|
|
|
- font-size: 1.4rem;
|
|
|
- font-weight: bold;
|
|
|
- padding-left: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-header {
|
|
|
- background-image: url('@/assets/border2.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- width: 100% !important;
|
|
|
- height: 10%;
|
|
|
- justify-content: space-between;
|
|
|
- .title {
|
|
|
- font-family: '优设标题黑';
|
|
|
- font-size: 2.75rem;
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- transform: translateY(-10%);
|
|
|
- letter-spacing: 0.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- display: inline-block;
|
|
|
- width: 20%;
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- width: 20%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: flex-start;
|
|
|
- font-size: 0.8rem;
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-container {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'AlibabaPuHuiTi';
|
|
|
|
|
|
- .box-middle {
|
|
|
- // width: 100% !important;
|
|
|
- height: 10% !important;
|
|
|
+ background: #080848;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 5px 0 40px 0;
|
|
|
- padding: 0 10px 0 10px;
|
|
|
- .box-middle-content {
|
|
|
- width: 15%;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .box-container-footer {
|
|
|
+ width: 98%;
|
|
|
height: 100%;
|
|
|
- background-color: #031a64;
|
|
|
- // background-image: url('@/assets/border1.png');
|
|
|
+ border: 1px solid #041355;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #051256;
|
|
|
+ .box-container-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 5%;
|
|
|
+ background-color: #012b83;
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ color: #32c5e1;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-left: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-header {
|
|
|
+ background-image: url('@/assets/border2.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- margin-top: 10px;
|
|
|
- border: 1px solid #043472;
|
|
|
- border-radius: 4px;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- .box-content {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- color: #ffffff;
|
|
|
-
|
|
|
- .box-top {
|
|
|
- width: 100%;
|
|
|
- height: 17%;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 10%;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title {
|
|
|
+ font-family: '优设标题黑';
|
|
|
+ font-size: 2.75rem;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- align-items: flex-end;
|
|
|
- .box-top-name {
|
|
|
- display: inline-block;
|
|
|
- font-size: 0.8rem;
|
|
|
- letter-spacing: 2px;
|
|
|
- font-weight: bold;
|
|
|
- color: rgb(50, 197, 225);
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ transform: translateY(-10%);
|
|
|
+ letter-spacing: 0.4rem;
|
|
|
+ }
|
|
|
|
|
|
- .box-top-unit {
|
|
|
- display: inline-block;
|
|
|
- font-size: 0.55rem;
|
|
|
- transform: translate(0px, -30%);
|
|
|
- letter-spacing: 1px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .logo {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20%;
|
|
|
}
|
|
|
|
|
|
- .box-footer {
|
|
|
- flex: 1;
|
|
|
+ .time {
|
|
|
+ width: 20%;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- .box-footer-value {
|
|
|
- font-family: 'LCD2B';
|
|
|
- display: inline-block;
|
|
|
- font-size: 2rem;
|
|
|
- }
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 0.8rem;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .box-footer {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 10px 0 10px;
|
|
|
- height: 78%;
|
|
|
- .box-footer-left {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- .box-echarts {
|
|
|
+ .box-middle {
|
|
|
+ // width: 100% !important;
|
|
|
+ height: 10% !important;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 5px 0 40px 0;
|
|
|
+ padding: 0 10px 0 10px;
|
|
|
+ .box-middle-content {
|
|
|
+ width: 15%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #031a64;
|
|
|
+ // background-image: url('@/assets/border1.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid #043472;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .box-content {
|
|
|
width: 100%;
|
|
|
- height: 50%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background-image: url('@/assets/border3.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ color: #ffffff;
|
|
|
|
|
|
- .box-echarts-top {
|
|
|
- height: 20%;
|
|
|
+ .box-top {
|
|
|
width: 100%;
|
|
|
+ height: 17%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- // justify-content: center;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
.box-top-name {
|
|
|
display: inline-block;
|
|
|
- font-size: 1.3rem;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ letter-spacing: 2px;
|
|
|
font-weight: bold;
|
|
|
color: rgb(50, 197, 225);
|
|
|
}
|
|
|
|
|
|
.box-top-unit {
|
|
|
display: inline-block;
|
|
|
- font-size: 0.75rem;
|
|
|
- transform: translate(0px, 20%);
|
|
|
+ font-size: 0.55rem;
|
|
|
+ transform: translate(0px, -30%);
|
|
|
letter-spacing: 1px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .monthly_sales_volume {
|
|
|
- transform: translateX(-7%);
|
|
|
+ .box-footer {
|
|
|
flex: 1;
|
|
|
- //width: 100%;
|
|
|
- //height: 100%;
|
|
|
- #monthly_sales_volume {
|
|
|
- width: 113%;
|
|
|
- height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .box-footer-value {
|
|
|
+ font-family: 'LCD2B';
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 2rem;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .monthly_output {
|
|
|
- transform: translateX(-7%);
|
|
|
- flex: 1;
|
|
|
+ .box-footer {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 10px 0 10px;
|
|
|
+ height: 78%;
|
|
|
+ .box-footer-left {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ .box-echarts {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-image: url('@/assets/border3.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .box-echarts-top {
|
|
|
+ height: 20%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .box-top-name {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgb(50, 197, 225);
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-top-unit {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ transform: translate(0px, 20%);
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- #monthly_output {
|
|
|
- width: 113%;
|
|
|
- height: 100%;
|
|
|
+ .monthly_sales_volume {
|
|
|
+ transform: translateX(-7%);
|
|
|
+ flex: 1;
|
|
|
//width: 100%;
|
|
|
//height: 100%;
|
|
|
+ #monthly_sales_volume {
|
|
|
+ width: 113%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .monthly_output {
|
|
|
+ transform: translateX(-7%);
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ #monthly_output {
|
|
|
+ width: 113%;
|
|
|
+ height: 100%;
|
|
|
+ //width: 100%;
|
|
|
+ //height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .box-footer-col {
|
|
|
- width: 24%;
|
|
|
- height: 100%;
|
|
|
- // background-image: url('@/assets/border4.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-color: #031a64;
|
|
|
+ .box-footer-col {
|
|
|
+ width: 24%;
|
|
|
+ height: 100%;
|
|
|
+ // background-image: url('@/assets/border4.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: #031a64;
|
|
|
|
|
|
- .box-echarts-top {
|
|
|
- height: 10.5%;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 1.1rem;
|
|
|
- letter-spacing: 2px;
|
|
|
- background-color: #002B82;
|
|
|
- .box-top-name {
|
|
|
- display: inline-block;
|
|
|
- font-size: 1.3rem;
|
|
|
- font-weight: bold;
|
|
|
- color: rgb(50, 197, 225);
|
|
|
+ .box-echarts-top {
|
|
|
+ height: 10.5%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ background-color: #002b82;
|
|
|
+ .box-top-name {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgb(50, 197, 225);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-[v-cloak] {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ [v-cloak] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
</style>
|
|
|
<style>
|
|
|
-.white {
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
+ .white {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
-.yellow {
|
|
|
- color: #ffd16c;
|
|
|
-}
|
|
|
+ .yellow {
|
|
|
+ color: #ffd16c;
|
|
|
+ }
|
|
|
|
|
|
-.green {
|
|
|
- color: green;
|
|
|
-}
|
|
|
+ .green {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
|
|
|
-.red {
|
|
|
- color: red;
|
|
|
-}
|
|
|
+ .red {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
</style>
|
