mainStatistics.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800
  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"> 用户: {{pnameData}}</font>
  9. </view>
  10. <view class="company">
  11. <font style="color: #BDD6F3;font-size:28upx">申泽智能物联</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;">今日收入总额:</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;">今日销售数量:</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;">本周收入总额:</font>
  47. <font style="color: #ED341F;">{{weekTotalMoney}}</font>
  48. </view>
  49. <view class="two">
  50. <font class="fontLeft" style="color: #596D83;">本周销售数量:</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;">本月收入总额:</font>
  62. <font style="color: #ED341F;">{{monthTotalMoney}}</font>
  63. </view>
  64. <view class="two">
  65. <font class="fontLeft" style="color: #596D83;">本月销售数量:</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;">本年收入总额:</font>
  77. <font style="color: #ED341F;">{{yearTotalMoney}}</font>
  78. </view>
  79. <view class="two">
  80. <font class="fontLeft" style="color: #596D83;">本年销售数量:</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;">投放机器数量:</font>
  92. <font style="color: #ED341F;">{{machineTotalNum}}</font>
  93. </view>
  94. <view class="two">
  95. <font class="fontLeft" style="color: #596D83;">运营机器数量:</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">今日销售情况</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">本周销售情况</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">本月销售情况</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">本年销售情况</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. // console.log("onShow");
  225. var test = uni.getStorageSync('test');
  226. //判断是不是初次登陆
  227. if (test == 2) {
  228. this.init();
  229. }
  230. this.day();
  231. },
  232. mounted() {
  233. // console.log("mounted");
  234. this.init();
  235. this.day();
  236. },
  237. methods: {
  238. ...mapActions('chart', ['getStatistics', 'getMainStatistics', 'getMachineNum']),
  239. async init() {
  240. if (!this.pname) {
  241. this.pname = this.loginUser.name;
  242. }
  243. _self = this;
  244. //图表中图
  245. this.cWidth = uni.upx2px(690);
  246. this.cHeight = uni.upx2px(370);
  247. await this.getMainStatisticsData();
  248. await this.initDateRang(new Date(), 'day');
  249. await this.initDateRang(new Date(), 'week');
  250. await this.initDateRang(new Date(), 'month');
  251. await this.initDateRang(new Date(), 'year');
  252. //初次登陆跳转后,把test变成2
  253. uni.setStorageSync('test', '2');
  254. },
  255. day(){
  256. var date = new Date();
  257. var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
  258. this.today = daystr;
  259. var str= '星期'+'日一二三四五六'.charAt(date.getDay());
  260. this.week = str;
  261. },
  262. initDateRang(day, chartType) {
  263. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  264. if (chartType === 'day') {
  265. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  266. }
  267. if (chartType === 'week') {
  268. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  269. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  270. }
  271. if (chartType === 'month') {
  272. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  273. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  274. }
  275. if (chartType === 'year') {
  276. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  277. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  278. }
  279. return this.getStatisticsData(chartType);
  280. },
  281. /**上一个 */
  282. pre(chartType) {
  283. let day;
  284. if (chartType === 'day') { // 日
  285. day = new Date(this.startDate1);
  286. day.setDate(day.getDate() - 1);
  287. }
  288. if (chartType === 'week') { // 周
  289. day = new Date(this.startDate2);
  290. day.setDate(day.getDate() - 7);
  291. }
  292. if (chartType === 'month') { // 月
  293. day = new Date(this.startDate3);
  294. day.setMonth(day.getMonth() - 1);
  295. }
  296. if (chartType === 'year') { // 年
  297. day = new Date(this.startDate4);
  298. day.setFullYear(day.getFullYear() - 1);
  299. }
  300. this.initDateRang(day, chartType);
  301. },
  302. /**下一个 */
  303. next(chartType) {
  304. let day;
  305. if (chartType === 'day') { // 日
  306. day = new Date(this.startDate1);
  307. day.setDate(day.getDate() + 1);
  308. }
  309. if (chartType === 'week') { // 周
  310. day = new Date(this.startDate2);
  311. day.setDate(day.getDate() + 7);
  312. }
  313. if (chartType === 'month') { // 月
  314. day = new Date(this.startDate3);
  315. day.setMonth(day.getMonth() + 1);
  316. }
  317. if (chartType === 'year') { // 年
  318. day = new Date(this.startDate4);
  319. day.setFullYear(day.getFullYear() + 1);
  320. }
  321. this.initDateRang(day, chartType);
  322. },
  323. getStatisticsData(chartType) {
  324. const param = {
  325. 'chartType': chartType
  326. };
  327. if (chartType == 'day') {
  328. param['startDate'] = this.startDate1;
  329. param['endDate'] = this.startDate1;
  330. }
  331. if (chartType == 'week') {
  332. param['startDate'] = this.startDate2;
  333. param['endDate'] = this.endDate2;
  334. }
  335. if (chartType == 'month') {
  336. param['startDate'] = this.startDate3;
  337. param['endDate'] = this.endDate3;
  338. }
  339. if (chartType == 'year') {
  340. param['startDate'] = this.startDate4;
  341. param['endDate'] = this.endDate4;
  342. }
  343. if (this.adminId) { // 子组件,则拿传过来的参
  344. param['adminId'] = this.adminId;
  345. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  346. param['adminId'] = this.loginUser['id'];
  347. }
  348. if (this.equipmentId) {
  349. param['equipmentId'] = this.equipmentId;
  350. }
  351. return this.getStatistics(param)
  352. .then(data => {
  353. uni.stopPullDownRefresh();
  354. if (param['chartType'] == 'day') {
  355. canvaColumn1 = this.initChart('canvaColumn1', data);
  356. }
  357. if (param['chartType'] == 'week') {
  358. canvaColumn2 = this.initChart('canvaColumn2', data);
  359. }
  360. if (param['chartType'] == 'month') {
  361. canvaColumn3 = this.initChart('canvaColumn3', data);
  362. }
  363. if (param['chartType'] == 'year') {
  364. canvaColumn4 = this.initChart('canvaColumn4', data);
  365. }
  366. }, _ => {
  367. uni.stopPullDownRefresh();
  368. if (param['chartType'] == 'day') {
  369. canvaColumn1 = this.initChart('canvaColumn1', {
  370. categories: ['暂无数据'],
  371. series: [{
  372. name: '销售个数',
  373. data: [0]
  374. }]
  375. });
  376. }
  377. if (param['chartType'] == 'week') {
  378. canvaColumn2 = this.initChart('canvaColumn2', {
  379. categories: ['暂无数据'],
  380. series: [{
  381. name: '销售个数',
  382. data: [0]
  383. }]
  384. });
  385. }
  386. if (param['chartType'] == 'month') {
  387. canvaColumn3 = this.initChart('canvaColumn3', {
  388. categories: ['暂无数据'],
  389. series: [{
  390. name: '销售个数',
  391. data: [0]
  392. }]
  393. });
  394. }
  395. if (param['chartType'] == 'year') {
  396. canvaColumn4 = this.initChart('canvaColumn4', {
  397. categories: ['暂无数据'],
  398. series: [{
  399. name: '销售个数',
  400. data: [0]
  401. }]
  402. });
  403. }
  404. });
  405. },
  406. initChart(canvasId, chartData) {
  407. return new uCharts({
  408. $this: _self,
  409. canvasId: canvasId,
  410. enableScroll: true,
  411. type: 'column',
  412. legend: true,
  413. fontSize: 10,
  414. background: '#FFFFFF', //y轴颜色
  415. pixelRatio: 1,
  416. animation: true,
  417. categories: chartData.categories,
  418. series: chartData.series,
  419. xAxis: {
  420. type: 'grid',
  421. gridType: 'dash',
  422. itemCount: 5, //x轴单屏显示数据的数量,默认为5个
  423. scrollShow: true, //新增是否显示滚动条,默认false
  424. scrollAlign: 'left', //滚动条初始位置
  425. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  426. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  427. disableGrid:true,
  428. },
  429. yAxis: {
  430. type: 'grid',
  431. gridType: 'soild',
  432. // disabled:true
  433. // disableGrid:true,
  434. },
  435. dataLabel: true,
  436. width: _self.cWidth * _self.pixelRatio,
  437. height: _self.cHeight * _self.pixelRatio,
  438. extra: {
  439. column: {
  440. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  441. width: 18
  442. }
  443. }
  444. });
  445. },
  446. getMainStatisticsData() {
  447. const param = {};
  448. if (this.adminId) { // 子组件,则拿传过来的参
  449. param['adminId'] = this.adminId;
  450. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  451. param['adminId'] = this.loginUser['id'];
  452. }
  453. if (this.equipmentId) {
  454. param['equipmentId'] = this.equipmentId;
  455. }
  456. // console.log('getMainStatisticsData:{}', param);
  457. var adminId = param.adminId;
  458. var equipmentId = this.equipmentId;
  459. var serverurl = this.serverurl;
  460. uni.request({
  461. url: serverurl + '/TEquipment/getMachineNum',
  462. data: {
  463. "adminId": adminId,
  464. "equipmentId": equipmentId
  465. },
  466. method: "POST",
  467. success: (res) => {
  468. var list = res.data.data;
  469. this.machineTotalNum = list[0];
  470. this.machineUseNum = list[1];
  471. }
  472. });
  473. return this.getMainStatistics(param)
  474. .then(data => {
  475. for (let bean of data) {
  476. if (bean['categorie'] === 'day') {
  477. this.dayTotalMoney = bean['salePrice'];
  478. this.dayTotalNum = bean['saleNum'];
  479. }
  480. if (bean['categorie'] === 'week') {
  481. this.weekTotalMoney = bean['salePrice'];
  482. this.weekTotalNum = bean['saleNum'];
  483. }
  484. if (bean['categorie'] === 'month') {
  485. this.monthTotalMoney = bean['salePrice'];
  486. this.monthTotalNum = bean['saleNum'];
  487. }
  488. if (bean['categorie'] === 'year') {
  489. this.yearTotalMoney = bean['salePrice'];
  490. this.yearTotalNum = bean['saleNum'];
  491. }
  492. }
  493. uni.stopPullDownRefresh();
  494. }, _ => void uni.stopPullDownRefresh());
  495. },
  496. touchLine1(e) {
  497. if (canvaColumn1) {
  498. canvaColumn1.scrollStart(e);
  499. }
  500. },
  501. moveLine1(e) {
  502. if (canvaColumn1) {
  503. canvaColumn1.scroll(e);
  504. }
  505. },
  506. touchEndLine1(e) {
  507. if (canvaColumn1) {
  508. canvaColumn1.scrollEnd(e);
  509. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  510. canvaColumn1.showToolTip(e, {
  511. format: function(item, category) {
  512. return category + ' ' + item.name + ':' + item.data
  513. }
  514. });
  515. }
  516. },
  517. touchLine2(e) {
  518. if (canvaColumn2) {
  519. canvaColumn2.scrollStart(e);
  520. }
  521. },
  522. moveLine2(e) {
  523. if (canvaColumn2) {
  524. canvaColumn2.scroll(e);
  525. }
  526. },
  527. touchEndLine2(e) {
  528. if (canvaColumn2) {
  529. canvaColumn2.scrollEnd(e);
  530. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  531. canvaColumn2.showToolTip(e, {
  532. format: function(item, category) {
  533. return category + ' ' + item.name + ':' + item.data
  534. }
  535. });
  536. }
  537. },
  538. touchLine3(e) {
  539. if (canvaColumn3) {
  540. canvaColumn3.scrollStart(e);
  541. }
  542. },
  543. moveLine3(e) {
  544. if (canvaColumn3) {
  545. canvaColumn3.scroll(e);
  546. }
  547. },
  548. touchEndLine3(e) {
  549. if (canvaColumn3) {
  550. canvaColumn3.scrollEnd(e);
  551. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  552. canvaColumn3.showToolTip(e, {
  553. format: function(item, category) {
  554. return category + ' ' + item.name + ':' + item.data
  555. }
  556. });
  557. }
  558. },
  559. touchLine4(e) {
  560. if (canvaColumn4) {
  561. canvaColumn4.scrollStart(e);
  562. }
  563. },
  564. moveLine4(e) {
  565. if (canvaColumn4) {
  566. canvaColumn4.scroll(e);
  567. }
  568. },
  569. touchEndLine4(e) {
  570. if (canvaColumn4) {
  571. canvaColumn4.scrollEnd(e);
  572. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  573. canvaColumn4.showToolTip(e, {
  574. format: function(item, category) {
  575. return category + ' ' + item.name + ':' + item.data
  576. }
  577. });
  578. }
  579. },
  580. }
  581. }
  582. </script>
  583. <style>
  584. page {
  585. /* background: #F2F2F2; */
  586. background: #FFFFFF;
  587. width: 750upx;
  588. overflow-x: hidden;
  589. }
  590. .head {
  591. display: flex;
  592. flex-direction: row;
  593. background: #206DC3;
  594. width: 750upx;
  595. height: 180upx;
  596. }
  597. .company {
  598. width: 48%;
  599. text-align: right;
  600. }
  601. .pname {
  602. display: flex;
  603. flex-direction: row;
  604. width: 40%;
  605. }
  606. .userFlagimg {
  607. padding-left: 30upx;
  608. padding-top: 10upx;
  609. width: 26upx;
  610. height: 28upx;
  611. }
  612. .wenzi {
  613. padding-left: 5upx;
  614. /* text-align:right; */
  615. white-space: nowrap;
  616. overflow: hidden;
  617. /* text-overflow: ellipsis; */
  618. }
  619. .ri {
  620. width: 690upx;
  621. height: 180upx;
  622. background: #FFFFFF;
  623. border-radius: 15upx;
  624. /* 上移 */
  625. transform: translateY(-90upx);
  626. text-align: center;
  627. margin: auto;
  628. display: flex;
  629. flex-direction: row;
  630. /* 阴影 */
  631. box-shadow: 0upx -1upx 20upx #D3D3D3;
  632. /* box-shadow:0px 0px 10px 5px #aaa; */
  633. }
  634. .riShell {
  635. display: flex;
  636. flex-direction: row;
  637. margin: auto;
  638. }
  639. .riTitle {
  640. display: flex;
  641. flex-direction: column;
  642. margin: auto;
  643. }
  644. .riqi {
  645. display: flex;
  646. flex-direction: column;
  647. margin: auto;
  648. }
  649. .fourTitle {
  650. width: 690upx;
  651. height: 294upx;
  652. display: flex;
  653. flex-direction: row;
  654. flex-wrap: wrap;
  655. background: #FFFFFF;
  656. box-shadow: 0upx 0upx 20upx #D3D3D3;
  657. margin: auto;
  658. border-radius: 15upx;
  659. transform: translateY(-60upx);
  660. }
  661. .four {
  662. display: flex;
  663. flex-direction: row;
  664. margin: auto;
  665. width: 48%;
  666. }
  667. .fourImg {
  668. width: 54upx;
  669. height: 54upx;
  670. }
  671. .qiun-padding {
  672. padding: 2%;
  673. width: 96%;
  674. }
  675. .qiun-wrap {
  676. display: flex;
  677. flex-wrap: wrap;
  678. }
  679. .qiun-rows {
  680. display: flex;
  681. flex-direction: row !important;
  682. }
  683. .qiun-columns {
  684. display: flex;
  685. flex-direction: column !important;
  686. }
  687. .qiun-common-mt {
  688. margin-top: 0upx;
  689. height: 160upx;
  690. }
  691. .qiun-bg-white {
  692. background: #FFFFFF;
  693. }
  694. .qiun-title-bar {
  695. width: 100%;
  696. /* padding: 10upx 2%; */
  697. flex-wrap: nowrap;
  698. border-radius: 15upx;
  699. }
  700. .qiun-title-dot-light {
  701. width: 92%;
  702. border-left: 20upx;
  703. border-left: 10upx solid #206DC3;
  704. padding-left: 10upx;
  705. height: 32upx;
  706. /* padding-bottom: 40upx; */
  707. font-family: "PingFang-SC-Bold";
  708. font-weight: bold;
  709. margin: auto;
  710. font-size: 32upx;
  711. color: #363D44;
  712. transform: translateY(20upx);
  713. }
  714. .dis{
  715. transform: translateY(-13upx);
  716. font-size: 32upx;
  717. font-family: "PingFang-SC-Bold";
  718. color: #363D44;
  719. }
  720. .shijian {
  721. transform: translateY(40upx);
  722. padding-top: 30upx;
  723. height: 80upx;
  724. width: 690upx;
  725. margin: auto;
  726. box-shadow: 0upx 0upx 10upx #D3D3D3;
  727. }
  728. .line{
  729. background:#ECECEC ;
  730. height: 20upx;
  731. }
  732. .qiun-charts {
  733. width: 690upx;
  734. height: 370upx;
  735. padding-top: 50upx;
  736. background-color: #FFFFFF;
  737. margin: auto;
  738. }
  739. .charts {
  740. width: 690upx;
  741. height: 370upx;
  742. background-color: #FFFFFF;
  743. margin: auto;
  744. }
  745. .preImg {
  746. position: absolute;
  747. left: 30upx;
  748. width: 71upx;
  749. height: 57upx;
  750. }
  751. .nextImg {
  752. position: absolute;
  753. right: 30upx;
  754. width: 71upx;
  755. height: 57upx;
  756. }
  757. .fontLeft {
  758. margin-right: 6upx;
  759. }
  760. </style>