|
|
@@ -0,0 +1,284 @@
|
|
|
+<template>
|
|
|
+ <a-row :gutter="[20,30]">
|
|
|
+ <a-col :span="14">
|
|
|
+ <a-card title="总览">
|
|
|
+ <a-row type="flex" justify="space-between" align="middle">
|
|
|
+ <a-col :span="4">
|
|
|
+ <div class="top-left">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/bgView/zong.png" width="63px" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>备件总数</div>
|
|
|
+ <div>
|
|
|
+ <span>5</span>个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-left-bg" style="background:#F5F7FA"></div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <div class="top-left">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/bgView/jie.png" width="63px" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>备件类别</div>
|
|
|
+ <div>
|
|
|
+ <span>11</span>种
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-left-bg" style="background:#F0F8FE"></div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <div class="top-left">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/bgView/huan.png" width="63px" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>重要备件</div>
|
|
|
+ <div>
|
|
|
+ <span>5</span>个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-left-bg" style="background:#FBF4E7"></div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <div class="top-left">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/bgView/fei.png" width="63px" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>专用备件</div>
|
|
|
+ <div>
|
|
|
+ <span>12</span>个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-left-bg" style="background:#FBE7E3"></div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <div class="top-left">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/bgView/xian.png" width="63px" alt="">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>总库存</div>
|
|
|
+ <div>
|
|
|
+ <span>5</span>个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-left-bg" style="background:#EBFEF1"></div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <a-card title="备件地图">
|
|
|
+ <div class="top-left hover" @click="$router.push('/sb/position/img')">
|
|
|
+ <img src="@/assets/bgView/zidi.png" width="100%" height="100%" alt="">
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <a-card title="仓库地图">
|
|
|
+ <div class="top-left hover" @click="$router.push('/assets/idle/map')">
|
|
|
+ <img src="@/assets/bgView/xiandi.png" width="100%" height="100%" alt="">
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card title="预警列表">
|
|
|
+ <a-row :gutter="50">
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="middle-box">
|
|
|
+ <div>更换预警</div>
|
|
|
+ <span>126</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="middle-box" style="border-color:#F59B00">
|
|
|
+ <div>编号重复预警</div>
|
|
|
+ <span>126</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="middle-box" style="border-color:#F26264">
|
|
|
+ <div>变更预警</div>
|
|
|
+ <span>126</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="5">
|
|
|
+ <div class="middle-box" style="border-color:#73C747">
|
|
|
+ <div>库存下限预警</div>
|
|
|
+ <span>126</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card title="备件类型分布">
|
|
|
+ <div slot="extra">
|
|
|
+ <a-radio-group default-value="a" button-style="solid">
|
|
|
+ <a-radio-button value="a">
|
|
|
+ 全部
|
|
|
+ </a-radio-button>
|
|
|
+ <a-radio-button value="b">
|
|
|
+ 再用
|
|
|
+ </a-radio-button>
|
|
|
+ <a-radio-button value="c">
|
|
|
+ 闲置
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+ <chart-view height="360px" :chartOption="chartOption" />
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts/core'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ lineData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ chartOption () {
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(0,0,0,0.5)'
|
|
|
+ },
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#979797',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ // color: '#2b2b2b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '备件总数',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ data: [10, 52, 200, 334, 390, 330, 220, 150, 82, 91, 34, 290],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#52C5FF' },
|
|
|
+ { offset: 1, color: '#228FFE' }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '借出数量',
|
|
|
+ barWidth: 20,
|
|
|
+ type: 'bar',
|
|
|
+ data: [10, 52, 200, 334, 390, 330, 220, 150, 82, 91, 34, 290],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#FF5252' },
|
|
|
+ { offset: 1, color: '#FE2222' }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.top-left {
|
|
|
+ display: flex;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666666;
|
|
|
+ position: relative;
|
|
|
+ height: 110px;
|
|
|
+ & > div {
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .top-left-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ opacity: 0.74;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.middle-box {
|
|
|
+ height: 129px;
|
|
|
+ width: 100%;
|
|
|
+ background: #f4f6f9;
|
|
|
+ border-radius: 10px;
|
|
|
+ border-left: 6px solid #002c81;
|
|
|
+ padding: 20px 25px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #999999;
|
|
|
+ span {
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+}
|
|
|
+.hover{
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
