|
|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <div class="page-content" style="padding: 20px;">
|
|
|
+ <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="设备SN">
|
|
|
+ <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="listQuery.time"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="timeChange">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="float: right;">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="searchHandle()">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="resetForm()">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="租赁信息" name="first">
|
|
|
+ <div>资产基础信息</div>
|
|
|
+ <div style="display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;">
|
|
|
+ <div>
|
|
|
+ 设备编号: <span>PK504B10000003457</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 产品类别: <span>电池</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 产品类型: <span>两轮车</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 厂家: <span>格林美</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 电芯: <span>宁德时代</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 电芯类型: <span>三元锂</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 电压平台: <span>72V</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 容量: <span>50Ah</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 生产时间: <span>2021-8-6</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 投营时间: <span>2021-8-6</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 采购价格: <span>3250元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px;">资产当前状态</div>
|
|
|
+ <div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
|
|
|
+ <div>
|
|
|
+ 业务状态: <span>库存</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 10px;">
|
|
|
+ 投营地区: <span>北京</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>
|
|
|
+
|
|
|
+ <el-table-column label="类型" prop="deptId">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.tf_device_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.customTitle || '-' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="说明">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.operator || '-' }}
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="运维信息" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane label="赔偿信息" name="third"></el-tab-pane>
|
|
|
+ <el-tab-pane label="营销信息" name="fourth"></el-tab-pane>
|
|
|
+ <el-tab-pane label="运营信息" name="fifth"></el-tab-pane>
|
|
|
+ <el-tab-pane label="金融成本" name="sixth"></el-tab-pane>
|
|
|
+ <el-tab-pane label="处置信息" name="seventh"></el-tab-pane>
|
|
|
+ <el-tab-pane label="其它" name="eighth"></el-tab-pane>
|
|
|
+ <el-tab-pane label="总收支" name="ninth"></el-tab-pane>
|
|
|
+ <el-tab-pane label="收益预估" name="tenth"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'first',
|
|
|
+ listQuery: {
|
|
|
+ sn: null,
|
|
|
+ },
|
|
|
+ isList: true,
|
|
|
+ loading: false,
|
|
|
+ data: null,
|
|
|
+ total: 0,
|
|
|
+ listQuery: {
|
|
|
+ index: 1,
|
|
|
+ length: 10
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ this.activeName = tab.name
|
|
|
+ },
|
|
|
+ searchHandle() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //时间选择
|
|
|
+ timeChange(data) {
|
|
|
+ this.listQuery.recordTimeStart = this.DateToStr(data[0])
|
|
|
+ this.listQuery.recordTimeEnd = this.DateToStr(data[1])
|
|
|
+ },
|
|
|
+ //日期转字符串
|
|
|
+ DateToStr(date) {
|
|
|
+ var year = date.getFullYear();//年
|
|
|
+ var month = date.getMonth();//月
|
|
|
+ var day = date.getDate();//日
|
|
|
+ var hours = date.getHours();//时
|
|
|
+ var min = date.getMinutes();//分
|
|
|
+ var second = date.getSeconds();//秒
|
|
|
+ return year + "-" +
|
|
|
+ ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
|
|
|
+ (day > 9 ? day : ("0" + day)) + " " +
|
|
|
+ (hours > 9 ? hours : ("0" + hours)) + ":" +
|
|
|
+ (min > 9 ? min : ("0" + min)) + ":" +
|
|
|
+ (second > 9 ? second : ("0" + second));
|
|
|
+ },
|
|
|
+ clickHandle() {
|
|
|
+ this.isList = !this.isList
|
|
|
+ },
|
|
|
+ // 分页, 每页条数
|
|
|
+ pageSizeChangeHandle (val) {
|
|
|
+ this.listQuery.index = 1
|
|
|
+ this.listQuery.length = val
|
|
|
+ // this.getDataList()
|
|
|
+ },
|
|
|
+ // 分页, 当前页
|
|
|
+ pageCurrentChangeHandle (val) {
|
|
|
+ this.listQuery.index = val
|
|
|
+ // this.getDataList()
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
renmy