personnel_orientation.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767
  1. <template>
  2. <view>
  3. <!-- 搜索井下人员 -->
  4. <p-personnel-orientation-navbar :mine="mine"></p-personnel-orientation-navbar>
  5. <view class="content">
  6. <view class="tip_box">
  7. <view class="left">
  8. <view class="icon">
  9. <image v-if="status == 1" src="./icon/01.png" mode=""></image>
  10. <image v-if="status == 0" src="./icon/00.png" mode=""></image>
  11. </view>
  12. <view v-if="status == 1" class="text">数据正常</view>
  13. <view v-if="status == 0" class="text">数据异常</view>
  14. </view>
  15. <view class="right">
  16. <view class="text">数据更新时间</view>
  17. <view class="time">{{updated_at}}</view>
  18. </view>
  19. </view>
  20. <!-- 当前井下人员 -->
  21. <p-personnel-orientation-section-1 :mine="mine">
  22. <!-- 圆环图 -->
  23. <canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing" id="canvasRing"
  24. @touchstart="touchRing"></canvas>
  25. </p-personnel-orientation-section-1>
  26. <!-- <view class="overtime_box">
  27. <view class="left">
  28. <view class="icon">
  29. <image src="./icon/overtime.png" mode=""></image>
  30. </view>
  31. <view class="text">井下超时人员统计</view>
  32. </view>
  33. <view class="right">
  34. <view class="text">6</view>
  35. <view class="icon">
  36. <uni-icons type="arrowright" size="14"></uni-icons>
  37. </view>
  38. </view>
  39. </view> -->
  40. <p-personnel-orientation-section-3>
  41. <!-- 职能科室 -->
  42. <view class="section_title">职能科室</view>
  43. <canvas style="width: 720upx; height:800upx;" canvas-id="canvasRing2" id="canvasRing2"
  44. @touchstart="touchRing2"></canvas>
  45. <!-- 基层区队 -->
  46. <view class="section_title">基层区队</view>
  47. <canvas style="width: 720upx; height:800upx;" canvas-id="canvasRing3" id="canvasRing3"
  48. @touchstart="touchRing3"></canvas>
  49. </p-personnel-orientation-section-3>
  50. <!-- 各科室下井人数 -->
  51. <p-personnel-orientation-section-4 @changeDepart="changeDepart">
  52. <canvas style="width: 700upx; height:2500upx;" canvas-id="canvasColumn" id="canvasColumn"
  53. class="charts-rotate" @touchstart="touchColumn"></canvas>
  54. </p-personnel-orientation-section-4>
  55. </view>
  56. </view>
  57. </template>
  58. <script>
  59. import uCharts from '@/components/u-charts/u-charts.js';
  60. var _self;
  61. var canvaRing = null;
  62. var canvaRing2 = null;
  63. var canvaRing3 = null;
  64. // 柱状图
  65. var canvaColumn = null;
  66. export default {
  67. data() {
  68. return {
  69. // 矿编码
  70. mine: "",
  71. cWidth: '',
  72. cHeight: '',
  73. pixelRatio: 1,
  74. serverData: '',
  75. cWidth2: '', //横屏图表
  76. cHeight2: '', //横屏图表
  77. // 今日部门人数统计
  78. departType: "now",
  79. lastTapTimeoutFunc: null,
  80. lastTapDiffTime: 0,
  81. // 数据正常状态与更新时间
  82. status: 1,
  83. updated_at: ""
  84. }
  85. },
  86. onLoad(option) {
  87. console.log(option.mine)
  88. // 矿编码
  89. this.mine = option.mine
  90. _self = this;
  91. this.cWidth = uni.upx2px(720);
  92. this.cHeight = uni.upx2px(500);
  93. this.cHeight3 = uni.upx2px(750);
  94. this.getServerData();
  95. this.getServerData2();
  96. this.getServerData3();
  97. // 柱状图
  98. this.cWidth2 = uni.upx2px(700);
  99. this.cHeight2 = uni.upx2px(2400);
  100. this.getServerData4();
  101. // 获取数据正常状态
  102. this.$p_api.messageUpdateStatus({
  103. mine: this.mine
  104. }).then((res) => {
  105. // console.log(res.data.data)
  106. this.status = res.data.data.status
  107. this.updated_at = res.data.data.updated_at
  108. })
  109. // this.get_product_data_query_power()
  110. },
  111. methods: {
  112. get_product_data_query_power(){
  113. this.$p_api.product_data_query_power({
  114. staff_num: uni.getStorageSync('user').staff_num,
  115. data_module: "rydw"
  116. }).then((res)=>{
  117. if(res.data.content.status){
  118. console.log("可查看")
  119. }else{
  120. uni.showToast({
  121. icon:"none",
  122. title:"没有查看权限!"
  123. })
  124. setTimeout(()=>{
  125. uni.navigateBack()
  126. },1000)
  127. }
  128. })
  129. },
  130. // 改变今日部门人数统计的参数
  131. changeDepart(type) {
  132. // console.log(type)
  133. if (type == 1) {
  134. this.departType = "today"
  135. } else {
  136. this.departType = "now"
  137. }
  138. console.log(this.departType)
  139. this.getServerData4();
  140. },
  141. // 当前人员统计
  142. getServerData() {
  143. this.$p_api.personnel_people_now({
  144. mine: this.mine
  145. }).then((res) => {
  146. // console.log(res)
  147. let Ring = {
  148. series: [{
  149. name: '',
  150. data: 0
  151. }],
  152. people_total: 0
  153. }
  154. // res.data.data.people_distribute 图例
  155. Ring.people_total = res.data.data.people_total
  156. const series = res.data.data.people_distribute
  157. series.map(function(item, index) {
  158. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  159. var sevm = {};
  160. //给每一项中的参数初始化并赋值
  161. sevm['name'] = item.depart_name;
  162. sevm['data'] = item.pepole_num;
  163. //将项放进新的数组
  164. Ring.series[index] = sevm
  165. })
  166. // console.log(Ring)
  167. _self.showRing("canvasRing", Ring);
  168. })
  169. },
  170. // 职能科室人数统计
  171. getServerData2() {
  172. this.$p_api.personnel_office_total({
  173. mine: this.mine
  174. }).then((res) => {
  175. // console.log(res)
  176. let Ring2 = {
  177. series: [{
  178. name: '',
  179. data: 0
  180. }],
  181. people_total: 0
  182. }
  183. Ring2.people_total = res.data.people_total
  184. const series = res.data.data
  185. series.map(function(item, index) {
  186. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  187. var sevm = {};
  188. //给每一项中的参数初始化并赋值
  189. sevm['id'] = item.depart_id;
  190. sevm['name'] = item.depart_name;
  191. sevm['data'] = item.pepole_num;
  192. //将项放进新的数组
  193. Ring2.series[index] = sevm
  194. })
  195. // console.log(Ring2)
  196. _self.showRing2("canvasRing2", Ring2);
  197. })
  198. },
  199. // 基层区队人数统计
  200. getServerData3() {
  201. this.$p_api.personnel_basic_total({
  202. mine: this.mine
  203. }).then((res) => {
  204. // console.log(res.data.data)
  205. let Ring3 = {
  206. series: [{
  207. name: '',
  208. data: 0
  209. }],
  210. people_total: 0
  211. }
  212. Ring3.people_total = res.data.people_total
  213. const series = res.data.data
  214. series.map(function(item, index) {
  215. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  216. var sevm = {};
  217. //给每一项中的参数初始化并赋值
  218. sevm['name'] = item.depart_name;
  219. sevm['data'] = item.pepole_num;
  220. //将项放进新的数组
  221. Ring3.series[index] = sevm
  222. })
  223. // console.log(Ring3)
  224. _self.showRing3("canvasRing3", Ring3);
  225. })
  226. },
  227. showRing(canvasId, chartData) {
  228. canvaRing = new uCharts({
  229. $this: _self,
  230. canvasId: canvasId,
  231. type: 'ring',
  232. fontSize: 12,
  233. // 图例配置
  234. // legend: true,
  235. legend: {
  236. position: "right",
  237. lineHeight: 30,
  238. },
  239. title: {
  240. name: '总人数',
  241. color: '#666666',
  242. fontSize: 15 * _self.pixelRatio,
  243. offsetY: 0 * _self.pixelRatio,
  244. },
  245. subtitle: {
  246. name: chartData.people_total + '人',
  247. color: '#666666',
  248. fontSize: 15 * _self.pixelRatio,
  249. offsetY: 0 * _self.pixelRatio,
  250. },
  251. extra: {
  252. pie: {
  253. offsetAngle: -45,
  254. ringWidth: 30 * _self.pixelRatio,
  255. labelWidth: 20
  256. }
  257. },
  258. background: '#FFFFFF',
  259. pixelRatio: _self.pixelRatio,
  260. series: chartData.series,
  261. animation: true,
  262. width: _self.cWidth * _self.pixelRatio,
  263. height: _self.cHeight * _self.pixelRatio,
  264. disablePieStroke: true,
  265. // 百分比指示 关
  266. dataLabel: false,
  267. });
  268. },
  269. touchRing(e) {
  270. canvaRing.showToolTip(e, {
  271. // format: function(item) {
  272. // return item.name + ':' + item.data + '人'
  273. // },
  274. format: (item) => {
  275. let _this = this;
  276. let curTime = new Date().getTime();
  277. let lastTime = _this.lastTapDiffTime;
  278. _this.lastTapDiffTime = curTime;
  279. //两次点击间隔小于300ms, 认为是双击
  280. let diff = curTime - lastTime;
  281. if (diff < 300) {
  282. console.log("双击")
  283. uni.navigateTo({
  284. url: "./depart-people/depart-people?title=" + item.name + "&id=" + item.name +
  285. "&mine=" + this.mine
  286. })
  287. //_this.handleVideo('screen',index)自定义事件
  288. clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行
  289. } else {
  290. // 单击事件延时300毫秒执行
  291. _this.lastTapTimeoutFunc = setTimeout(function() {
  292. console.log("单击")
  293. //_this.handleVideo('playOrStop',index)自定义事件
  294. }, 300);
  295. }
  296. return item.name + ':' + item.data + '人'
  297. }
  298. });
  299. },
  300. showRing2(canvasId, chartData) {
  301. canvaRing2 = new uCharts({
  302. $this: _self,
  303. canvasId: canvasId,
  304. type: 'ring',
  305. fontSize: 12,
  306. // 图例配置
  307. legend: true,
  308. legend: {
  309. position: "bottom",
  310. lineHeight: 30,
  311. },
  312. title: {
  313. name: '总人数',
  314. color: '#666666',
  315. fontSize: 15 * _self.pixelRatio,
  316. offsetY: 0 * _self.pixelRatio,
  317. },
  318. subtitle: {
  319. name: chartData.people_total + '人',
  320. color: '#666666',
  321. fontSize: 15 * _self.pixelRatio,
  322. offsetY: 0 * _self.pixelRatio,
  323. },
  324. extra: {
  325. pie: {
  326. offsetAngle: -45,
  327. ringWidth: 30 * _self.pixelRatio,
  328. labelWidth: 5
  329. }
  330. },
  331. background: '#FFFFFF',
  332. pixelRatio: _self.pixelRatio,
  333. series: chartData.series,
  334. animation: true,
  335. width: _self.cWidth * _self.pixelRatio,
  336. height: _self.cHeight3 * _self.pixelRatio,
  337. disablePieStroke: true,
  338. // 百分比指示 关
  339. dataLabel: true,
  340. });
  341. },
  342. touchRing2(e) {
  343. canvaRing2.showToolTip(e, {
  344. format: (item) => {
  345. this.go_depart_people(item)
  346. return item.name + ':' + item.data + '人'
  347. }
  348. });
  349. console.log(e)
  350. },
  351. go_depart_people(item) {
  352. let _this = this;
  353. let curTime = new Date().getTime();
  354. let lastTime = _this.lastTapDiffTime;
  355. _this.lastTapDiffTime = curTime;
  356. //两次点击间隔小于300ms, 认为是双击
  357. let diff = curTime - lastTime;
  358. if (diff < 300) {
  359. console.log("双击")
  360. uni.navigateTo({
  361. url: "./depart-people/depart-people?title=" + item.name + "&id=" + item.id +
  362. "&mine=" + this.mine
  363. })
  364. //_this.handleVideo('screen',index)自定义事件
  365. clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行
  366. } else {
  367. // 单击事件延时300毫秒执行
  368. _this.lastTapTimeoutFunc = setTimeout(function() {
  369. console.log("单击")
  370. //_this.handleVideo('playOrStop',index)自定义事件
  371. }, 300);
  372. }
  373. },
  374. showRing3(canvasId, chartData) {
  375. canvaRing3 = new uCharts({
  376. $this: _self,
  377. canvasId: canvasId,
  378. type: 'ring',
  379. fontSize: 12,
  380. // 图例配置
  381. legend: true,
  382. legend: {
  383. position: "bottom",
  384. lineHeight: 30,
  385. },
  386. title: {
  387. name: '总人数',
  388. color: '#666666',
  389. fontSize: 15 * _self.pixelRatio,
  390. offsetY: 0 * _self.pixelRatio,
  391. },
  392. subtitle: {
  393. name: chartData.people_total + '人',
  394. color: '#666666',
  395. fontSize: 15 * _self.pixelRatio,
  396. offsetY: 0 * _self.pixelRatio,
  397. },
  398. extra: {
  399. pie: {
  400. offsetAngle: -45,
  401. ringWidth: 30 * _self.pixelRatio,
  402. labelWidth: 15
  403. }
  404. },
  405. background: '#FFFFFF',
  406. pixelRatio: _self.pixelRatio,
  407. series: chartData.series,
  408. animation: true,
  409. width: _self.cWidth * _self.pixelRatio,
  410. height: _self.cHeight3 * _self.pixelRatio,
  411. disablePieStroke: true,
  412. // 百分比指示 关
  413. dataLabel: true,
  414. });
  415. },
  416. touchRing3(e) {
  417. canvaRing3.showToolTip(e, {
  418. format: (item) => {
  419. // console.log(item)
  420. this.go_depart_people_2(item)
  421. return item.name + ':' + item.data + '人'
  422. }
  423. });
  424. },
  425. go_depart_people_2(item) {
  426. let _this = this;
  427. let curTime = new Date().getTime();
  428. let lastTime = _this.lastTapDiffTime;
  429. _this.lastTapDiffTime = curTime;
  430. //两次点击间隔小于300ms, 认为是双击
  431. let diff = curTime - lastTime;
  432. if (diff < 300) {
  433. console.log("双击")
  434. uni.navigateTo({
  435. url: "./depart-people-2/depart-people-2?title=" + item.name + "&mine=" + this.mine
  436. })
  437. //_this.handleVideo('screen',index)自定义事件
  438. clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行
  439. } else {
  440. // 单击事件延时300毫秒执行
  441. _this.lastTapTimeoutFunc = setTimeout(function() {
  442. console.log("单击")
  443. //_this.handleVideo('playOrStop',index)自定义事件
  444. }, 300);
  445. }
  446. },
  447. // 今日各部门人数统计
  448. getServerData4() {
  449. // console.log(this.departType)
  450. this.$p_api.personnel_depart_today({
  451. type: this.departType,
  452. mine: this.mine
  453. }).then((res) => {
  454. // console.log(res.data.data)
  455. let ColumnColumn = {
  456. "categories": [],
  457. "seriesData": []
  458. }
  459. const categories = res.data.data
  460. categories.map(function(item, index) {
  461. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  462. var sevm = {};
  463. //给每一项中的参数初始化并赋值
  464. sevm = item.depart_name;
  465. //将项放进新的数组
  466. ColumnColumn.categories[index] = sevm
  467. })
  468. const seriesData = res.data.data
  469. seriesData.map(function(item, index) {
  470. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  471. var sevm = {};
  472. //给每一项中的参数初始化并赋值
  473. sevm = item.pepole_num;
  474. //将项放进新的数组
  475. ColumnColumn.seriesData[index] = sevm
  476. })
  477. // console.log(ColumnColumn)
  478. _self.showColumnColumn("canvasColumn", ColumnColumn);
  479. })
  480. },
  481. showColumnColumn(canvasId, chartData) {
  482. canvaColumn = new uCharts({
  483. $this: _self,
  484. canvasId: canvasId,
  485. type: 'column',
  486. legend: {
  487. show: false,
  488. },
  489. fontSize: 9,
  490. background: '#FFFFFF',
  491. pixelRatio: _self.pixelRatio,
  492. animation: true,
  493. rotate: true,
  494. padding: [20, 15, 4, 15],
  495. // #ifdef MP-ALIPAY || MP-BAIDU
  496. rotateLock: true, //百度及支付宝需要锁定旋转
  497. // #endif
  498. categories: chartData.categories,
  499. series: [{
  500. "name": '',
  501. "data": chartData.seriesData
  502. }],
  503. xAxis: {
  504. disableGrid: true,
  505. rotateLabel: true,
  506. },
  507. yAxis: {
  508. // disabled:true
  509. },
  510. dataLabel: true,
  511. width: _self.cWidth2 * _self.pixelRatio,
  512. height: _self.cHeight2 * _self.pixelRatio,
  513. extra: {
  514. column: {
  515. type: 'group',
  516. // width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length,
  517. width: _self.cWidth * _self.pixelRatio * 2 / chartData.categories.length,
  518. // seriesGap:12,
  519. meter: {
  520. //这个是外层边框的宽度
  521. border: 4,
  522. //这个是内部填充颜色
  523. fillColor: '#E5FDC3'
  524. }
  525. }
  526. }
  527. });
  528. },
  529. touchColumn(e) {
  530. canvaColumn.showToolTip(e, {
  531. format: (item, category) => {
  532. let _this = this;
  533. let curTime = new Date().getTime();
  534. let lastTime = _this.lastTapDiffTime;
  535. _this.lastTapDiffTime = curTime;
  536. //两次点击间隔小于300ms, 认为是双击
  537. let diff = curTime - lastTime;
  538. if (diff < 300) {
  539. console.log("双击")
  540. uni.navigateTo({
  541. url: "./depart-people-2/depart-people-2?title=" + category +
  542. "&departType=" + this.departType + "&mine=" + this.mine
  543. })
  544. //_this.handleVideo('screen',index)自定义事件
  545. clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行
  546. } else {
  547. // 单击事件延时300毫秒执行
  548. _this.lastTapTimeoutFunc = setTimeout(function() {
  549. console.log("单击")
  550. //_this.handleVideo('playOrStop',index)自定义事件
  551. }, 300);
  552. }
  553. return category + ':' + item.data + item.name
  554. }
  555. });
  556. },
  557. }
  558. }
  559. </script>
  560. <style lang="scss">
  561. page {
  562. background-color: #f3f3f3;
  563. }
  564. .content {
  565. box-sizing: border-box;
  566. padding: 0 15rpx;
  567. background-color: #f3f3f3;
  568. .section_title {
  569. text-align: center;
  570. line-height: 96rpx;
  571. font-size: 28rpx;
  572. font-family: PingFangSC-Regular, PingFang SC;
  573. font-weight: 400;
  574. color: #232627;
  575. }
  576. }
  577. .tip_box {
  578. margin-top: 16rpx;
  579. background: #FFFFFF;
  580. box-shadow: 0rpx 3rpx 29rpx 0rpx rgba(59, 74, 116, 0.14);
  581. border-radius: 20rpx;
  582. box-sizing: border-box;
  583. padding: 0 50rpx;
  584. height: 132rpx;
  585. display: flex;
  586. justify-content: space-between;
  587. align-items: center;
  588. .left {
  589. display: flex;
  590. .icon {
  591. margin-right: 20rpx;
  592. image {
  593. width: 52rpx;
  594. height: 47rpx;
  595. }
  596. }
  597. .text {
  598. font-size: 34rpx;
  599. font-weight: 700;
  600. }
  601. }
  602. .right {
  603. .text {
  604. font-size: 26rpx;
  605. color: #999;
  606. margin-bottom: 20rpx;
  607. }
  608. .time {
  609. font-size: 30rpx;
  610. }
  611. }
  612. }
  613. .overtime_box {
  614. margin-top: 16rpx;
  615. background: #FFFFFF;
  616. box-shadow: 0rpx 3rpx 29rpx 0rpx rgba(59, 74, 116, 0.14);
  617. border-radius: 20rpx;
  618. box-sizing: border-box;
  619. padding: 0 50rpx;
  620. height: 110rpx;
  621. display: flex;
  622. justify-content: space-between;
  623. align-items: center;
  624. .left {
  625. display: flex;
  626. .icon {
  627. margin-right: 20rpx;
  628. image {
  629. display: block;
  630. width: 43rpx;
  631. height: 43rpx;
  632. }
  633. }
  634. .text {
  635. font-size: 34rpx;
  636. font-weight: 700;
  637. }
  638. }
  639. .right {
  640. display: flex;
  641. align-items: center;
  642. .text {
  643. font-weight: 700;
  644. color: #FF6A5C;
  645. font-size: 36rpx;
  646. }
  647. .icon {
  648. margin-left: 10rpx;
  649. }
  650. }
  651. }
  652. </style>