123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987 |
- <!-- 机器销售排行 -->
- <template>
- <view>
- <view class="head">
- </view>
- <view class="ri">
- <font class="title">机器销售排行</font>
- </view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">今日销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate1}}</span>
- <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true @touchstart="touchLine1"
- @touchmove="moveLine1" @touchend="touchEndLine1" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <view class="line"></view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">本周销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate2}} 至 {{endDate2}}</span>
- <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true @touchstart="touchLine2"
- @touchmove="moveLine2" @touchend="touchEndLine2" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <view class="line"></view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">本月销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate3}} 至 {{endDate3}}</span>
- <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true @touchstart="touchLine3"
- @touchmove="moveLine3" @touchend="touchEndLine3" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <view class="line"></view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">本年销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate4}} 至 {{endDate4}}</span>
- <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true @touchstart="touchLine4"
- @touchmove="moveLine4" @touchend="touchEndLine4" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <!-- 各省份平均销售数据 -->
- <view v-if="show">
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">全国平均日销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre2('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate5}}</span>
- <image @click="next2('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn5" id="canvaColumn5" class="charts2" disable-scroll=true @touchstart="touchLine5"
- @touchmove="moveLine5" @touchend="touchEndLine5" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <view class="line"></view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">全国平均周销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre2('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate6}} 至 {{endDate6}}</span>
- <image @click="next2('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn6" id="canvaColumn6" class="charts2" disable-scroll=true @touchstart="touchLine6"
- @touchmove="moveLine6" @touchend="touchEndLine6" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <view class="line"></view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">全国平均月销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre2('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate7}} 至 {{endDate7}}</span>
- <image @click="next2('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn7" id="canvaColumn7" class="charts2" disable-scroll=true @touchstart="touchLine7"
- @touchmove="moveLine7" @touchend="touchEndLine7" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <view class="line"></view>
- <view class="qiun-columns">
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">
- <view class="dis">全国平均年销售排行</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre2('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate8}} 至 {{endDate8}}</span>
- <image @click="next2('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn8" id="canvaColumn8" class="charts2" disable-scroll=true @touchstart="touchLine8"
- @touchmove="moveLine8" @touchend="touchEndLine8" style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapActions,
- mapMutations
- } from 'vuex';
- import uCharts from '@/components/u-charts/u-charts.js';
- import {
- dateUtils
- } from '@/common/util.js';
- var _self;
- var canvaColumn1 = null;
- var canvaColumn2 = null;
- var canvaColumn3 = null;
- var canvaColumn4 = null;
- var canvaColumn5 = null;
- var canvaColumn6 = null;
- var canvaColumn7 = null;
- var canvaColumn8 = null;
- export default {
- name: 'equipmentStatistics',
- props: {
- adminId: '',
- },
- data() {
- return {
- pname: '',
- cWidth: '',
- cHeight: '',
- pixelRatio: 1,
- startDate1: '',
- endDate1: '',
- startDate2: '',
- endDate2: '',
- startDate3: '',
- endDate3: '',
- startDate4: '',
- endDate4: '',
- startDate5: '',
- endDate5: '',
- startDate6: '',
- endDate6: '',
- startDate7: '',
- endDate7: '',
- startDate8: '',
- endDate8: '',
- show: false
- }
- },
- computed: {
- ...mapState(['loginUser']),
- },
- mounted() {
- // this.init2();
- },
- onShow() {
- var globalUser = uni.getStorageSync("globalUser");
- if (globalUser.id == '1') {
- this.show = true
- }
- this.init();
- },
- methods: {
- ...mapActions('chart', ['getProvince', 'getEquipmentStatistics', 'getMainStatistics', 'getMachineNum']),
- async init() {
- if (this.pname === '') {
- this.pname = uni.getStorageSync("name");
- }
- // console.log("adminId:" + this.adminId)
- _self = this;
- //图表中图
- this.cWidth = uni.upx2px(690);
- this.cHeight = uni.upx2px(500);
- await this.initDateRang(new Date(), 'day');
- await this.initDateRang(new Date(), 'week');
- await this.initDateRang(new Date(), 'month');
- await this.initDateRang(new Date(), 'year');
- await this.init2();
- },
- async init2() {
- if (this.pname === '') {
- this.pname = uni.getStorageSync("name");
- }
- // console.log("adminId:" + this.adminId)
- _self = this;
- //图表中图
- this.cWidth2 = uni.upx2px(690);
- this.cHeight2 = uni.upx2px(370);
- if (this.show == true) {
- await this.initDateRang2(new Date(), 'day');
- await this.initDateRang2(new Date(), 'week');
- await this.initDateRang2(new Date(), 'month');
- await this.initDateRang2(new Date(), 'year');
- }
- },
- initDateRang(day, chartType) {
- const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
- if (chartType === 'day') {
- this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
- }
- if (chartType === 'week') {
- this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
- this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
- }
- if (chartType === 'month') {
- this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
- this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
- }
- if (chartType === 'year') {
- this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
- this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
- }
- return this.getStatisticsData(chartType);
- },
- initDateRang2(day, chartType) {
- const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
- if (chartType === 'day') {
- this.startDate5 = dateUtils.formateDate(day, 'yyyy/MM/dd');
- }
- if (chartType === 'week') {
- this.startDate6 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
- this.endDate6 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
- }
- if (chartType === 'month') {
- this.startDate7 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
- this.endDate7 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
- }
- if (chartType === 'year') {
- this.startDate8 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
- this.endDate8 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
- }
- return this.getProvinceData(chartType);
- },
- /**上一个 */
- pre(chartType) {
- let day;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate1);
- day.setDate(day.getDate() - 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate2);
- day.setDate(day.getDate() - 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate3);
- day.setMonth(day.getMonth() - 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate4);
- day.setFullYear(day.getFullYear() - 1);
- }
- this.initDateRang(day, chartType);
- },
- pre2(chartType) {
- let day;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate5);
- day.setDate(day.getDate() - 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate6);
- day.setDate(day.getDate() - 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate7);
- day.setMonth(day.getMonth() - 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate8);
- day.setFullYear(day.getFullYear() - 1);
- }
- this.initDateRang2(day, chartType);
- },
- /**下一个 */
- next(chartType) {
- let day;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate1);
- day.setDate(day.getDate() + 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate2);
- day.setDate(day.getDate() + 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate3);
- day.setMonth(day.getMonth() + 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate4);
- day.setFullYear(day.getFullYear() + 1);
- }
- this.initDateRang(day, chartType);
- },
- next2(chartType) {
- let day;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate5);
- day.setDate(day.getDate() + 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate6);
- day.setDate(day.getDate() + 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate7);
- day.setMonth(day.getMonth() + 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate8);
- day.setFullYear(day.getFullYear() + 1);
- }
- this.initDateRang2(day, chartType);
- },
- getStatisticsData(chartType) {
- const param = {
- 'chartType': chartType
- };
- if (chartType == 'day') {
- param['startDate'] = this.startDate1;
- param['endDate'] = this.startDate1;
- }
- if (chartType == 'week') {
- param['startDate'] = this.startDate2;
- param['endDate'] = this.endDate2;
- }
- if (chartType == 'month') {
- param['startDate'] = this.startDate3;
- param['endDate'] = this.endDate3;
- }
- if (chartType == 'year') {
- param['startDate'] = this.startDate4;
- param['endDate'] = this.endDate4;
- }
- if (this.adminId) { // 子组件,则拿传过来的参
- param['adminId'] = this.adminId;
- } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
- param['adminId'] = this.loginUser['id'];
- }
- if (this.equipmentId) {
- param['equipmentId'] = this.equipmentId;
- }
- return this.getEquipmentStatistics(param)
- .then(data => {
- uni.stopPullDownRefresh();
- if (param['chartType'] == 'day') {
- canvaColumn1 = this.initChart('canvaColumn1', data);
- }
- if (param['chartType'] == 'week') {
- canvaColumn2 = this.initChart('canvaColumn2', data);
- }
- if (param['chartType'] == 'month') {
- canvaColumn3 = this.initChart('canvaColumn3', data);
- }
- if (param['chartType'] == 'year') {
- canvaColumn4 = this.initChart('canvaColumn4', data);
- }
- }, _ => {
- uni.stopPullDownRefresh();
- if (param['chartType'] == 'day') {
- canvaColumn1 = this.initChart('canvaColumn1', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'week') {
- canvaColumn2 = this.initChart('canvaColumn2', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'month') {
- canvaColumn3 = this.initChart('canvaColumn3', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'year') {
- canvaColumn4 = this.initChart('canvaColumn4', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- });
- },
- getProvinceData(chartType) {
- const param = {
- 'chartType': chartType
- };
- if (chartType == 'day') {
- param['startDate'] = this.startDate5;
- param['endDate'] = this.startDate5;
- }
- if (chartType == 'week') {
- param['startDate'] = this.startDate6;
- param['endDate'] = this.endDate6;
- }
- if (chartType == 'month') {
- param['startDate'] = this.startDate7;
- param['endDate'] = this.endDate7;
- }
- if (chartType == 'year') {
- param['startDate'] = this.startDate8;
- param['endDate'] = this.endDate8;
- }
- if (this.adminId) { // 子组件,则拿传过来的参
- param['adminId'] = this.adminId;
- } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
- param['adminId'] = this.loginUser['id'];
- }
- if (this.equipmentId) {
- param['equipmentId'] = this.equipmentId;
- }
- return this.getProvince(param)
- .then(data => {
- uni.stopPullDownRefresh();
- if (param['chartType'] == 'day') {
- canvaColumn5 = this.initChart2('canvaColumn5', data);
- }
- if (param['chartType'] == 'week') {
- canvaColumn6 = this.initChart2('canvaColumn6', data);
- }
- if (param['chartType'] == 'month') {
- canvaColumn7 = this.initChart2('canvaColumn7', data);
- }
- if (param['chartType'] == 'year') {
- canvaColumn8 = this.initChart2('canvaColumn8', data);
- }
- }, _ => {
- uni.stopPullDownRefresh();
- if (param['chartType'] == 'day') {
- canvaColumn5 = this.initChart2('canvaColumn5', {
- categories: ['暂无数据'],
- series: [{
- name: '平均销售额',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'week') {
- canvaColumn6 = this.initChart2('canvaColumn6', {
- categories: ['暂无数据'],
- series: [{
- name: '平均销售额',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'month') {
- canvaColumn7 = this.initChart2('canvaColumn7', {
- categories: ['暂无数据'],
- series: [{
- name: '平均销售额',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'year') {
- canvaColumn8 = this.initChart2('canvaColumn8', {
- categories: ['暂无数据'],
- series: [{
- name: '平均销售额',
- data: [0]
- }]
- });
- }
- });
- },
- initChart(canvasId, chartData) {
- return new uCharts({
- $this: _self,
- canvasId: canvasId,
- enableScroll: true,
- type: 'column',
- legend: true,
- fontSize: 11,
- background: '#FFFFFF', //y轴颜色
- pixelRatio: 1,
- animation: true,
- categories: chartData.categories,
- series: chartData.series,
- xAxis: {
- type: 'grid',
- gridType: 'dash',
- rotateLabel: true,
- itemCount: 4, //x轴单屏显示数据的数量,默认为5个
- scrollShow: true, //新增是否显示滚动条,默认false
- scrollAlign: 'left', //滚动条初始位置
- scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
- scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
- // disableGrid:true,
- },
- yAxis: {
- //disabled:true
- },
- dataLabel: true,
- width: _self.cWidth * _self.pixelRatio,
- height: _self.cHeight * _self.pixelRatio,
- extra: {
- column: {
- // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
- width: 18
- }
- }
- });
- },
- initChart2(canvasId, chartData) {
- return new uCharts({
- $this: _self,
- canvasId: canvasId,
- enableScroll: true,
- type: 'column',
- legend: true,
- fontSize: 11,
- background: '#FFFFFF', //y轴颜色
- pixelRatio: 1,
- animation: true,
- categories: chartData.categories,
- series: chartData.series,
- xAxis: {
- type: 'grid',
- gridType: 'dash',
- rotateLabel: true,
- itemCount: 4, //x轴单屏显示数据的数量,默认为5个
- scrollShow: true, //新增是否显示滚动条,默认false
- scrollAlign: 'left', //滚动条初始位置
- scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
- scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
- // disableGrid:true,
- },
- yAxis: {
- //disabled:true
- },
- dataLabel: true,
- width: _self.cWidth2 * _self.pixelRatio,
- height: _self.cHeight2 * _self.pixelRatio,
- extra: {
- column: {
- // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
- width: 18
- }
- }
- });
- },
- touchLine1(e) {
- if (canvaColumn1) {
- canvaColumn1.scrollStart(e);
- }
- },
- moveLine1(e) {
- if (canvaColumn1) {
- canvaColumn1.scroll(e);
- }
- },
- touchEndLine1(e) {
- if (canvaColumn1) {
- canvaColumn1.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn1.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine2(e) {
- if (canvaColumn2) {
- canvaColumn2.scrollStart(e);
- }
- },
- moveLine2(e) {
- if (canvaColumn2) {
- canvaColumn2.scroll(e);
- }
- },
- touchEndLine2(e) {
- if (canvaColumn2) {
- canvaColumn2.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn2.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine3(e) {
- if (canvaColumn3) {
- canvaColumn3.scrollStart(e);
- }
- },
- moveLine3(e) {
- if (canvaColumn3) {
- canvaColumn3.scroll(e);
- }
- },
- touchEndLine3(e) {
- if (canvaColumn3) {
- canvaColumn3.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn3.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine4(e) {
- if (canvaColumn4) {
- canvaColumn4.scrollStart(e);
- }
- },
- moveLine4(e) {
- if (canvaColumn4) {
- canvaColumn4.scroll(e);
- }
- },
- touchEndLine4(e) {
- if (canvaColumn4) {
- canvaColumn4.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn4.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine5(e) {
- if (canvaColumn5) {
- canvaColumn5.scrollStart(e);
- }
- },
- moveLine5(e) {
- if (canvaColumn5) {
- canvaColumn5.scroll(e);
- }
- },
- touchEndLine5(e) {
- if (canvaColumn5) {
- canvaColumn5.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn5.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine6(e) {
- if (canvaColumn6) {
- canvaColumn6.scrollStart(e);
- }
- },
- moveLine6(e) {
- if (canvaColumn6) {
- canvaColumn6.scroll(e);
- }
- },
- touchEndLine6(e) {
- if (canvaColumn6) {
- canvaColumn6.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn6.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine7(e) {
- if (canvaColumn7) {
- canvaColumn7.scrollStart(e);
- }
- },
- moveLine7(e) {
- if (canvaColumn7) {
- canvaColumn7.scroll(e);
- }
- },
- touchEndLine7(e) {
- if (canvaColumn7) {
- canvaColumn7.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn7.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine8(e) {
- if (canvaColumn8) {
- canvaColumn8.scrollStart(e);
- }
- },
- moveLine8(e) {
- if (canvaColumn8) {
- canvaColumn8.scroll(e);
- }
- },
- touchEndLine8(e) {
- if (canvaColumn8) {
- canvaColumn8.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn8.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- }
- }
- </script>
- <style>
- page {
- /* background: #F2F2F2; */
- background: #FFFFFF;
- width: 750upx;
- overflow-x: hidden;
- }
- .head {
- display: flex;
- flex-direction: row;
- background: #206DC3;
- width: 750upx;
- height: 120upx;
- }
- .title {
- /* border-left: 10upx solid #0ea391; */
- color: #363D44;
- font-size: 62upx;
- font-family: "PingFang-SC-Bold";
- text-align: center;
- margin: auto;
- }
- .ri {
- width: 690upx;
- height: 210upx;
- background: #FFFFFF;
- border-radius: 15upx;
- /* 上移 */
- transform: translateY(-90upx);
- text-align: center;
- margin: auto;
- display: flex;
- flex-direction: row;
- /* 阴影 */
- box-shadow: 0upx -1upx 20upx #D3D3D3;
- /* box-shadow:0px 0px 10px 5px #aaa; */
- }
- .riShell {
- display: flex;
- flex-direction: row;
- margin: auto;
- }
- .riTitle {
- display: flex;
- flex-direction: column;
- margin: auto;
- }
- .riqi {
- display: flex;
- flex-direction: column;
- margin: auto;
- }
- .fourTitle {
- width: 690upx;
- height: 294upx;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- background: #FFFFFF;
- box-shadow: 0upx 0upx 20upx #D3D3D3;
- margin: auto;
- border-radius: 15upx;
- transform: translateY(-60upx);
- }
- .four {
- display: flex;
- flex-direction: row;
- margin: auto;
- width: 48%;
- }
- .fourImg {
- width: 54upx;
- height: 54upx;
- }
- .qiun-padding {
- padding: 2%;
- width: 96%;
- }
- .qiun-wrap {
- display: flex;
- flex-wrap: wrap;
- }
- .qiun-rows {
- display: flex;
- flex-direction: row !important;
- }
- .qiun-columns {
- display: flex;
- flex-direction: column !important;
- }
- .qiun-common-mt {
- margin-top: 0upx;
- height: 160upx;
- }
- .qiun-bg-white {
- background: #FFFFFF;
- }
- .qiun-title-bar {
- width: 100%;
- /* padding: 10upx 2%; */
- flex-wrap: nowrap;
- border-radius: 15upx;
- }
- .qiun-title-dot-light {
- width: 92%;
- border-left: 20upx;
- border-left: 10upx solid #206DC3;
- padding-left: 10upx;
- height: 32upx;
- font-family: "PingFang-SC-Bold";
- font-weight: bold;
- margin: auto;
- font-size: 32upx;
- color: #363D44;
- }
- .dis {
- transform: translateY(-13upx);
- font-size: 32upx;
- font-family: "PingFang-SC-Bold";
- color: #363D44;
- }
- .shijian {
- padding-top: 30upx;
- height: 80upx;
- width: 690upx;
- margin: auto;
- box-shadow: 0upx 0upx 10upx #D3D3D3;
- }
- .line {
- background: #ECECEC;
- height: 20upx;
- }
- .qiun-charts {
- width: 690upx;
- height: 550upx;
- padding-top: 50upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .qiun-charts2 {
- width: 690upx;
- height: 370upx;
- padding-top: 50upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .charts {
- width: 690upx;
- height: 550upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .charts2 {
- width: 690upx;
- height: 370upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .preImg {
- position: absolute;
- right: 30upx;
- width: 71upx;
- height: 57upx;
- }
- .nextImg {
- position: absolute;
- right: 30upx;
- width: 71upx;
- height: 57upx;
- }
- </style>
|