|
@@ -9,14 +9,17 @@
|
|
|
</div>
|
|
|
<div class="statisticsTop_text">
|
|
|
<div>本日成交额</div>
|
|
|
- <div class="statisticsTop_amount">¥{{typeFalse?'****':statisticsData.dealAmountD}}元</div>
|
|
|
+ <div class="statisticsTop_amount">¥{{ typeFalse ? '****' : statisticsData.dealAmountD }}元</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="color: #53b2da" class="statisticsBottom">
|
|
|
- <span>当月成交额:¥{{typeFalse?'****':statisticsData.dealAmountM}}元</span>
|
|
|
+ <span>当月成交额:¥{{ typeFalse ? '****' : statisticsData.dealAmountM }}元</span>
|
|
|
</div>
|
|
|
- <div class="position" v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1" @click="typeFalse = !typeFalse">
|
|
|
- <i style="font-size: 16px" :class="typeFalse?'el-icon-partly-cloudy':'el-icon-cloudy-and-sunny'"></i>
|
|
|
+ <div class="position"
|
|
|
+ v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1"
|
|
|
+ @click="typeFalse = !typeFalse">
|
|
|
+ <i style="font-size: 16px"
|
|
|
+ :class="typeFalse ? 'el-icon-partly-cloudy' : 'el-icon-cloudy-and-sunny'"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="statisticsBox">
|
|
@@ -26,14 +29,17 @@
|
|
|
</div>
|
|
|
<div class="statisticsTop_text">
|
|
|
<div>本日轮胎销售量</div>
|
|
|
- <div class="statisticsTop_amount">{{typeFalse?'****':statisticsData.salesNumD}}条</div>
|
|
|
+ <div class="statisticsTop_amount">{{ typeFalse ? '****' : statisticsData.salesNumD }}条</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="color: #69d1a0" class="statisticsBottom">
|
|
|
- <span>当月轮胎销售量:{{typeFalse?'****':statisticsData.salesNumM}}条</span>
|
|
|
+ <span>当月轮胎销售量:{{ typeFalse ? '****' : statisticsData.salesNumM }}条</span>
|
|
|
</div>
|
|
|
- <div class="position" v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1" @click="typeFalse = !typeFalse">
|
|
|
- <i style="font-size: 16px" :class="typeFalse?'el-icon-partly-cloudy':'el-icon-cloudy-and-sunny'"></i>
|
|
|
+ <div class="position"
|
|
|
+ v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1"
|
|
|
+ @click="typeFalse = !typeFalse">
|
|
|
+ <i style="font-size: 16px"
|
|
|
+ :class="typeFalse ? 'el-icon-partly-cloudy' : 'el-icon-cloudy-and-sunny'"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="statisticsBox">
|
|
@@ -43,14 +49,17 @@
|
|
|
</div>
|
|
|
<div class="statisticsTop_text">
|
|
|
<div>当日线上收款金额</div>
|
|
|
- <div class="statisticsTop_amount">¥{{typeFalse?'****':statisticsData.stlAmountD}}元</div>
|
|
|
+ <div class="statisticsTop_amount">¥{{ typeFalse ? '****' : statisticsData.stlAmountD }}元</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="color: #c865d7" class="statisticsBottom">
|
|
|
- <span>当月线上收款金额:¥{{typeFalse?'****':statisticsData.stlAmountM}}元</span>
|
|
|
+ <span>当月线上收款金额:¥{{ typeFalse ? '****' : statisticsData.stlAmountM }}元</span>
|
|
|
</div>
|
|
|
- <div class="position" v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1" @click="typeFalse = !typeFalse">
|
|
|
- <i style="font-size: 16px" :class="typeFalse?'el-icon-partly-cloudy':'el-icon-cloudy-and-sunny'"></i>
|
|
|
+ <div class="position"
|
|
|
+ v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1"
|
|
|
+ @click="typeFalse = !typeFalse">
|
|
|
+ <i style="font-size: 16px"
|
|
|
+ :class="typeFalse ? 'el-icon-partly-cloudy' : 'el-icon-cloudy-and-sunny'"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="statisticsBox">
|
|
@@ -60,14 +69,17 @@
|
|
|
</div>
|
|
|
<div class="statisticsTop_text">
|
|
|
<div>当日利润</div>
|
|
|
- <div class="statisticsTop_amount">¥{{typeFalse?'****':statisticsData.profitD}}元</div>
|
|
|
+ <div class="statisticsTop_amount">¥{{ typeFalse ? '****' : statisticsData.profitD }}元</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="color: #f09d68" class="statisticsBottom">
|
|
|
- <span>当月利润:¥{{typeFalse?'****':statisticsData.profitM}}元</span>
|
|
|
+ <span>当月利润:¥{{ typeFalse ? '****' : statisticsData.profitM }}元</span>
|
|
|
</div>
|
|
|
- <div class="position" v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1" @click="typeFalse = !typeFalse">
|
|
|
- <i style="font-size: 16px" :class="typeFalse?'el-icon-partly-cloudy':'el-icon-cloudy-and-sunny'"></i>
|
|
|
+ <div class="position"
|
|
|
+ v-if="saberUserInfo.role_name.indexOf('admin') != -1 || saberUserInfo.role_name.indexOf('老板') != -1 || saberUserInfo.role_name.indexOf('首页数据') != -1"
|
|
|
+ @click="typeFalse = !typeFalse">
|
|
|
+ <i style="font-size: 16px"
|
|
|
+ :class="typeFalse ? 'el-icon-partly-cloudy' : 'el-icon-cloudy-and-sunny'"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -89,13 +101,13 @@
|
|
|
</div>
|
|
|
<div class="content-icon" @click="inPage('ckgd')" v-if="menuAll.includes('1649222873652400129')">
|
|
|
<div class="iconDivBox" style="background: #57927a">
|
|
|
- <i class="tradingIcon iconfont icon-wodegongdan" ></i>
|
|
|
+ <i class="tradingIcon iconfont icon-wodegongdan"></i>
|
|
|
</div>
|
|
|
<span style="font-size: 12px">出库工单</span>
|
|
|
</div>
|
|
|
<div class="content-icon" @click="inPage('kccx')" v-if="menuAll.includes('1726789203724873729')">
|
|
|
<div class="iconDivBox" style="background: #f09d68">
|
|
|
- <i class="tradingIcon iconfont icon-a-kucunchaxun3x" ></i>
|
|
|
+ <i class="tradingIcon iconfont icon-a-kucunchaxun3x"></i>
|
|
|
</div>
|
|
|
<span style="font-size: 12px">库存查询</span>
|
|
|
</div>
|
|
@@ -138,59 +150,31 @@
|
|
|
</div>
|
|
|
<div style="padding: 10px">
|
|
|
<div style="display:flex;">
|
|
|
- <el-date-picker
|
|
|
- v-model="search.dateList"
|
|
|
- type="daterange"
|
|
|
- range-separator="-"
|
|
|
- size="mini"
|
|
|
- style="margin-right: 5px"
|
|
|
- :default-time="['00:00:00', '23:59:59']"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- @change="query(0)"
|
|
|
- :clearable="false"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期">
|
|
|
+ <el-date-picker v-model="search.dateList" type="daterange" range-separator="-" size="mini"
|
|
|
+ style="margin-right: 5px" :default-time="['00:00:00', '23:59:59']"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" @change="query(0)" :clearable="false"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
</el-date-picker>
|
|
|
<el-button size="mini" @click="query(1)">当日</el-button>
|
|
|
<el-button size="mini" @click="query(2)">当月</el-button>
|
|
|
<el-tooltip class="item" effect="dark" content="排序" placement="top-start">
|
|
|
<el-button size="mini" icon="el-icon-sort" @click="sortfun"></el-button>
|
|
|
</el-tooltip>
|
|
|
- </div >
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- size="mini"
|
|
|
- height="300"
|
|
|
- style="width: 100%">
|
|
|
- <el-table-column
|
|
|
- prop="orderNo"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- label="订单号">
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" size="mini" height="300" style="width: 100%">
|
|
|
+ <el-table-column prop="orderNo" align="center" show-overflow-tooltip label="订单号">
|
|
|
<template slot-scope="{row}">
|
|
|
- <span style="color: #1e9fff" @click="Jumpfun(row)">{{row.orderNo}}</span>
|
|
|
+ <span style="color: #1e9fff" @click="Jumpfun(row)">{{ row.orderNo }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="corpName"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- label="客户名称">
|
|
|
+ <el-table-column prop="corpName" align="center" show-overflow-tooltip label="客户名称">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="date"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- label="订单日期">
|
|
|
+ <el-table-column prop="date" align="center" show-overflow-tooltip label="订单日期">
|
|
|
<template slot-scope="{row}">
|
|
|
- <span>{{row.date.slice(0,10)}}</span>
|
|
|
+ <span>{{ row.date.slice(0, 10) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="status"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- label="订单状态">
|
|
|
+ <el-table-column prop="status" align="center" show-overflow-tooltip label="订单状态">
|
|
|
<!--<template slot-scope="{row}">-->
|
|
|
<!-- <span v-for="item in dingdanzhuangtai"-->
|
|
|
<!-- :style="{background: item.colour}"-->
|
|
@@ -200,11 +184,7 @@
|
|
|
<!-- </span>-->
|
|
|
<!--</template>-->
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="payStatus"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- label="支付状态">
|
|
|
+ <el-table-column prop="payStatus" align="center" show-overflow-tooltip label="支付状态">
|
|
|
<!--<template slot-scope="{row}">-->
|
|
|
<!-- <span v-for="item in orderStatusList"-->
|
|
|
<!-- :style="{background: item.colour}"-->
|
|
@@ -214,11 +194,7 @@
|
|
|
<!-- </span>-->
|
|
|
<!--</template>-->
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="salesman"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- label="业务员">
|
|
|
+ <el-table-column prop="salesman" align="center" show-overflow-tooltip label="业务员">
|
|
|
</el-table-column>
|
|
|
<!--<el-table-column-->
|
|
|
<!-- prop="type"-->
|
|
@@ -230,411 +206,589 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="echattsBox">
|
|
|
- <index-card
|
|
|
- :classType="true"
|
|
|
- title="经营趋势"
|
|
|
- iconName="el-icon-s-fold"
|
|
|
- style="height:400px;margin-bottom: 30px"
|
|
|
- >
|
|
|
+ <index-card :classType="true" title="经营趋势" iconName="el-icon-s-fold"
|
|
|
+ style="height:400px;margin-bottom: 30px">
|
|
|
<div slot="select">
|
|
|
- <el-date-picker
|
|
|
- v-model="annual3"
|
|
|
- type="year"
|
|
|
- size="mini"
|
|
|
- placeholder="选择年"
|
|
|
- value-format="yyyy"
|
|
|
- style="margin-right:10px;margin-bottom: -20px"
|
|
|
- @change="commoDity2Datafun"
|
|
|
- >
|
|
|
+ <el-date-picker v-model="annual3" type="year" size="mini" placeholder="选择年" value-format="yyyy"
|
|
|
+ style="margin-right:10px;margin-bottom: -20px" @change="commoDity2Datafun">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div slot="content" style="height:350px" id="commoDity2"></div>
|
|
|
</index-card>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <div class="tableEchatsBox">
|
|
|
+ <div class="echattsBox">
|
|
|
+ <index-card :classType="true" title="实时总览" iconName="el-icon-s-fold"
|
|
|
+ style="height:450px;margin-bottom: 30px">
|
|
|
+ <div slot="select">
|
|
|
+ <el-date-picker v-model="annual4" type="year" size="mini" placeholder="选择年" value-format="yyyy"
|
|
|
+ style="margin-right:10px;margin-bottom: -20px" @change="commoDity3Datafun">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div slot="header">
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-around">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <div class="bottomFlex" style="justify-content: space-around">
|
|
|
+ <div>
|
|
|
+ <div style="color: #81B337">
|
|
|
+ <span>客户名:</span>
|
|
|
+ <span class="weightnum">{{ overviewForm.corpName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="color: #808bbd">
|
|
|
+ <span>在库金额:</span>
|
|
|
+ <span class="weightnum">¥{{ overviewForm.surplusFundingAmount }}元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color: #8dab14">
|
|
|
+ <span>保证金:</span>
|
|
|
+ <span>¥{{ overviewForm.bondAmount }}元</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="color: #b3373f">
|
|
|
+ <span>可用金额:</span>
|
|
|
+ <span class="weightnum">¥{{ overviewForm.availableAmount }}元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="color: #6BBCD1">
|
|
|
+ <span>融资金额:</span>
|
|
|
+ <span class="weightnum">¥{{ overviewForm.sumAmount }}元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="content" style="height:350px" id="commoDity3"></div>
|
|
|
+ </index-card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import indexCard from "@/views/wel/components/card.vue";
|
|
|
- import xinsalesTrend from "@/views/wel/components/xinsales-trend.vue";
|
|
|
- import {xinsalaryDataChain, xinsalesList, amountStatistics, stayDoOrder} from "@/api/wel";
|
|
|
- import {dateFormat, getYearDate} from "@/util/date";
|
|
|
- import '@/assets/icon/homeicon/iconfont.css'
|
|
|
- export default {
|
|
|
- components: {indexCard,xinsalesTrend},
|
|
|
- props:{
|
|
|
- sysType:Number
|
|
|
+import indexCard from "@/views/wel/components/card.vue";
|
|
|
+import xinsalesTrend from "@/views/wel/components/xinsales-trend.vue";
|
|
|
+import { xinsalaryDataChain, xinsalesList, amountStatistics, stayDoOrder, columnarRz, realTimeOverview } from "@/api/wel";
|
|
|
+import { dateFormat, getYearDate } from "@/util/date";
|
|
|
+import '@/assets/icon/homeicon/iconfont.css'
|
|
|
+export default {
|
|
|
+ components: { indexCard, xinsalesTrend },
|
|
|
+ props: {
|
|
|
+ sysType: Number
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menuAll: [], //所有路由菜单id
|
|
|
+ annual3: '', // echatts 时间筛选
|
|
|
+ annual4: '', // echatts 时间筛选
|
|
|
+ amountList2: [], // 金额
|
|
|
+ numberList2: [], // 数量
|
|
|
+ amountList3: [], // 金额
|
|
|
+ numberList3: [], // 数量
|
|
|
+ search: {
|
|
|
+ dateList: [],
|
|
|
+ sort: 1,
|
|
|
+ }, // 表格 筛选
|
|
|
+ tableData: [], // 表格数据
|
|
|
+ dingdanzhuangtai: [], // 订单状态
|
|
|
+ orderStatusList: [], // 支付状态
|
|
|
+ // 展开是否查看
|
|
|
+ typeFalse: false,
|
|
|
+ statisticsData: {}, // 统计
|
|
|
+ saberUserInfo: {}, // 当前登录人数据
|
|
|
+ overviewForm: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.amountStatisticsfun()
|
|
|
+ this.annual3 = getYearDate().toString(); // 获取当前时间
|
|
|
+ this.annual4 = getYearDate().toString(); // 获取当前时间
|
|
|
+ // // 支付状态
|
|
|
+ // this.getWorkDicts("settlement_Status").then(res => {
|
|
|
+ // this.orderStatusList = res.data.data
|
|
|
+ // });
|
|
|
+ // // 订单状态
|
|
|
+ // this.getWorkDicts("sales_Status").then(res => {
|
|
|
+ // this.dingdanzhuangtai = res.data.data
|
|
|
+ // });
|
|
|
+ // 获取当前登录人数据
|
|
|
+ this.saberUserInfo = JSON.parse(localStorage.getItem("saber-userInfo")).content;
|
|
|
+ if (this.saberUserInfo.role_name.indexOf('admin') == -1 && this.saberUserInfo.role_name.indexOf('老板') == -1 && this.saberUserInfo.role_name.indexOf('首页数据') == -1) {
|
|
|
+ this.typeFalse = true
|
|
|
+ }
|
|
|
+
|
|
|
+ this.query(1)
|
|
|
+ //从缓存中获取所有路由信息
|
|
|
+ setTimeout(data => {
|
|
|
+ let menu = JSON.parse(localStorage.getItem("saber-menuAll")).content
|
|
|
+ for (let item of menu) {
|
|
|
+ this.menuAll.push(item.id)
|
|
|
+ if (item.children.length > 0) {
|
|
|
+ this.getMenuId(item.children)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 600)
|
|
|
+ realTimeOverview().then(res => {
|
|
|
+ this.overviewForm = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.commoDity2Datafun()
|
|
|
+ this.commoDity3Datafun()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 排序切换
|
|
|
+ sortfun() {
|
|
|
+ if (this.search.sort == 1) {
|
|
|
+ this.search.sort = 2
|
|
|
+ } else {
|
|
|
+ this.search.sort = 1
|
|
|
+ }
|
|
|
+ this.query()
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- menuAll:[], //所有路由菜单id
|
|
|
- annual3:'', // echatts 时间筛选
|
|
|
- amountList2:[], // 金额
|
|
|
- numberList2:[], // 数量
|
|
|
- search:{
|
|
|
- dateList:[],
|
|
|
- sort:1,
|
|
|
- }, // 表格 筛选
|
|
|
- tableData:[], // 表格数据
|
|
|
- dingdanzhuangtai:[], // 订单状态
|
|
|
- orderStatusList:[], // 支付状态
|
|
|
- // 展开是否查看
|
|
|
- typeFalse:false,
|
|
|
- statisticsData:{}, // 统计
|
|
|
- saberUserInfo:{}, // 当前登录人数据
|
|
|
+ // 点击跳转
|
|
|
+ Jumpfun(row) {
|
|
|
+ if (row.type == 'FHGD') {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/tirePartsMall/salesManagement/outboundWorkOrder/index',
|
|
|
+ query: { id: row.id }
|
|
|
+ });
|
|
|
+ } else if (row.type == 'XS') {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/tirePartsMall/salesManagement/saleOrder/index',
|
|
|
+ query: { jumpId: row.id }
|
|
|
+ });
|
|
|
+ } else if (row.type == 'FHRW') {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/tirePartsMall/salesManagement/outboundTask/index',
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- this.amountStatisticsfun()
|
|
|
- this.annual3 = getYearDate().toString(); // 获取当前时间
|
|
|
- // // 支付状态
|
|
|
- // this.getWorkDicts("settlement_Status").then(res => {
|
|
|
- // this.orderStatusList = res.data.data
|
|
|
- // });
|
|
|
- // // 订单状态
|
|
|
- // this.getWorkDicts("sales_Status").then(res => {
|
|
|
- // this.dingdanzhuangtai = res.data.data
|
|
|
- // });
|
|
|
- // 获取当前登录人数据
|
|
|
- this.saberUserInfo = JSON.parse(localStorage.getItem("saber-userInfo")).content;
|
|
|
- if (this.saberUserInfo.role_name.indexOf('admin') == -1 && this.saberUserInfo.role_name.indexOf('老板') == -1 && this.saberUserInfo.role_name.indexOf('首页数据') == -1) {
|
|
|
- this.typeFalse = true
|
|
|
+ // 获取顶部统计数据
|
|
|
+ amountStatisticsfun() {
|
|
|
+ amountStatistics().then(res => {
|
|
|
+ this.statisticsData = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表格数据获取
|
|
|
+ query(type) {
|
|
|
+ const date = new Date();
|
|
|
+ if (type == 1) {
|
|
|
+ this.$set(this.search, "dateList", [`${dateFormat(new Date(), "yyyy-MM-dd")} 00:00:00`, `${dateFormat(new Date(), "yyyy-MM-dd")} 23:59:59`])
|
|
|
}
|
|
|
-
|
|
|
- this.query(1)
|
|
|
- //从缓存中获取所有路由信息
|
|
|
- setTimeout(data=>{
|
|
|
- let menu = JSON.parse(localStorage.getItem("saber-menuAll")).content
|
|
|
- for (let item of menu){
|
|
|
- this.menuAll.push(item.id)
|
|
|
- if (item.children.length > 0){
|
|
|
- this.getMenuId(item.children)
|
|
|
- }
|
|
|
- }
|
|
|
- },600)
|
|
|
+ if (type == 2) {
|
|
|
+ this.$set(this.search, "dateList", [
|
|
|
+ `${dateFormat(new Date(date.getFullYear(), date.getMonth(), 1), "yyyy-MM-dd")} 00:00:00`,
|
|
|
+ `${dateFormat(new Date(date.getFullYear(), date.getMonth() + 1, 0), "yyyy-MM-dd")} 23:59:59`
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ stayDoOrder({ ...this.search }).then(res => {
|
|
|
+ this.tableData = res.data.data
|
|
|
+ })
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.commoDity2Datafun()
|
|
|
+ // 获取echarts 表的数据
|
|
|
+ commoDity2Datafun() {
|
|
|
+ xinsalaryDataChain({
|
|
|
+ year: Number(this.annual3)
|
|
|
+ }).then(res => {
|
|
|
+ this.amountList2 = res.data.data.amount
|
|
|
+ this.numberList2 = res.data.data.number
|
|
|
+ this.commoDity2()
|
|
|
+ })
|
|
|
},
|
|
|
- methods:{
|
|
|
- // 排序切换
|
|
|
- sortfun(){
|
|
|
- if (this.search.sort == 1) {
|
|
|
- this.search.sort = 2
|
|
|
- }else {
|
|
|
- this.search.sort = 1
|
|
|
- }
|
|
|
- this.query()
|
|
|
- },
|
|
|
- // 点击跳转
|
|
|
- Jumpfun(row){
|
|
|
- if (row.type == 'FHGD') {
|
|
|
- this.$router.push({
|
|
|
- path: '/tirePartsMall/salesManagement/outboundWorkOrder/index',
|
|
|
- query: { id: row.id }
|
|
|
- });
|
|
|
- } else if (row.type == 'XS') {
|
|
|
- this.$router.push({
|
|
|
- path: '/tirePartsMall/salesManagement/saleOrder/index',
|
|
|
- query: { jumpId: row.id }
|
|
|
- });
|
|
|
- } else if (row.type == 'FHRW') {
|
|
|
- this.$router.push({
|
|
|
- path: '/tirePartsMall/salesManagement/outboundTask/index',
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取顶部统计数据
|
|
|
- amountStatisticsfun(){
|
|
|
- amountStatistics().then(res=>{
|
|
|
- this.statisticsData = res.data.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 表格数据获取
|
|
|
- query(type){
|
|
|
- const date = new Date();
|
|
|
- if (type == 1){
|
|
|
- this.$set(this.search,"dateList",[`${dateFormat(new Date(),"yyyy-MM-dd")} 00:00:00`,`${dateFormat(new Date(),"yyyy-MM-dd")} 23:59:59`])
|
|
|
- }
|
|
|
- if (type == 2){
|
|
|
- this.$set(this.search,"dateList",[
|
|
|
- `${dateFormat(new Date(date.getFullYear(), date.getMonth(), 1),"yyyy-MM-dd")} 00:00:00`,
|
|
|
- `${dateFormat(new Date(date.getFullYear(), date.getMonth() + 1, 0),"yyyy-MM-dd")} 23:59:59`
|
|
|
- ])
|
|
|
- }
|
|
|
- stayDoOrder({...this.search}).then(res=>{
|
|
|
- this.tableData = res.data.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取echarts 表的数据
|
|
|
- commoDity2Datafun() {
|
|
|
- xinsalaryDataChain({
|
|
|
- year:Number(this.annual3)
|
|
|
- }).then(res=>{
|
|
|
- this.amountList2 = res.data.data.amount
|
|
|
- this.numberList2 = res.data.data.number
|
|
|
- this.commoDity2()
|
|
|
- })
|
|
|
- },
|
|
|
- //获取所有路由信息id
|
|
|
- getMenuId(array){
|
|
|
- for (let item of array){
|
|
|
- this.menuAll.push(item.id)
|
|
|
- }
|
|
|
- },
|
|
|
- // 快捷跳转
|
|
|
- inPage(type){
|
|
|
- switch(type){
|
|
|
- case 'xs':
|
|
|
- this.$router.push('/tirePartsMall/salesManagement/saleOrder/index?showTrue=' + true);
|
|
|
- break;
|
|
|
- case 'ck':
|
|
|
- this.$router.push('/tirePartsMall/salesManagement/outboundTask/index');
|
|
|
- break;
|
|
|
- case 'ckgd':
|
|
|
- this.$router.push('/tirePartsMall/salesManagement/outboundWorkOrder/index');
|
|
|
- break;
|
|
|
- case 'cgdd':
|
|
|
- this.$router.push('/tirePartsMall/salesManagement/purchaseOrder/index?showTrue=' + true);
|
|
|
- break;
|
|
|
- case 'rkrw':
|
|
|
- this.$router.push('/tirePartsMall/salesManagement/inboundTask/index');
|
|
|
- break;
|
|
|
- case 'rk':
|
|
|
- this.$router.push('/tirePartsMall/purchasingManagement/warehouseEntryOrder/index');
|
|
|
- break;
|
|
|
- case 'kccx':
|
|
|
- this.$router.push('/tirePartsMall/inventory/index');
|
|
|
- break;
|
|
|
- case 'db':
|
|
|
- this.$router.push('/tirePartsMall/salesManagement/outboundWorkOrderL/index?showTrue=' + true);
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
- // echatts 配置
|
|
|
- commoDity2() {
|
|
|
- // 基于准备好的dom,初始化echarts实例,所以只能在mounted中调用
|
|
|
- let myChart = this.$echarts.init(document.getElementById("commoDity2"));
|
|
|
- // 绘制图表
|
|
|
- myChart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
+ // 获取echarts 表的数据
|
|
|
+ commoDity3Datafun() {
|
|
|
+ columnarRz({
|
|
|
+ year: Number(this.annual4)
|
|
|
+ }).then(res => {
|
|
|
+ this.amountList3 = res.data.data.amount
|
|
|
+ this.numberList3 = res.data.data.number
|
|
|
+ this.commoDity3()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取所有路由信息id
|
|
|
+ getMenuId(array) {
|
|
|
+ for (let item of array) {
|
|
|
+ this.menuAll.push(item.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 快捷跳转
|
|
|
+ inPage(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 'xs':
|
|
|
+ this.$router.push('/tirePartsMall/salesManagement/saleOrder/index?showTrue=' + true);
|
|
|
+ break;
|
|
|
+ case 'ck':
|
|
|
+ this.$router.push('/tirePartsMall/salesManagement/outboundTask/index');
|
|
|
+ break;
|
|
|
+ case 'ckgd':
|
|
|
+ this.$router.push('/tirePartsMall/salesManagement/outboundWorkOrder/index');
|
|
|
+ break;
|
|
|
+ case 'cgdd':
|
|
|
+ this.$router.push('/tirePartsMall/salesManagement/purchaseOrder/index?showTrue=' + true);
|
|
|
+ break;
|
|
|
+ case 'rkrw':
|
|
|
+ this.$router.push('/tirePartsMall/salesManagement/inboundTask/index');
|
|
|
+ break;
|
|
|
+ case 'rk':
|
|
|
+ this.$router.push('/tirePartsMall/purchasingManagement/warehouseEntryOrder/index');
|
|
|
+ break;
|
|
|
+ case 'kccx':
|
|
|
+ this.$router.push('/tirePartsMall/inventory/index');
|
|
|
+ break;
|
|
|
+ case 'db':
|
|
|
+ this.$router.push('/tirePartsMall/salesManagement/outboundWorkOrderL/index?showTrue=' + true);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // echatts 配置
|
|
|
+ commoDity2() {
|
|
|
+ // 基于准备好的dom,初始化echarts实例,所以只能在mounted中调用
|
|
|
+ let myChart = this.$echarts.init(document.getElementById("commoDity2"));
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ precision: '0', // 设备y轴指示线保留整数 文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
|
|
|
+ },
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['数量', '金额']
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
|
|
axisPointer: {
|
|
|
- type: 'cross',
|
|
|
- label:{
|
|
|
- precision:'0', // 设备y轴指示线保留整数 文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
|
|
|
- },
|
|
|
- crossStyle: {
|
|
|
- color: '#999'
|
|
|
- }
|
|
|
+ type: 'shadow'
|
|
|
}
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['数量', '金额']
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月'],
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: "10%",
|
|
|
+ right: "10%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '数量(条)',
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#5266bc",//y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}'
|
|
|
}
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- left: "10%",
|
|
|
- right: "10%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true
|
|
|
},
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '数量(条)',
|
|
|
- min: 0,
|
|
|
- axisLine:{
|
|
|
- show:true,
|
|
|
- lineStyle: {
|
|
|
- color: "#5266bc",//y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
|
|
|
- },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '金额(元)',
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#98c46d",//y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value}'
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#000",//Y轴内容文字颜色
|
|
|
+ // },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '数量',
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 条';
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '金额(元)',
|
|
|
- min: 0,
|
|
|
- axisLine:{
|
|
|
- show:true,
|
|
|
- lineStyle: {
|
|
|
- color: "#98c46d",//y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
|
|
|
- },
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value}',
|
|
|
- // textStyle: {
|
|
|
- // color: "#000",//Y轴内容文字颜色
|
|
|
- // },
|
|
|
+ data: this.numberList2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '金额',
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 元';
|
|
|
}
|
|
|
+ },
|
|
|
+ data: this.amountList2
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ commoDity3() {
|
|
|
+ // 基于准备好的dom,初始化echarts实例,所以只能在mounted中调用
|
|
|
+ let myChart = this.$echarts.init(document.getElementById("commoDity3"));
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ precision: '0', // 设备y轴指示线保留整数 文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
|
|
|
+ },
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['订单数量', '融资金额']
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
}
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '数量',
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 0,
|
|
|
- tooltip: {
|
|
|
- valueFormatter: function (value) {
|
|
|
- return value + ' 条';
|
|
|
- }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: "10%",
|
|
|
+ right: "10%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '订单数量(条)',
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#5266bc",//y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
|
|
|
},
|
|
|
- data: this.numberList2
|
|
|
},
|
|
|
- {
|
|
|
- name: '金额',
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 1,
|
|
|
- tooltip: {
|
|
|
- valueFormatter: function (value) {
|
|
|
- return value + ' 元';
|
|
|
- }
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '融资金额(元)',
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#98c46d",//y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
|
|
|
},
|
|
|
- data: this.amountList2
|
|
|
},
|
|
|
- ]
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#000",//Y轴内容文字颜色
|
|
|
+ // },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '订单数量',
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 条';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.numberList3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '融资金额',
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 元';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.amountList3
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .xindongpowerBox {
|
|
|
- padding: 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .statisticsFlex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .statisticsBox {
|
|
|
- flex: 1;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 10px 30px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 20px;
|
|
|
- position: relative;
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .position {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 20px;
|
|
|
- }
|
|
|
- .statisticsTop {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .statisticsTop_ioc {
|
|
|
- //background: red;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .statisticsTop_text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 300;
|
|
|
- .statisticsTop_amount {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .statisticsBottom {
|
|
|
- color: #1e9fff;
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .quickJumpBox {
|
|
|
- margin-top: 10px;
|
|
|
+.xindongpowerBox {
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.statisticsFlex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .statisticsBox {
|
|
|
+ flex: 1;
|
|
|
background: #fff;
|
|
|
border-radius: 10px;
|
|
|
- padding: 20px;
|
|
|
+ padding: 10px 30px;
|
|
|
box-sizing: border-box;
|
|
|
- .content {
|
|
|
+ margin-right: 20px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .position {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statisticsTop {
|
|
|
display: flex;
|
|
|
- &-icon {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin: 1.5vh 1vw 0vh 1vw;
|
|
|
- span {
|
|
|
- margin-top: 0.2vh;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .statisticsTop_ioc {
|
|
|
+ //background: red;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statisticsTop_text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 300;
|
|
|
+
|
|
|
+ .statisticsTop_amount {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .tableEchatsBox {
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- .tableBox {
|
|
|
- flex: 2;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 20px;
|
|
|
- padding-bottom: 20px;
|
|
|
- }
|
|
|
- .echattsBox {
|
|
|
- flex: 3;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding-bottom: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+
|
|
|
+ .statisticsBottom {
|
|
|
+ color: #1e9fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
+.quickJumpBox {
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .tradingIcon {
|
|
|
- font-size: 24px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .imgbox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .card-head {
|
|
|
- margin-top: 5px;
|
|
|
- height: 28px;
|
|
|
- font-size: 12px;
|
|
|
+ .content {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .index-icon {
|
|
|
- margin: 0 10px;
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin: 1.5vh 1vw 0vh 1vw;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-top: 0.2vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .bottomBox {
|
|
|
- padding: 3px 6px;
|
|
|
- border-radius: 12px;
|
|
|
- color: #fff;
|
|
|
- font-size: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.tableEchatsBox {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tableBox {
|
|
|
+ flex: 2;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
}
|
|
|
- .iconDivBox {
|
|
|
- padding: 8px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+
|
|
|
+ .echattsBox {
|
|
|
+ flex: 3;
|
|
|
+ background: #fff;
|
|
|
border-radius: 10px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.tradingIcon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.imgbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.card-head {
|
|
|
+ margin-top: 5px;
|
|
|
+ height: 28px;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.index-icon {
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomBox {
|
|
|
+ padding: 3px 6px;
|
|
|
+ border-radius: 12px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.iconDivBox {
|
|
|
+ padding: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottomFlex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|