资产分析

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "echarts": "^5.2.2",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",

src/api/assetsManager/profit.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+//基础数据
+export function getBaseInfo(data) {
+    return request({
+        url: '/api/v1/appassetprofit/getBaseInfo',
+        method: 'post',
+        data
+    })
+}
+
+//基础数据
+export function getProfitInfo(data) {
+    return request({
+        url: '/api/v1/appassetprofit/getProfitInfo',
+        method: 'post',
+        data
+    })
+}

src/main.js

@@ -15,6 +15,9 @@ import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 
+// 引入echarts
+import echarts from 'echarts'
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -24,20 +27,22 @@ import '@/permission' // permission control
  * please remove it before going online ! ! !
  */
 if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
+    const { mockXHR } = require('../mock')
+    mockXHR()
 }
 
 // set ElementUI lang to EN
 Vue.use(ElementUI, { locale })
-// 如果想要中文版 element-ui，按如下方式声明
-// Vue.use(ElementUI)
+    // 如果想要中文版 element-ui，按如下方式声明
+    // Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
+Vue.prototype.$echarts = echarts
+
 new Vue({
-  el: '#app',
-  router,
-  store,
-  render: h => h(App)
-})
+    el: '#app',
+    router,
+    store,
+    render: h => h(App)
+})

src/views/assetsManager/profit/index.vue

@@ -7,7 +7,7 @@
         </el-form-item>
         <el-form-item label="时间">
           <el-date-picker
-            v-model="listQuery.time"
+            v-model="listQuery.times"
             type="datetimerange"
             range-separator="至"
             start-placeholder="开始日期"
@@ -30,96 +30,140 @@
         <div>资产基础信息</div>
         <div style="display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;">
           <div>
-            设备编号: <span>PK504B10000003457</span>
+            设备编号: <span>{{pageData.sn}}</span>
           </div>
           <div>
-            产品类别: <span>电池</span>
+            产品类别: <span>{{pageData.category}}</span>
           </div>
           <div>
-            产品类型: <span>两轮车</span>
+            产品类型: <span>{{pageData.type}}</span>
           </div>
           <div>
-            厂家: <span>格林美</span>
+            厂家: <span>{{pageData.factory}}</span>
           </div>
           <div>
-            电芯: <span>宁德时代</span>
+            电芯: <span>{{pageData.cellFactory}}</span>
           </div>
           <div>
-            电芯类型: <span>三元锂</span>
+            电芯类型: <span>{{pageData.cellType}}</span>
           </div>
           <div>
-            电压平台: <span>72V</span>
+            电压平台: <span>{{pageData.voltPlatform}}</span>
           </div>
           <div>
-            容量: <span>50Ah</span>
+            容量: <span>{{pageData.capacity}}</span>
           </div>
           <div>
-            生产时间: <span>2021-8-6</span>
+            生产时间: <span>{{pageData.productTime}}</span>
           </div>
           <div>
-            投营时间: <span>2021-8-6</span>
+            投营时间: <span>{{pageData.deliverTime}}</span>
           </div>
           <div>
-            采购价格: <span>3250元</span>
+            采购价格: <span>{{pageData.price}}</span>
           </div>
         </div>
         <div style="margin-top: 10px;">资产当前状态</div>
         <div style="display: flex;  flex-wrap: wrap; margin-top: 10px;">
           <div>
-            业务状态: <span>库存</span>
+            业务状态: <span>{{pageData.status}}</span>
           </div>
           <div style="margin-left: 10px;">
-            投营地区: <span>北京</span>
+            投营地区: <span>{{pageData.region}}</span>
           </div>
           <div style="margin-left: 10px; color: #58ACFA;">电池时间详情</div>
           <div style="margin-left: 10px; color: #58ACFA;" v-if="isList">导出</div>
           <div style="margin-left: 10px; color: #58ACFA;"  @click="clickHandle">{{isList?'图形':'列表'}}</div>
         </div>
-        <div style="margin-top: 10px; width: 60%;">
-          <el-table
-            v-loading="loading"
-            :data="data"
-            element-loading-text="Loading"
-            :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-            :cell-style="{'text-align':'center'}"
-            fit
-            highlight-current-row
-          >
-            <el-table-column label="时间">
-              <template slot-scope="scope">
-                {{ scope.row.add_time || '-' }}
-              </template>
-            </el-table-column>
+        <div style="display: flex;">
+          <div style="margin-top: 10px; width: 70%;" v-if="isList">
+            <el-table
+              v-loading="loading"
+              :data="data"
+              element-loading-text="Loading"
+              :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+              :cell-style="{'text-align':'center'}"
+              fit
+              highlight-current-row
+              @filter-change="filterHandle"
+            >
+              <el-table-column label="时间">
+                <template slot-scope="scope">
+                  {{ scope.row.time || '-' }}
+                </template>
+              </el-table-column>
 
