wans

src/router/generator-platform-routers.js

@@ -371,6 +371,9 @@ const constantRouterComponents = {
   // 工作台
   'SbInfoWorkplaceBacklog': () => import('@/views/workplace/backlog/SbInfoWorkplaceBacklog'), // 设备工作台
   'AssetsWorkplaceBacklog': () => import('@/views/workplace/backlog/AssetsWorkplaceBacklog'), // 设备工作台
+  'SpareWorkplaceBacklog': () => import('@/views/workplace/backlog/SpareWorkplaceBacklog'), // 设备工作台
+  'StoreWorkplaceBacklog2': () => import('@/views/workplace/backlog/StoreWorkplaceBacklog2'), // 设备工作台
+  'RepairWorkplaceBacklog': () => import('@/views/workplace/backlog/RepairWorkplaceBacklog'), // 设备工作台
   // 自定义管理
   'CustomizeReport': () => import('@/views/customize/report/CustomizeReport'), // 自定义报表
   'CustomFieldTemplate': () => import('@/views/customize/fieldTemplate/CustomFieldTemplate'), // 自定义模板

src/views/workplace/backlog/RepairWorkplaceBacklog.vue

@@ -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>

src/views/workplace/backlog/SpareWorkplaceBacklog.vue

@@ -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>

src/views/workplace/backlog/StoreWorkplaceBacklog2.vue

@@ -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>