|
@@ -1,172 +1,190 @@
|
|
<template>
|
|
<template>
|
|
- <view class="chart-panel">
|
|
|
|
- <view class="charts-item">
|
|
|
|
- <view class="flex">
|
|
|
|
- <text
|
|
|
|
- style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
|
|
|
|
- <view class="bold font-size-30">占比饼状图</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="charts-box">
|
|
|
|
- <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="charts-item">
|
|
|
|
- <view class="flex">
|
|
|
|
- <text
|
|
|
|
- style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
|
|
|
|
- <view class="bold font-size-30">金字塔漏斗图</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="charts-box" style="height: 500px;">
|
|
|
|
- <qiun-data-charts type="funnel" :opts="optsFunel" :chartData="chartData" />
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="charts-item">
|
|
|
|
- <view class="flex">
|
|
|
|
- <text
|
|
|
|
- style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
|
|
|
|
- <view class="bold font-size-30">城市词云图</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="charts-box" style="height: 500px;">
|
|
|
|
- <qiun-data-charts type="word" :opts="opts" :chartData="chartDataWord" />
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view >
|
|
|
|
+ <view class="chart-panel" v-if="userInfo.nickname">
|
|
|
|
+ <view class="charts-item">
|
|
|
|
+ <view class="flex">
|
|
|
|
+ <text
|
|
|
|
+ style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
|
|
|
|
+ <view class="bold font-size-30">占比饼状图</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="charts-box">
|
|
|
|
+ <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="charts-item">
|
|
|
|
+ <view class="flex">
|
|
|
|
+ <text
|
|
|
|
+ style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
|
|
|
|
+ <view class="bold font-size-30">金字塔漏斗图</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="charts-box" style="height: 500px;">
|
|
|
|
+ <qiun-data-charts type="funnel" :opts="optsFunel" :chartData="chartData" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="charts-item">
|
|
|
|
+ <view class="flex">
|
|
|
|
+ <text
|
|
|
|
+ style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
|
|
|
|
+ <view class="bold font-size-30">城市词云图</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="charts-box" style="height: 500px;">
|
|
|
|
+ <qiun-data-charts type="word" :opts="opts" :chartData="chartDataWord" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-else>
|
|
|
|
+ <u-empty mode="permission" margin-top="180" icon-size="600" text="请使用企业身份登录"
|
|
|
|
+ src="/static/images/permission.png">
|
|
|
|
+ <router-link to="/pages/login/login" slot="bottom" class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
|
|
|
|
+ 点击登录
|
|
|
|
+ </router-link>
|
|
|
|
+ </u-empty>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import {
|
|
|
|
- getTalentsCount
|
|
|
|
- } from '@/api/app';
|
|
|
|
- import {
|
|
|
|
- mapActions,
|
|
|
|
- mapGetters
|
|
|
|
- } from 'vuex'
|
|
|
|
|
|
+ import {
|
|
|
|
+ getTalentsCount
|
|
|
|
+ } from '@/api/app';
|
|
|
|
+ import {
|
|
|
|
+ mapActions,
|
|
|
|
+ mapGetters
|
|
|
|
+ } from 'vuex'
|
|
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- chartData: {},
|
|
|
|
- chartDataWord: {},
|
|
|
|
- opts: {
|
|
|
|
- // dataLabel: false,
|
|
|
|
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
|
|
- "#ea7ccc"
|
|
|
|
- ],
|
|
|
|
- // padding: [5, 5, 5, 5],
|
|
|
|
- xAxis: {
|
|
|
|
- disableGrid: true
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- data: [{
|
|
|
|
- min: 0
|
|
|
|
- }]
|
|
|
|
- },
|
|
|
|
- enableScroll: false,
|
|
|
|
- legend: {
|
|
|
|
- padding: 5,
|
|
|
|
- margin: 5,
|
|
|
|
- float: 'left'
|
|
|
|
- },
|
|
|
|
- extra: {
|
|
|
|
- pie: {
|
|
|
|
- activeOpacity: 0.5,
|
|
|
|
- activeRadius: 10,
|
|
|
|
- offsetAngle: 0,
|
|
|
|
- labelWidth: 10,
|
|
|
|
- border: true,
|
|
|
|
- borderWidth: 1,
|
|
|
|
- borderColor: "#FFFFFF",
|
|
|
|
- // linearType: "custom"
|
|
|
|
- },
|
|
|
|
- funnel: {
|
|
|
|
- activeOpacity: 0.3,
|
|
|
|
- activeWidth: 10,
|
|
|
|
- border: true,
|
|
|
|
- borderWidth: 2,
|
|
|
|
- borderColor: "#FFFFFF",
|
|
|
|
- fillOpacity: 1,
|
|
|
|
- labelAlign: "right",
|
|
|
|
- type: "pyramid"
|
|
|
|
- },
|
|
|
|
- word: {
|
|
|
|
- type: "normal",
|
|
|
|
- autoColors: true
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- optsFunel: {
|
|
|
|
- dataLabel: false,
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onLoad(options) {
|
|
|
|
- Object.assign(this.optsFunel, this.opts);
|
|
|
|
- },
|
|
|
|
- onReady() {
|
|
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ chartData: {},
|
|
|
|
+ chartDataWord: {},
|
|
|
|
+ opts: {
|
|
|
|
+ // dataLabel: false,
|
|
|
|
+ color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
|
|
+ "#ea7ccc"
|
|
|
|
+ ],
|
|
|
|
+ // padding: [5, 5, 5, 5],
|
|
|
|
+ xAxis: {
|
|
|
|
+ disableGrid: true
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ data: [{
|
|
|
|
+ min: 0
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ enableScroll: false,
|
|
|
|
+ legend: {
|
|
|
|
+ padding: 5,
|
|
|
|
+ margin: 5,
|
|
|
|
+ float: 'left'
|
|
|
|
+ },
|
|
|
|
+ extra: {
|
|
|
|
+ pie: {
|
|
|
|
+ activeOpacity: 0.5,
|
|
|
|
+ activeRadius: 10,
|
|
|
|
+ offsetAngle: 0,
|
|
|
|
+ labelWidth: 10,
|
|
|
|
+ border: true,
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ borderColor: "#FFFFFF",
|
|
|
|
+ // linearType: "custom"
|
|
|
|
+ },
|
|
|
|
+ funnel: {
|
|
|
|
+ activeOpacity: 0.3,
|
|
|
|
+ activeWidth: 10,
|
|
|
|
+ border: true,
|
|
|
|
+ borderWidth: 2,
|
|
|
|
+ borderColor: "#FFFFFF",
|
|
|
|
+ fillOpacity: 1,
|
|
|
|
+ labelAlign: "right",
|
|
|
|
+ type: "pyramid"
|
|
|
|
+ },
|
|
|
|
+ word: {
|
|
|
|
+ type: "normal",
|
|
|
|
+ autoColors: true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ optsFunel: {
|
|
|
|
+ dataLabel: false,
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(options) {
|
|
|
|
+ Object.assign(this.optsFunel, this.opts);
|
|
|
|
+ },
|
|
|
|
+ onReady() {
|
|
|
|
|
|
- },
|
|
|
|
- onUnload() {},
|
|
|
|
- onShow() {
|
|
|
|
- this.getCountFun();
|
|
|
|
- this.getUser();
|
|
|
|
- },
|
|
|
|
- onPullDownRefresh() {
|
|
|
|
- this.getCountFun();
|
|
|
|
- this.getUser().then(() => {
|
|
|
|
- uni.stopPullDownRefresh();
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- onHide() {},
|
|
|
|
- methods: {
|
|
|
|
- ...mapActions(['getUser']),
|
|
|
|
- async getCountFun() {
|
|
|
|
- const {
|
|
|
|
- status,
|
|
|
|
- data
|
|
|
|
- } = await getTalentsCount({});
|
|
|
|
- if (status == 1) {
|
|
|
|
- let res = {
|
|
|
|
- series: [{
|
|
|
|
- data: data.normal,
|
|
|
|
- }]
|
|
|
|
- };
|
|
|
|
- this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
|
- res = {
|
|
|
|
- series: data.word
|
|
|
|
- };
|
|
|
|
- this.chartDataWord = JSON.parse(JSON.stringify(res));
|
|
|
|
- }
|
|
|
|
- uni.stopPullDownRefresh();
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- ...mapGetters(['sysInfo', 'appConfig']),
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ onUnload() {},
|
|
|
|
+ onShow() {
|
|
|
|
+ this.getCountFun();
|
|
|
|
+ this.getUser();
|
|
|
|
+ },
|
|
|
|
+ onPullDownRefresh() {
|
|
|
|
+ this.getCountFun();
|
|
|
|
+ this.getUser().then(() => {
|
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onHide() {},
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapActions(['getUser']),
|
|
|
|
+ async getCountFun() {
|
|
|
|
+ const {
|
|
|
|
+ status,
|
|
|
|
+ data
|
|
|
|
+ } = await getTalentsCount({});
|
|
|
|
+ if (status == 1) {
|
|
|
|
+ let res = {
|
|
|
|
+ series: [{
|
|
|
|
+ data: data.normal,
|
|
|
|
+ }]
|
|
|
|
+ };
|
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
|
+ res = {
|
|
|
|
+ series: data.word
|
|
|
|
+ };
|
|
|
|
+ this.chartDataWord = JSON.parse(JSON.stringify(res));
|
|
|
|
+ }
|
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(['userInfo', 'sysInfo', 'appConfig']),
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
- page {
|
|
|
|
- padding: 0;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
|
|
+ page {
|
|
|
|
+ padding: 0;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart-panel {
|
|
|
|
+ padding-bottom: calc(50px + env(safe-area-inset-bottom));
|
|
|
|
+ }
|
|
|
|
|
|
- .chart-panel {
|
|
|
|
- padding-bottom: calc(50px + env(safe-area-inset-bottom));
|
|
|
|
- }
|
|
|
|
|
|
+ .charts-item {
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.03);
|
|
|
|
+ border-radius: 6px 6px 6px 6px;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ margin: 30rpx;
|
|
|
|
+ }
|
|
|
|
|
|
- .charts-item {
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.03);
|
|
|
|
- border-radius: 6px 6px 6px 6px;
|
|
|
|
- padding: 20rpx;
|
|
|
|
- margin: 30rpx;
|
|
|
|
- }
|
|
|
|
|
|
+ /* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
|
|
|
|
+ .charts-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 350px;
|
|
|
|
+ }
|
|
|
|
|
|
- /* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
|
|
|
|
- .charts-box {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 350px;
|
|
|
|
- }
|
|
|
|
|
|
+ .user-login {
|
|
|
|
+ background: #DD4250;
|
|
|
|
+ box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
|
|
|
|
+ border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
|
|
+ border: 2rpx solid #DD4250;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|