-            <el-table-column label="类型" prop="deptId">
-              <template slot-scope="scope">
-                {{ scope.row.tf_device_type || '-'}}
-              </template>
-            </el-table-column>
+              <el-table-column label="类型" :filters="stateList" column-key="status"  >
+                <template slot-scope="scope">
+                  {{ scope.row.type || '-'}}
+                </template>
+              </el-table-column>
 
-            <el-table-column label="金额">
-              <template slot-scope="scope">
-                {{ scope.row.tf_used || '-' }}
-              </template>
-            </el-table-column>
+              <el-table-column label="金额">
+                <template slot-scope="scope">
+                  {{ scope.row.amount || '-' }}
+                </template>
+              </el-table-column>
 
-            <el-table-column label="关联订单">
-              <template slot-scope="scope">
-                {{ scope.row.customTitle || '-' }}
-              </template>
-            </el-table-column>
+              <el-table-column label="关联订单">
+                <template slot-scope="scope">
+                  {{ scope.row.order || '-' }}
+                </template>
+              </el-table-column>
 
-            <el-table-column label="说明">
-              <template slot-scope="scope">
-                {{ scope.row.operator || '-' }}
-              </template>
-            </el-table-column>
-          </el-table>
+              <el-table-column label="说明">
+                <template slot-scope="scope">
+                  {{ scope.row.description || '-' }}
+                </template>
+              </el-table-column>
+            </el-table>
 
-          <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
-            layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-            @current-change="pageCurrentChangeHandle">
-          </el-pagination>
+            <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+              layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+              @current-change="pageCurrentChangeHandle">
+            </el-pagination>
+          </div>
+          <div v-if="!isList" style="margin-top: 30px; width: 70%;">
+            <div id="lessChart" ref="lessChart" :style="{width: '100%', height: '400px'}"></div>
+          </div>
+          <div style="margin: 30px 0 0 60px; width: 30%;">
+            <div style="">
+              当前信息
+            </div>
+            <div style="height: 1px;width: 80%;background: #000;"></div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>当前租期：</div>
+              <div>{{indexData.time}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>当前租金：</div>
+              <div>{{indexData.rental}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>当前压金：</div>
+              <div>{{indexData.cash}}</div>
+            </div>
+            <div style="margin-top: 30px;">
+              汇总信息
+            </div>
+            <div style="height: 1px;width: 80%;background: #000;"></div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>租金收入：</div>
+              <div>{{indexData.income}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>押金收取：</div>
+              <div>{{indexData.cashIn}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>丢失保障金：</div>
+              <div>{{indexData.securityCash}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div>净租金：</div>
+              <div>{{indexData.netRental}}</div>
+            </div>
+          </div>
         </div>
       </el-tab-pane>
       <el-tab-pane label="运维信息" name="second"></el-tab-pane>
@@ -136,34 +180,170 @@
 </template>
 
 <script>
+let echarts = require('echarts/lib/echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/line')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+import { getBaseInfo, getProfitInfo } from '@/api/assetsManager/profit'
 export default {
   data() {
     return {
       activeName: 'first',
-      listQuery: {
-        sn: null,
-      },
       isList: true,
       loading: false,
       data: null,
       total: 0,
       listQuery: {
         index: 1,
-        length: 10
-      }
+        length: 10,
+        sn: 'PK50001A100000574',
+        timeStart: null,
+        timeEnd: null,
+        type: null,
+        tableOrder: 1,
+        times: []
+      },
+      stateList: [
+        { text: '押金-收', value: 1 },
+        { text: '押金-支', value: 2 },
+        { text: '租金-收', value: 3 },
+        { text: '租金-支', value: 4 },
+        { text: '丢失保障金', value: 5 },
+      ],
+      pageData: {},
+      indexData: {}
     }
   },
+  mounted() {
+    this.getDataList()
+    this.getBaseDataInfo()
+  },
   methods: {
+    //切换tab
     handleClick(tab, event) {
       this.activeName = tab.name
+      if(tab.name === 'first') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 1
+      } else if(tab.name === 'second') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 2
+      } else if(tab.name === 'third') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 3
+      } else if(tab.name === 'fourth') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 4
+      } else if(tab.name === 'fifth') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 5
+      } else if(tab.name === 'sixth') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 6
+      } else if(tab.name === 'seventh') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 7
+      } else if(tab.name === 'eighth') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 8
+      } else if(tab.name === 'ninth') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 9
+      } else if(tab.name === 'tenth') {
+        this.listQuery.index = 1
+        this.listQuery.tableOrder = 10
+      }
+      this.getDataList()
+      this.getBaseDataInfo()
     },
