mainStatistics.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850
  1. <template>
  2. <view>
  3. <view class="head">
  4. <view class="">
  5. <image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
  6. </view>
  7. <view class="pname">
  8. <font class="wenzi" style="color: #BDD6F3;font-size:28upx"> {{$t('mainStatistics.name')}}: {{pnameData}}</font>
  9. </view>
  10. <view class="company">
  11. <font style="color: #BDD6F3;font-size:28upx">{{$t('mainStatistics.company')}}</font>
  12. </view>
  13. </view>
  14. <view class="ri">
  15. <view class="riShell">
  16. <view class="riImg">
  17. <image style="width: 64upx;height: 64upx;padding-top: 20upx;" src="../../static/img/ri.png"></image>
  18. </view>
  19. <view class="riTitle">
  20. <view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
  21. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalMoney')}}:</font>
  22. <font style="color: #ED341F;">{{dayTotalMoney}}</font>
  23. </view>
  24. <view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
  25. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalNum')}}:</font>
  26. <font style="color: #ED341F;">{{dayTotalNum}}</font>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="riqi">
  31. <view style="text-align:right" class="tody">
  32. <font style="color: #596D83;">{{today}}</font>
  33. </view>
  34. <view style="text-align:right" class="xingqi">
  35. <font style="color: #596D83;">{{week}}</font>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="fourTitle">
  40. <view class="four">
  41. <view class="fourImg">
  42. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/zhou.png" mode=""></image>
  43. </view>
  44. <view class="fourShell">
  45. <view class="one">
  46. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalMoney')}}:</font>
  47. <font style="color: #ED341F;">{{weekTotalMoney}}</font>
  48. </view>
  49. <view class="two">
  50. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalNum')}}:</font>
  51. <font style="color: #ED341F;">{{weekTotalNum}}</font>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="four">
  56. <view class="fourImg">
  57. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/yue.png" mode=""></image>
  58. </view>
  59. <view class="fourShell">
  60. <view class="one">
  61. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalMoney')}}:</font>
  62. <font style="color: #ED341F;">{{monthTotalMoney}}</font>
  63. </view>
  64. <view class="two">
  65. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalNum')}}:</font>
  66. <font style="color: #ED341F;">{{monthTotalNum}}</font>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="four">
  71. <view class="fourImg">
  72. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/nian.png" mode=""></image>
  73. </view>
  74. <view class="fourShell">
  75. <view class="one">
  76. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalMoney')}}:</font>
  77. <font style="color: #ED341F;">{{yearTotalMoney}}</font>
  78. </view>
  79. <view class="two">
  80. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalNum')}}:</font>
  81. <font style="color: #ED341F;">{{yearTotalNum}}</font>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="four">
  86. <view class="fourImg">
  87. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/zong.png" mode=""></image>
  88. </view>
  89. <view class="fourShell">
  90. <view class="one">
  91. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineTotalNum')}}:</font>
  92. <font style="color: #ED341F;">{{machineTotalNum}}</font>
  93. </view>
  94. <view class="two">
  95. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineUseNum')}}:</font>
  96. <font style="color: #ED341F;">{{machineUseNum}}</font>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <view class="qiun-columns">
  102. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  103. <view class="qiun-title-dot-light"><view class="dis">{{$t('mainStatistics.day')}}</view></view>
  104. <view class="shijian" style="text-align: center;position: relative;">
  105. <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  106. <span>{{startDate1}}</span>
  107. <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  108. </view>
  109. </view>
  110. <view class="qiun-charts" style="background-color: #FFFFFF;">
  111. <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true @touchstart="touchLine1"
  112. @touchmove="moveLine1" @touchend="touchEndLine1" style="background-color: #FFFFFF;"></canvas>
  113. </view>
  114. </view>
  115. <view class="line"></view>
  116. <view class="qiun-columns">
  117. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  118. <view class="qiun-title-dot-light"><view class="dis">{{$t('mainStatistics.week')}}</view></view>
  119. <view class="shijian" style="text-align: center;position: relative;">
  120. <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  121. <span>{{startDate2}} -- {{endDate2}}</span>
  122. <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  123. </view>
  124. </view>
  125. <view class="qiun-charts" style="background-color: #FFFFFF;">
  126. <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true @touchstart="touchLine2"
  127. @touchmove="moveLine2" @touchend="touchEndLine2" style="background-color: #FFFFFF;"></canvas>
  128. </view>
  129. </view>
  130. <view class="line"></view>
  131. <view class="qiun-columns">
  132. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  133. <view class="qiun-title-dot-light"><view class="dis">{{$t('mainStatistics.month')}}</view></view>
  134. <view class="shijian" style="text-align: center;position: relative;">
  135. <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  136. <span>{{startDate3}} -- {{endDate3}}</span>
  137. <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  138. </view>
  139. </view>
  140. <view class="qiun-charts" style="background-color: #FFFFFF;">
  141. <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true @touchstart="touchLine3"
  142. @touchmove="moveLine3" @touchend="touchEndLine3" style="background-color: #FFFFFF;"></canvas>
  143. </view>
  144. </view>
  145. <view class="line"></view>
  146. <view class="qiun-columns">
  147. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  148. <view class="qiun-title-dot-light"><view class="dis">{{$t('mainStatistics.year')}}</view></view>
  149. <view class="shijian" style="text-align: center;position: relative;">
  150. <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  151. <span>{{startDate4}} -- {{endDate4}}</span>
  152. <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  153. </view>
  154. </view>
  155. <view class="qiun-charts" style="background-color: #FFFFFF;">
  156. <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true @touchstart="touchLine4"
  157. @touchmove="moveLine4" @touchend="touchEndLine4" style="background-color: #FFFFFF;"></canvas>
  158. </view>
  159. </view>
  160. </view>
  161. </template>
  162. <script>
  163. import {
  164. mapState,
  165. mapActions,
  166. mapMutations
  167. } from 'vuex';
  168. import uCharts from '@/components/u-charts/u-charts.js';
  169. import {
  170. dateUtils
  171. } from '@/common/util.js';
  172. var _self;
  173. var canvaColumn1 = null;
  174. var canvaColumn2 = null;
  175. var canvaColumn3 = null;
  176. var canvaColumn4 = null;
  177. export default {
  178. name: 'mainStatistics',
  179. props: {
  180. equipmentId: '',
  181. adminId: '',
  182. pname: '',
  183. },
  184. data() {
  185. return {
  186. machineTotalNum: 0,
  187. machineUseNum: 0,
  188. dayTotalMoney: 0,
  189. dayTotalNum: 0,
  190. weekTotalMoney: 0,
  191. weekTotalNum: 0,
  192. monthTotalMoney: 0,
  193. monthTotalNum: 0,
  194. yearTotalMoney: 0,
  195. yearTotalNum: 0,
  196. cWidth: '',
  197. cHeight: '',
  198. pixelRatio: 1,
  199. startDate1: '',
  200. startDate2: '',
  201. endDate2: '',
  202. startDate3: '',
  203. endDate3: '',
  204. startDate4: '',
  205. endDate4: '',
  206. today:'',
  207. week:''
  208. // pname:''
  209. }
  210. },
  211. computed: {
  212. ...mapState(['loginUser']),
  213. pnameData:{
  214. get(){
  215. return this.pname;
  216. }
  217. },
  218. },
  219. // onLoad(option){
  220. // console.log("onLoad")
  221. // this.init();
  222. // },
  223. onShow() {
  224. uni.setNavigationBarTitle({title: this.$t('mainStatistics.title')});
  225. // console.log("onShow");
  226. var test = uni.getStorageSync('test');
  227. //判断是不是初次登陆
  228. if (test == 2) {
  229. this.init();
  230. }
  231. this.day();
  232. },
  233. mounted() {
  234. // console.log("mounted");
  235. this.init();
  236. this.day();
  237. },
  238. methods: {
  239. ...mapActions('chart', ['getStatistics', 'getMainStatistics', 'getMachineNum']),
  240. async init() {
  241. if (!this.pname) {
  242. this.pname = this.loginUser.name;
  243. }
  244. _self = this;
  245. //图表中图
  246. this.cWidth = uni.upx2px(690);
  247. this.cHeight = uni.upx2px(370);
  248. await this.getMainStatisticsData();
  249. await this.initDateRang(new Date(), 'day');
  250. await this.initDateRang(new Date(), 'week');
  251. await this.initDateRang(new Date(), 'month');
  252. await this.initDateRang(new Date(), 'year');
  253. //初次登陆跳转后,把test变成2
  254. uni.setStorageSync('test', '2');
  255. },
  256. day(){
  257. var date = new Date();
  258. // var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
  259. var daystr = dateUtils.formateDate(date, 'yyyy-MM-dd');
  260. this.today = daystr;
  261. // var str= '星期'+'日一二三四五六'.charAt(date.getDay());
  262. this.week = this.$t('mainStatistics.week'+date.getDay());
  263. // if(this.$t('mainStatistics.name')=='Name'){
  264. // if(date.getDay()=='0'){
  265. // this.week = "SUN";
  266. // }
  267. // if(date.getDay()=='1'){
  268. // this.week = "MON";
  269. // }
  270. // if(date.getDay()=='2'){
  271. // this.week = "TUE";
  272. // }
  273. // if(date.getDay()=='3'){
  274. // this.week = "WED";
  275. // }
  276. // if(date.getDay()=='4'){
  277. // this.week = "THU";
  278. // }
  279. // if(date.getDay()=='5'){
  280. // this.week = "FRI";
  281. // }
  282. // if(date.getDay()=='6'){
  283. // this.week = "SAT";
  284. // }
  285. // }
  286. },
  287. initDateRang(day, chartType) {
  288. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  289. if (chartType === 'day') {
  290. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  291. }
  292. if (chartType === 'week') {
  293. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  294. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  295. }
  296. if (chartType === 'month') {
  297. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  298. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  299. }
  300. if (chartType === 'year') {
  301. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  302. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  303. }
  304. return this.getStatisticsData(chartType);
  305. },
  306. /**上一个 */
  307. pre(chartType) {
  308. let day;
  309. if (chartType === 'day') { // 日
  310. day = new Date(this.startDate1);
  311. day.setDate(day.getDate() - 1);
  312. }
  313. if (chartType === 'week') { // 周
  314. day = new Date(this.startDate2);
  315. day.setDate(day.getDate() - 7);
  316. }
  317. if (chartType === 'month') { // 月
  318. day = new Date(this.startDate3);
  319. day.setMonth(day.getMonth() - 1);
  320. }
  321. if (chartType === 'year') { // 年
  322. day = new Date(this.startDate4);
  323. day.setFullYear(day.getFullYear() - 1);
  324. }
  325. this.initDateRang(day, chartType);
  326. },
  327. /**下一个 */
  328. next(chartType) {
  329. let day;
  330. if (chartType === 'day') { // 日
  331. day = new Date(this.startDate1);
  332. day.setDate(day.getDate() + 1);
  333. }
  334. if (chartType === 'week') { // 周
  335. day = new Date(this.startDate2);
  336. day.setDate(day.getDate() + 7);
  337. }
  338. if (chartType === 'month') { // 月
  339. day = new Date(this.startDate3);
  340. day.setMonth(day.getMonth() + 1);
  341. }
  342. if (chartType === 'year') { // 年
  343. day = new Date(this.startDate4);
  344. day.setFullYear(day.getFullYear() + 1);
  345. }
  346. this.initDateRang(day, chartType);
  347. },
  348. getStatisticsData(chartType) {
  349. const param = {
  350. 'chartType': chartType
  351. };
  352. if (chartType == 'day') {
  353. param['startDate'] = this.startDate1;
  354. param['endDate'] = this.startDate1;
  355. }
  356. if (chartType == 'week') {
  357. param['startDate'] = this.startDate2;
  358. param['endDate'] = this.endDate2;
  359. }
  360. if (chartType == 'month') {
  361. param['startDate'] = this.startDate3;
  362. param['endDate'] = this.endDate3;
  363. }
  364. if (chartType == 'year') {
  365. param['startDate'] = this.startDate4;
  366. param['endDate'] = this.endDate4;
  367. }
  368. if (this.adminId) { // 子组件,则拿传过来的参
  369. param['adminId'] = this.adminId;
  370. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  371. param['adminId'] = this.loginUser['id'];
  372. }
  373. if (this.equipmentId) {
  374. param['equipmentId'] = this.equipmentId;
  375. }
  376. return this.getStatistics(param)
  377. .then(data => {
  378. uni.stopPullDownRefresh();
  379. if (param['chartType'] == 'day') {
  380. canvaColumn1 = this.initChart('canvaColumn1', data);
  381. }
  382. if (param['chartType'] == 'week') {
  383. canvaColumn2 = this.initChart('canvaColumn2', data);
  384. }
  385. if (param['chartType'] == 'month') {
  386. canvaColumn3 = this.initChart('canvaColumn3', data);
  387. }
  388. if (param['chartType'] == 'year') {
  389. canvaColumn4 = this.initChart('canvaColumn4', data);
  390. }
  391. }, _ => {
  392. uni.stopPullDownRefresh();
  393. if (param['chartType'] == 'day') {
  394. canvaColumn1 = this.initChart('canvaColumn1', {
  395. categories: ['暂无数据'],
  396. series: [{
  397. name: '销售个数',
  398. data: [0]
  399. }]
  400. });
  401. }
  402. if (param['chartType'] == 'week') {
  403. canvaColumn2 = this.initChart('canvaColumn2', {
  404. categories: ['暂无数据'],
  405. series: [{
  406. name: '销售个数',
  407. data: [0]
  408. }]
  409. });
  410. }
  411. if (param['chartType'] == 'month') {
  412. canvaColumn3 = this.initChart('canvaColumn3', {
  413. categories: ['暂无数据'],
  414. series: [{
  415. name: '销售个数',
  416. data: [0]
  417. }]
  418. });
  419. }
  420. if (param['chartType'] == 'year') {
  421. canvaColumn4 = this.initChart('canvaColumn4', {
  422. categories: ['暂无数据'],
  423. series: [{
  424. name: '销售个数',
  425. data: [0]
  426. }]
  427. });
  428. }
  429. });
  430. },
  431. initChart(canvasId, chartData) {
  432. if(this.$t('lang')!='zh'){
  433. chartData.categories = chartData.categories.map(e => {
  434. if(e.indexOf('点') >= 0){
  435. return e.replace('点',this.$t('mainStatistics.oclock'));
  436. }
  437. if(e.indexOf('周') >= 0){
  438. const weekNum = e.substring(e.length-1)=='日'?'0':e.substring(e.length-1);
  439. return this.$t('mainStatistics.week'+weekNum);
  440. }
  441. if(e.indexOf('月') >= 0){
  442. return e.replace('月',this.$t('mainStatistics.month'));
  443. }
  444. return e;
  445. });
  446. chartData.series = chartData.series.map(e => {
  447. if(e['name']=='销售个数'){
  448. e['name']=this.$t('mainStatistics.saleNum');
  449. }
  450. if(e['name']=='销售额'){
  451. e['name']=this.$t('mainStatistics.saleroom');
  452. }
  453. return e;
  454. });
  455. }
  456. return new uCharts({
  457. $this: _self,
  458. canvasId: canvasId,
  459. enableScroll: true,
  460. type: 'column',
  461. legend: true,
  462. fontSize: 10,
  463. background: '#FFFFFF', //y轴颜色
  464. pixelRatio: 1,
  465. animation: true,
  466. categories: chartData.categories,
  467. series: chartData.series,
  468. xAxis: {
  469. type: 'grid',
  470. gridType: 'dash',
  471. itemCount: 5, //x轴单屏显示数据的数量,默认为5个
  472. scrollShow: true, //新增是否显示滚动条,默认false
  473. scrollAlign: 'left', //滚动条初始位置
  474. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  475. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  476. disableGrid:true,
  477. },
  478. yAxis: {
  479. type: 'grid',
  480. gridType: 'soild',
  481. // disabled:true
  482. // disableGrid:true,
  483. },
  484. dataLabel: true,
  485. width: _self.cWidth * _self.pixelRatio,
  486. height: _self.cHeight * _self.pixelRatio,
  487. extra: {
  488. column: {
  489. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  490. width: 18
  491. }
  492. }
  493. });
  494. },
  495. getMainStatisticsData() {
  496. const param = {};
  497. if (this.adminId) { // 子组件,则拿传过来的参
  498. param['adminId'] = this.adminId;
  499. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  500. param['adminId'] = this.loginUser['id'];
  501. }
  502. if (this.equipmentId) {
  503. param['equipmentId'] = this.equipmentId;
  504. }
  505. // console.log('getMainStatisticsData:{}', param);
  506. var adminId = param.adminId;
  507. var equipmentId = this.equipmentId;
  508. var serverurl = this.serverurl;
  509. uni.request({
  510. url: serverurl + '/TEquipment/getMachineNum',
  511. data: {
  512. "adminId": adminId,
  513. "equipmentId": equipmentId
  514. },
  515. method: "POST",
  516. success: (res) => {
  517. var list = res.data.data;
  518. this.machineTotalNum = list[0];
  519. this.machineUseNum = list[1];
  520. }
  521. });
  522. return this.getMainStatistics(param)
  523. .then(data => {
  524. for (let bean of data) {
  525. if (bean['categorie'] === 'day') {
  526. this.dayTotalMoney = bean['salePrice'];
  527. this.dayTotalNum = bean['saleNum'];
  528. }
  529. if (bean['categorie'] === 'week') {
  530. this.weekTotalMoney = bean['salePrice'];
  531. this.weekTotalNum = bean['saleNum'];
  532. }
  533. if (bean['categorie'] === 'month') {
  534. this.monthTotalMoney = bean['salePrice'];
  535. this.monthTotalNum = bean['saleNum'];
  536. }
  537. if (bean['categorie'] === 'year') {
  538. this.yearTotalMoney = bean['salePrice'];
  539. this.yearTotalNum = bean['saleNum'];
  540. }
  541. }
  542. uni.stopPullDownRefresh();
  543. }, _ => void uni.stopPullDownRefresh());
  544. },
  545. touchLine1(e) {
  546. if (canvaColumn1) {
  547. canvaColumn1.scrollStart(e);
  548. }
  549. },
  550. moveLine1(e) {
  551. if (canvaColumn1) {
  552. canvaColumn1.scroll(e);
  553. }
  554. },
  555. touchEndLine1(e) {
  556. if (canvaColumn1) {
  557. canvaColumn1.scrollEnd(e);
  558. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  559. canvaColumn1.showToolTip(e, {
  560. format: function(item, category) {
  561. return category + ' ' + item.name + ':' + item.data
  562. }
  563. });
  564. }
  565. },
  566. touchLine2(e) {
  567. if (canvaColumn2) {
  568. canvaColumn2.scrollStart(e);
  569. }
  570. },
  571. moveLine2(e) {
  572. if (canvaColumn2) {
  573. canvaColumn2.scroll(e);
  574. }
  575. },
  576. touchEndLine2(e) {
  577. if (canvaColumn2) {
  578. canvaColumn2.scrollEnd(e);
  579. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  580. canvaColumn2.showToolTip(e, {
  581. format: function(item, category) {
  582. return category + ' ' + item.name + ':' + item.data
  583. }
  584. });
  585. }
  586. },
  587. touchLine3(e) {
  588. if (canvaColumn3) {
  589. canvaColumn3.scrollStart(e);
  590. }
  591. },
  592. moveLine3(e) {
  593. if (canvaColumn3) {
  594. canvaColumn3.scroll(e);
  595. }
  596. },
  597. touchEndLine3(e) {
  598. if (canvaColumn3) {
  599. canvaColumn3.scrollEnd(e);
  600. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  601. canvaColumn3.showToolTip(e, {
  602. format: function(item, category) {
  603. return category + ' ' + item.name + ':' + item.data
  604. }
  605. });
  606. }
  607. },
  608. touchLine4(e) {
  609. if (canvaColumn4) {
  610. canvaColumn4.scrollStart(e);
  611. }
  612. },
  613. moveLine4(e) {
  614. if (canvaColumn4) {
  615. canvaColumn4.scroll(e);
  616. }
  617. },
  618. touchEndLine4(e) {
  619. if (canvaColumn4) {
  620. canvaColumn4.scrollEnd(e);
  621. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  622. canvaColumn4.showToolTip(e, {
  623. format: function(item, category) {
  624. return category + ' ' + item.name + ':' + item.data
  625. }
  626. });
  627. }
  628. },
  629. }
  630. }
  631. </script>
  632. <style>
  633. page {
  634. /* background: #F2F2F2; */
  635. background: #FFFFFF;
  636. width: 750upx;
  637. overflow-x: hidden;
  638. }
  639. .head {
  640. display: flex;
  641. flex-direction: row;
  642. background: #206DC3;
  643. width: 750upx;
  644. height: 180upx;
  645. }
  646. .company {
  647. width: 48%;
  648. text-align: right;
  649. }
  650. .pname {
  651. display: flex;
  652. flex-direction: row;
  653. width: 40%;
  654. }
  655. .userFlagimg {
  656. padding-left: 30upx;
  657. padding-top: 10upx;
  658. width: 26upx;
  659. height: 28upx;
  660. }
  661. .wenzi {
  662. padding-left: 5upx;
  663. /* text-align:right; */
  664. white-space: nowrap;
  665. overflow: hidden;
  666. /* text-overflow: ellipsis; */
  667. }
  668. .ri {
  669. width: 690upx;
  670. height: 180upx;
  671. background: #FFFFFF;
  672. border-radius: 15upx;
  673. /* 上移 */
  674. transform: translateY(-90upx);
  675. text-align: center;
  676. margin: auto;
  677. display: flex;
  678. flex-direction: row;
  679. /* 阴影 */
  680. box-shadow: 0upx -1upx 20upx #D3D3D3;
  681. /* box-shadow:0px 0px 10px 5px #aaa; */
  682. }
  683. .riShell {
  684. display: flex;
  685. flex-direction: row;
  686. margin: auto;
  687. }
  688. .riTitle {
  689. display: flex;
  690. flex-direction: column;
  691. margin: auto;
  692. }
  693. .riqi {
  694. display: flex;
  695. flex-direction: column;
  696. margin: auto;
  697. }
  698. .fourTitle {
  699. width: 690upx;
  700. height: 294upx;
  701. display: flex;
  702. flex-direction: row;
  703. flex-wrap: wrap;
  704. background: #FFFFFF;
  705. box-shadow: 0upx 0upx 20upx #D3D3D3;
  706. margin: auto;
  707. border-radius: 15upx;
  708. transform: translateY(-60upx);
  709. }
  710. .four {
  711. display: flex;
  712. flex-direction: row;
  713. margin: auto;
  714. width: 48%;
  715. }
  716. .fourImg {
  717. width: 54upx;
  718. height: 54upx;
  719. }
  720. .qiun-padding {
  721. padding: 2%;
  722. width: 96%;
  723. }
  724. .qiun-wrap {
  725. display: flex;
  726. flex-wrap: wrap;
  727. }
  728. .qiun-rows {
  729. display: flex;
  730. flex-direction: row !important;
  731. }
  732. .qiun-columns {
  733. display: flex;
  734. flex-direction: column !important;
  735. }
  736. .qiun-common-mt {
  737. margin-top: 0upx;
  738. height: 160upx;
  739. }
  740. .qiun-bg-white {
  741. background: #FFFFFF;
  742. }
  743. .qiun-title-bar {
  744. width: 100%;
  745. /* padding: 10upx 2%; */
  746. flex-wrap: nowrap;
  747. border-radius: 15upx;
  748. }
  749. .qiun-title-dot-light {
  750. width: 92%;
  751. border-left: 20upx;
  752. border-left: 10upx solid #206DC3;
  753. padding-left: 10upx;
  754. height: 32upx;
  755. /* padding-bottom: 40upx; */
  756. font-family: "PingFang-SC-Bold";
  757. font-weight: bold;
  758. margin: auto;
  759. font-size: 32upx;
  760. color: #363D44;
  761. transform: translateY(20upx);
  762. }
  763. .dis{
  764. transform: translateY(-13upx);
  765. font-size: 32upx;
  766. font-family: "PingFang-SC-Bold";
  767. color: #363D44;
  768. }
  769. .shijian {
  770. transform: translateY(40upx);
  771. padding-top: 30upx;
  772. height: 80upx;
  773. width: 690upx;
  774. margin: auto;
  775. box-shadow: 0upx 0upx 10upx #D3D3D3;
  776. }
  777. .line{
  778. background:#ECECEC ;
  779. height: 20upx;
  780. }
  781. .qiun-charts {
  782. width: 690upx;
  783. height: 370upx;
  784. padding-top: 50upx;
  785. background-color: #FFFFFF;
  786. margin: auto;
  787. }
  788. .charts {
  789. width: 690upx;
  790. height: 370upx;
  791. background-color: #FFFFFF;
  792. margin: auto;
  793. }
  794. .preImg {
  795. position: absolute;
  796. left: 30upx;
  797. width: 71upx;
  798. height: 57upx;
  799. }
  800. .nextImg {
  801. position: absolute;
  802. right: 30upx;
  803. width: 71upx;
  804. height: 57upx;
  805. }
  806. .fontLeft {
  807. margin-right: 6upx;
  808. }
  809. </style>