123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <template>
- <view>
- <view class="section">
- <view class="title" @click="change_qushi_title()">{{qushi_title}}
- <uni-icons type="bottom" style="margin-left: 10rpx;"></uni-icons>
- </view>
- <view class="charts-box" v-if="qushi_type == 0">
- <qiun-data-charts type="column" :opts="column_1" tooltipFormat="personnel_statistics_ren"
- :chartData="chartData_column_1" />
- </view>
- <view class="charts-box" v-if="qushi_type == 1">
- <qiun-data-charts type="column" :opts="column_2" tooltipFormat="personnel_statistics_ren"
- :chartData="chartData_column_2" />
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: "personnel-orientation-population-trend",
- props:[
- "mine"
- ],
- data() {
- return {
- // 周、月下井趋势
- column_1: {
- legend: {
- position: "top",
- },
- dataLabel: false,
- xAxis: {
- disableGrid: true
- },
- extra: {
- column: {
- type: "stack",
- width: 20
- }
- }
- },
- column_2: {
- legend: {
- position: "top",
- },
- dataLabel: false,
- xAxis: {
- disableGrid: true,
- fontSize: 11
- },
- extra: {
- column: {
- type: "stack",
- width: 10
- }
- }
- },
- chartData_column_1: {},
- chartData_column_2: {},
-
- qushi_title: "周下井人数趋势",
- qushi_title_list: ["周下井人数趋势", "月下井人数趋势"],
- qushi_type: 0
- };
- },
- mounted() {
- console.log(this.mine)
- this.getServerData()
- },
- methods: {
- getServerData() {
- this.$p_api.personnel_getPeopleXJQS({
- type: "week",
- mine: this.mine
- }).then((res)=>{
- this.chartData_column_1 = res.data.data
- })
- this.$p_api.personnel_getPeopleXJQS({
- type: "month",
- mine: this.mine
- }).then((res)=>{
- this.chartData_column_2 = res.data.data
- })
-
- // setTimeout(() => {
- // let res = {
- // categories: ["30日", "31日", "1日", "2日", "3日", "4日", "5日"],
- // series: [{
- // name: "早班",
- // data: [35, 36, 31, 33, 13, 34, 32]
- // },
- // {
- // name: "中班",
- // data: [18, 27, 21, 24, 6, 28, 2]
- // },
- // {
- // name: "晚班",
- // data: [18, 27, 21, 24, 6, 28, 4]
- // }
- // ]
- // };
- // this.chartData_column_1 = JSON.parse(JSON.stringify(res));
- // }, 500);
- // setTimeout(() => {
- // let res = {
- // categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",
- // "12月"
- // ],
- // series: [{
- // name: "早班",
- // data: [35, 36, 31, 33, 13, 34, 32, 31, 33, 13, 34, 32]
- // },
- // {
- // name: "中班",
- // data: [18, 27, 21, 24, 6, 28, 2, 31, 33, 13, 34, 32]
- // },
- // {
- // name: "晚班",
- // data: [18, 27, 21, 24, 6, 28, 4, 31, 33, 13, 34, 32]
- // }
- // ]
- // };
- // this.chartData_column_2 = JSON.parse(JSON.stringify(res));
- // }, 500);
-
- },
- change_qushi_title(type) {
- uni.showActionSheet({
- itemList: this.qushi_title_list,
- success: (res) => {
- // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
- this.qushi_title = this.qushi_title_list[res.tapIndex]
- this.qushi_type = res.tapIndex
- }
- });
- }
- }
- }
- </script>
- <style lang="scss">
- .charts-box {
- width: 350px;
- height: 300px;
- }
- .content {
- width: 750rpx;
- box-sizing: border-box;
- padding: 25rpx;
- }
- .section {
- background-color: #FFFFFF;
- border-radius: 8px;
- overflow: hidden;
- padding-bottom: 30rpx;
- margin-bottom: 25rpx;
- .title {
- padding: 40rpx 20rpx 0;
- font-weight: 700;
- }
- }
- </style>
|