+    //搜索
     searchHandle() {
-
+      this.getDataList()
+      this.getBaseDataInfo()
+    },
+    //重置
+    resetForm() {
+      let tableOrder = 0
+      if(this.activeName === 'first') {
+        tableOrder = 1
+      } else if(this.activeName === 'second') {
+        tableOrder = 2
+      } else if(this.activeName === 'third') {
+        tableOrder = 3
+      } else if(this.activeName === 'fourth') {
+        tableOrder = 4
+      } else if(this.activeName === 'fifth') {
+        tableOrder = 5
+      } else if(this.activeName === 'sixth') {
+        tableOrder = 6
+      } else if(this.activeName === 'seventh') {
+        tableOrder = 7
+      } else if(this.activeName === 'eighth') {
+        tableOrder = 8
+      } else if(this.activeName === 'ninth') {
+        tableOrder = 9
+      } else if(this.activeName === 'tenth') {
+        tableOrder = 10
+      }
+      this.listQuery = {
+        index: 1,
+        length: 10,
+        sn: null,
+        timeStart: null,
+        timeEnd: null,
+        type: null,
+        tableOrder: tableOrder,
+        times: []
+      }
+      this.pageData = {}
+      this.indexData = {}
+      this.data = null
+      this.getDataList()
+      this.getBaseDataInfo()
+    },
+    //列表装填帅选
+    filterHandle(e) {
+      this.listQuery.type = e.status.join(',')
+      this.getDataList()
+    },
+    //获取基础数据
+    getBaseDataInfo() {
+      getBaseInfo(this.listQuery).then(res => {
+        if(res.code === 200) {
+          this.pageData = res.data
+        }
+      })
+    },
+    //获取其他数据
+    getDataList() {
+      this.loading = true
+      getProfitInfo(this.listQuery).then(res => {
+        debugger
+        if(res.code === 200) {
+          this.data = res.data.allInfoList
+          let { time = null, rental = null, cash = null, income = null, cashIn = null, securityCash = null, netRental= null } = res.data
+          this.indexData = {
+            time,
+            rental,
+            cash,
+            income,
+            cashIn,
+            securityCash,
+            netRental
+          }
+          this.loading = false
+        } else {
+          this.loading = false
+        }
+      })
     },
     //时间选择
     timeChange(data) {
-      this.listQuery.recordTimeStart = this.DateToStr(data[0])
-      this.listQuery.recordTimeEnd = this.DateToStr(data[1])
+      this.listQuery.timeStart = this.DateToStr(data[0])
+      this.listQuery.timeEnd = this.DateToStr(data[1])
     },
     //日期转字符串
     DateToStr(date) {
@@ -182,18 +362,58 @@ export default {
     },
     clickHandle() {
       this.isList = !this.isList
+      if(!this.isList) {
+        this.drawLine()
+      }
     },
     // 分页, 每页条数
     pageSizeChangeHandle (val) {
       this.listQuery.index = 1
       this.listQuery.length = val
-      // this.getDataList()
+      this.getDataList()
     },
     // 分页, 当前页
     pageCurrentChangeHandle (val) {
       this.listQuery.index = val
-      // this.getDataList()
+      this.getDataList()
     },
+    //初始化折线图
+    drawLine(){
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let lessChart = echarts.init(this.$refs.lessChart)
+          // 绘制图表
+        lessChart.setOption({
+          title: { text: 'score detail' },
+          tooltip: {   //鼠标悬浮框的提示文字
+              trigger: 'axis'
+            },
+          // legend: {
+          //   // data:['HET-LIB1','HET-LIB2']
+          // },
+          xAxis: {
+            data: ["03/01", "04/01", "05/01", "06/01", "07/01", "08/01"]
+          },
+          yAxis: {},
+          series: [
+            {
+              name: 'HET-LIB1',
+              type: 'line',
+              data: [5, 20, 36, 10, 10, 20],
+              color: 'green',
+              smooth: true
+            },
+            {
+              name: 'HET-LIB2',
+              type: 'line',
+              data: [6, 22, 31, 19, 18, 29],
+              color: 'red',
+              smooth: true
+            }
+          ]
+        });
+			});
+    }
   }
 }
 </script>

src/views/login/index.vue

@@ -110,6 +110,7 @@ export default {
           this.loading = true
           this.$store.dispatch('user/login', this.loginForm).then(() => {
             localStorage.setItem('userName', this.loginForm.username)
+            debugger
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
           }).catch(() => {