|
|
@@ -0,0 +1,366 @@
|
|
|
+<template>
|
|
|
+ <view class="">
|
|
|
+ <tabTitle
|
|
|
+ :tabList="tabList"
|
|
|
+ @change="tabList_change"
|
|
|
+ :active="pickTabIndex"
|
|
|
+ ></tabTitle>
|
|
|
+ <view class="unit-wrap">
|
|
|
+ <view class="item" @click="pickerOpen">
|
|
|
+ <text>{{ lineCode.name }}</text>
|
|
|
+ <u-icon size="24rpx" class="icon" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="item"> 单位:月 </view>
|
|
|
+ </view>
|
|
|
+ <view class="charts">
|
|
|
+ <canvas
|
|
|
+ class="charts-box"
|
|
|
+ canvas-id="canvasA"
|
|
|
+ id="canvasA"
|
|
|
+ @touchstart="touchstart"
|
|
|
+ @touchmove="touchmove"
|
|
|
+ @touchend="touchend"
|
|
|
+ ></canvas>
|
|
|
+ </view>
|
|
|
+ <u-picker
|
|
|
+ :defaultIndex="defaultIndex()"
|
|
|
+ :show="show"
|
|
|
+ ref="uPicker"
|
|
|
+ :columns="option.lineCode"
|
|
|
+ @close="pickerClose"
|
|
|
+ :closeOnClickOverlay="true"
|
|
|
+ @confirm="pickerConfirm"
|
|
|
+ keyName="name"
|
|
|
+ ></u-picker>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tabTitle from '@/pages/home/components/tabTitle.vue'
|
|
|
+import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts-2.js'
|
|
|
+let uChartsInstance = {}
|
|
|
+import { get } from '@/utils/api.js'
|
|
|
+export default {
|
|
|
+ name: 'TabMain',
|
|
|
+ props: {
|
|
|
+ tabList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ tabTitle
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ lineCode: function (nval) {
|
|
|
+ this.getdata()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ pickTabIndex: 0,
|
|
|
+ cWidth: 710,
|
|
|
+ cHeight: 400,
|
|
|
+ lineCode: { name: '全部产线', code: '' },
|
|
|
+ option: {
|
|
|
+ lineCode: []
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ apiUrl: '',
|
|
|
+ useMock: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted () {
|
|
|
+ // await this.getlineCode()
|
|
|
+ // this.getavgRepairTimeCount()
|
|
|
+
|
|
|
+ this.cWidth = uni.upx2px(710)
|
|
|
+ //这里的 500 对应 css .charts 的 height
|
|
|
+ this.cHeight = uni.upx2px(400)
|
|
|
+ this.getdata()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tabList_change (val) {
|
|
|
+ this.pickTabIndex = val
|
|
|
+ this.getdata()
|
|
|
+ },
|
|
|
+ showDraw (id, data) {
|
|
|
+ const ctx = uni.createCanvasContext(id, this)
|
|
|
+ uChartsInstance[id] = new uCharts({
|
|
|
+ type: 'column',
|
|
|
+ context: ctx,
|
|
|
+ width: this.cWidth,
|
|
|
+ height: this.cHeight,
|
|
|
+ categories: data.categories,
|
|
|
+ series: data.series,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ color: [
|
|
|
+ '#1890FF',
|
|
|
+ '#91CB74',
|
|
|
+ '#FAC858',
|
|
|
+ '#EE6666',
|
|
|
+ '#73C0DE',
|
|
|
+ '#3CA272',
|
|
|
+ '#FC8452',
|
|
|
+ '#9A60B4',
|
|
|
+ '#ea7ccc'
|
|
|
+ ],
|
|
|
+ padding: [15, 15, 0, 5],
|
|
|
+ touchMoveLimit: 24,
|
|
|
+ // enableScroll: true,
|
|
|
+ legend: {},
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ scrollShow: true,
|
|
|
+ itemCount: 12
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ gridType: 'dash',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ axisLine: false,
|
|
|
+ min: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ column: {
|
|
|
+ type: 'group',
|
|
|
+ width: 8,
|
|
|
+ activeBgColor: '#000000',
|
|
|
+ activeBgOpacity: 0.08
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ canvasFn (e, name) {
|
|
|
+ uChartsInstance[name].showToolTip(e, {
|
|
|
+ format: function (item, category) {
|
|
|
+ return item.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getdata () {
|
|
|
+ switch (this.pickTabIndex) {
|
|
|
+ case 0:
|
|
|
+ this.getavgRepairTimeCount()
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.getboatInventoryCount()
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 请求模具实时库存统计(柱状图)
|
|
|
+ getavgRepairTimeCount () {
|
|
|
+ if (this.useMock) {
|
|
|
+ this.showMockMouldInventory()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let param = {
|
|
|
+ dateType: 2,
|
|
|
+ lineCode: this.lineCode.code
|
|
|
+ }
|
|
|
+ get(this.apiUrl + '/home/page/inventory/modeInventoryCount', param).then(
|
|
|
+ res => {
|
|
|
+ if (res.success) {
|
|
|
+ let seriesData = {
|
|
|
+ categories: [],
|
|
|
+ series: []
|
|
|
+ }
|
|
|
+ for (let [index, item] of res.data.entries()) {
|
|
|
+ // 初始化series个数
|
|
|
+ if (index == 0) {
|
|
|
+ item.pointSum.forEach((n, index_s) => {
|
|
|
+ seriesData.series.push({
|
|
|
+ name: n.name,
|
|
|
+ data: []
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ item.pointSum.forEach((n, index_s) => {
|
|
|
+ seriesData.series[index_s].data.push(n.sum)
|
|
|
+ })
|
|
|
+
|
|
|
+ seriesData.categories.push(item.dateTime)
|
|
|
+ }
|
|
|
+ this.showDraw('canvasA', seriesData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 请求舟皿实时库存统计(柱状图)
|
|
|
+ getboatInventoryCount () {
|
|
|
+ if (this.useMock) {
|
|
|
+ this.showMockBoatInventory()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let param = {
|
|
|
+ dateType: 2,
|
|
|
+ lineCode: this.lineCode.code
|
|
|
+ }
|
|
|
+ get(this.apiUrl + '/home/page/inventory/boatInventoryCount', param).then(
|
|
|
+ res => {
|
|
|
+ if (res.success) {
|
|
|
+ let seriesData = {
|
|
|
+ categories: [],
|
|
|
+ series: []
|
|
|
+ }
|
|
|
+ for (let [index, item] of res.data.entries()) {
|
|
|
+ // 初始化series个数
|
|
|
+ if (index == 0) {
|
|
|
+ item.pointSum.forEach((n, index_s) => {
|
|
|
+ seriesData.series.push({
|
|
|
+ name: n.name,
|
|
|
+ data: []
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ item.pointSum.forEach((n, index_s) => {
|
|
|
+ seriesData.series[index_s].data.push(n.sum)
|
|
|
+ })
|
|
|
+
|
|
|
+ seriesData.categories.push(item.dateTime)
|
|
|
+ }
|
|
|
+ this.showDraw('canvasA', seriesData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 模拟数据:模具实时库存(3组柱状图)
|
|
|
+ showMockMouldInventory () {
|
|
|
+ const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
|
|
|
+ const seriesData = {
|
|
|
+ categories: months,
|
|
|
+ series: [
|
|
|
+ { name: '在库', data: [45,42,48,50,44,52,47,49,46,51,43,53] },
|
|
|
+ { name: '在修', data: [8, 10, 7, 12, 9, 11, 6, 13, 10, 8, 12, 9] },
|
|
|
+ { name: '待检', data: [5, 3, 6, 4, 7, 5, 8, 4, 6, 3, 5, 7] }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.showDraw('canvasA', seriesData)
|
|
|
+ },
|
|
|
+ // 模拟数据:舟皿实时库存(2组柱状图)
|
|
|
+ showMockBoatInventory () {
|
|
|
+ const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
|
|
|
+ const seriesData = {
|
|
|
+ categories: months,
|
|
|
+ series: [
|
|
|
+ { name: '在库', data: [120,115,130,125,135,118,140,128,122,132,126,138] },
|
|
|
+ { name: '在途', data: [30, 25, 35, 28, 40, 22, 38, 32, 27, 34, 29, 36] }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.showDraw('canvasA', seriesData)
|
|
|
+ },
|
|
|
+ // 请求产线
|
|
|
+ getlineCode () {
|
|
|
+ return get(this.apiUrl + '/base/line/getList').then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ let list = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ code: item.code
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.option.lineCode = [list]
|
|
|
+ this.lineCode = this.option.lineCode[0][0]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ pickerConfirm (e) {
|
|
|
+ this.lineCode = e.value[0]
|
|
|
+ this.pickerClose()
|
|
|
+ },
|
|
|
+ // 打开弹窗
|
|
|
+ pickerOpen () {
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ // 关闭弹窗
|
|
|
+ pickerClose () {
|
|
|
+ this.show = false
|
|
|
+ },
|
|
|
+ // 默认值
|
|
|
+ defaultIndex () {
|
|
|
+ if (this.option.lineCode.length < 1) {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ let index = this.option.lineCode[0].findIndex(n => {
|
|
|
+ return n.code == this.lineCode.code
|
|
|
+ })
|
|
|
+ if (index !== -1) {
|
|
|
+ return [index]
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchstart (e) {
|
|
|
+ uChartsInstance[e.target.id].scrollStart(e)
|
|
|
+ },
|
|
|
+ touchmove (e) {
|
|
|
+ uChartsInstance[e.target.id].scroll(e)
|
|
|
+ },
|
|
|
+ touchend (e) {
|
|
|
+ uChartsInstance[e.target.id].scrollEnd(e)
|
|
|
+ uChartsInstance[e.target.id].touchLegend(e)
|
|
|
+ uChartsInstance[e.target.id].showToolTip(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.charts {
|
|
|
+ position: relative;
|
|
|
+ width: 710rpx;
|
|
|
+ height: 400rpx;
|
|
|
+
|
|
|
+ .charts-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ canvas {
|
|
|
+ width: 710rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .z99 {
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.unit-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 20rpx 0;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ color: #999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ & + .item {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|