Teams/shanghaigangxiangtuzhuangVUE
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加 vue-echarts echarts 等相关包

Browse Source
This commit is contained in:
赵正易
2024-05-16 13:18:06 +08:00
parent cdd06e8983
commit b6313d085d
5 changed files with 186 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -23,6 +23,7 @@
"@jiaminghi/data-view": "^2.10.0",
"@microsoft/signalr": "^6.0.23",
"@riophae/vue-treeselect": "0.4.0",
"@vue/composition-api": "^1.7.2",
"af-table-column": "^1.0.3",
"animate.css": "^4.1.1",
"axios": "^0.21.4",
@@ -56,6 +57,7 @@
"vue-count-to": "1.0.13",
"vue-cropper": "0.4.9",
"vue-easytable": "^2.27.1",
"vue-echarts": "^6.7.2",
"vue-qr": "^4.0.9",
"vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23",

5
src/main.js
View File

@@ -41,9 +41,9 @@ import DictData from '@/components/DictData';
// 二维码与打印组件相关 KrPrintDesigner+VueQr
import VueQr from 'vue-qr'
import printJS from 'print-js'
// echarts
// echarts相关插件引入
import * as echarts from 'echarts';
import ECharts from 'vue-echarts'
// VXE-Table相关组件
import VXETable from 'vxe-table';
@@ -90,6 +90,7 @@ Vue.component('Editor', Editor)
Vue.component('UploadImage', UploadImage)
Vue.component('UploadFile', UploadFile)
Vue.component('VueQr', VueQr)
Vue.component('v-charts', ECharts)
// Vue.use(printJS);
Vue.use(permission)
Vue.use(plugins)

2
src/views/wmsManagement/WmpatchSearch.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- <el-tab-pane label="仓库数据总看板" name="1"><TAB1 v-if="activeName === '1'"></TAB1></el-tab-pane> -->
<el-tab-pane label="仓库数据总看板" name="1"><TAB1 v-if="activeName === '1'"></TAB1></el-tab-pane>
<el-tab-pane label="入库记录根据批次号" name="2"><TAB2 v-if="activeName === '2'"></TAB2></el-tab-pane>
<el-tab-pane label="入库记录根据零件号" name="3"><TAB3 v-if="activeName === '3'"></TAB3></el-tab-pane>
<el-tab-pane label="出库记录根据批次号" name="4"><TAB4 v-if="activeName === '4'"></TAB4></el-tab-pane>

90
src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.css Normal file
View File

@@ -0,0 +1,90 @@
.border {
border: 1px solid #0055ff;
}
/* 主背景框 */
.container{
margin: 0;
padding: 0;
width: 100%;
height: 800px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* 排序 */
.flex-row{
display: flex;
flex-direction: row;
}
.flex-column{
display: flex;
flex-direction: column;
}
/* 区域组件样式 */
/* 边框适配 */
.box-padding-10{
padding: 10px;
}
.box-padding-20{
padding: 20px;
}
/* 大屏背景色 */
.main-background-color{
background-color: #1D282F;
}
/* 组件背景色 */
.template-background-color{
background-color: #121F2A;
}
/* 文字颜色 */
.text-t1{
color: #ffffff;
}
.text-t2{
color: #f4f6f9;
}
.text-t3{
color: #8CA386;
}
/* 主要颜色 */
.main-color{
/* #44A9EB */
/* #2D9BF8 */
/* #44EBEA */
/* #EFBB65 */
/* #8FB2C9 */
}
/* 状态颜色 */
.type-color{
/* #E27878 */
/* #44EBEA */
/* #EFBB65 */
/* #7E8B90 */
}
/* 头部 */
.header-out-box {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.main-out-box{
padding: 20px;
width: 100%;
height: 100%;
}
/* 图表常用样式 */
.chart-out-box {
width: 100%;
height: 340px;
padding: 10px;
}
.chart-box1 {
width: 480px;
height: 380px;
}
.number-box{
width: 100%;
height: 33%;
}

92
src/views/wmsManagement/components/TheWmBatchSearch/仓库数据总看板/index.vue
View File

@@ -1,9 +1,97 @@
<template>
<div>仓库数据总看板</div>
<div class="container main-background-color">
<dv-border-box-11 title="仓库数据总看板">
<div class="header-out-box">
<!-- <dv-decoration-1 style="width:200px;height:50px;" /> -->
</div>
<div class="main-out-box">
<!-- 第一层 -->
<el-row type="flex" justify="space-around">
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-8 class="chart-out-box">
<dv-border-box-7>
<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
</dv-border-box-7>
</dv-border-box-8>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
</dv-border-box-13>
</el-col>
</el-row>
<!-- 第二层 -->
<el-row type="flex" justify="space-around">
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
</dv-border-box-13>
</el-col>
</el-row>
</div>
</dv-border-box-11>
<!-- <dv-border-box-1 >
<v-charts class="chart-box1 border" :loading="loading1" :option="options1" />
</dv-border-box-1>
<dv-loading>Loading...</dv-loading> -->
</div>
</template>
<script>
export default {
name: 'PatchSearch1',
data() {
return {
loading1: false,
title: '看板标题',
options1: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
}
},
created() {},
methods: {
}
}
</script>
<style>
<style scoped>
@import url("index.css");
</style>