Analysis.vue 9.6 KB
Newer Older
wanli's avatar
wanli committed
1 2 3
<template>
  <a-grid-content>
    <a-row :gutter="24">
4 5 6 7 8 9 10 11 12 13 14 15 16 17
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <a-chart-card
          :loading="loading"
          contentHeight="46px"
          :total="numeral(summary.total_app).format('0,0')"
          :title="$t('app.analysis.total-sales')"
        >
wanli's avatar
wanli committed
18 19
          <a-tooltip placement="top" slot="action">
            <span slot="title">
20
              <span v-html="$t('app.analysis.introduce')"></span>
wanli's avatar
wanli committed
21 22 23
            </span>
            <a-icon type="info-circle-o" />
          </a-tooltip>
24 25 26 27 28 29 30
          <a-field
            slot="footer"
            :label="$t('app.analysis.day-sales')"
            :value="numeral(summary.today_app).format('0,0')"
          />
          <a-trend flag="up" :style="{ marginRight: '16px' }">
            {{ $t("app.analysis.week") }}
31
            <span class="trendText">0%</span>
wanli's avatar
wanli committed
32 33
          </a-trend>
          <a-trend flag="down">
34
            {{ $t("app.analysis.day") }}
35
            <span class="trendText">0%</span>
wanli's avatar
wanli committed
36 37 38
          </a-trend>
        </a-chart-card>
      </a-col>
39 40 41 42 43 44 45 46 47 48 49 50 51 52
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <a-chart-card
          :loading="loading"
          contentHeight="46px"
          :total="numeral(summary.total_package).format('0,0')"
          :title="$t('app.analysis.visits')"
        >
wanli's avatar
wanli committed
53 54
          <a-tooltip placement="top" slot="action">
            <span slot="title">
55
              <span v-html="$t('app.analysis.introduce')"></span>
wanli's avatar
wanli committed
56 57 58
            </span>
            <a-icon type="info-circle-o" />
          </a-tooltip>
59 60 61 62 63
          <a-field
            slot="footer"
            :label="$t('app.analysis.day-visits')"
            :value="numeral(summary.today_package).format('0,0')"
          />
wanli's avatar
wanli committed
64
          <!-- <a-mini-area color="#975FE4" /> -->
65 66
          <a-trend flag="up" :style="{ marginRight: '16px' }">
            {{ $t("app.analysis.week") }}
67
            <span class="trendText">0%</span>
wanli's avatar
wanli committed
68 69
          </a-trend>
          <a-trend flag="down">
70
            {{ $t("app.analysis.day") }}
71
            <span class="trendText">0%</span>
wanli's avatar
wanli committed
72 73 74
          </a-trend>
        </a-chart-card>
      </a-col>
75 76 77 78 79 80 81 82 83 84 85 86 87 88
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <a-chart-card
          :loading="loading"
          contentHeight="46px"
          :total="numeral(summary.total_user).format('0,0')"
          :title="$t('app.analysis.payments')"
        >
wanli's avatar
wanli committed
89 90
          <a-tooltip placement="top" slot="action">
            <span slot="title">
91
              <span v-html="$t('app.analysis.introduce')"></span>
wanli's avatar
wanli committed
92 93 94 95
            </span>
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <!-- <a-mini-bar /> -->
96 97 98 99 100 101 102 103 104 105 106
          <a-mini-progress
            :percent="55"
            :strokeWidth="8"
            :target="80"
            color="#975FE4"
          />
          <a-field
            slot="footer"
            :label="$t('app.analysis.conversion-rate')"
            :value="numeral(summary.today_user).format('0,0')"
          />
wanli's avatar
wanli committed
107 108
        </a-chart-card>
      </a-col>
109 110 111 112 113 114 115 116 117 118 119 120 121 122
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="6"
        :style="{ marginBottom: '24px' }"
      >
        <a-chart-card
          :loading="loading"
          contentHeight="46px"
          :total="numeral(summary.total_device).format('0,0')"
          :title="$t('app.analysis.operational-effect')"
        >
wanli's avatar
wanli committed
123 124
          <a-tooltip placement="top" slot="action">
            <span slot="title">
125
              <span v-html="$t('app.analysis.introduce')"></span>
wanli's avatar
wanli committed
126 127 128
            </span>
            <a-icon type="info-circle-o" />
          </a-tooltip>
129 130 131 132 133 134 135 136 137 138
          <a-mini-progress
            :percent="30"
            :strokeWidth="8"
            :target="80"
            color="#13C2C2"
          />
          <div
            :style="{ whiteSpace: 'nowrap', overflow: 'hidden' }"
            slot="footer"
          >
wanli's avatar
wanli committed
139 140 141 142
            <!-- <a-trend flag="up" :style="{marginRight: '16px'}">
              {{$t('app.analysis.week')}}<span class="trendText">12%</span>
            </a-trend> -->
            <a-trend flag="up">
143
              {{ $t("app.analysis.day") }}<span class="trendText">{{ summary.today_device }}</span>
wanli's avatar
wanli committed
144 145 146 147 148
            </a-trend>
          </div>
        </a-chart-card>
      </a-col>
    </a-row>
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
    <a-card
      :loading="loading"
      :bordered="false"
      :bodyStyle="{ padding: '0px' }"
    >
      <div class="salesCard">
        <a-tabs
          size="large"
          :tabBarStyle="{ marginBottom: '24px', paddingLeft: '16px' }"
        >
          <div slot="tabBarExtraContent" class="salesExtraWrap">
            <div class="salesExtra">
              <a>
                {{ $t("app.analysis.all-day") }}
              </a>
              <a class="currentDate">
                {{ $t("app.analysis.all-week") }}
              </a>
              <a>
                {{ $t("app.analysis.all-month") }}
              </a>
              <a>
                {{ $t("app.analysis.all-year") }}
              </a>
wanli's avatar
wanli committed
173
            </div>
174 175 176 177 178 179 180 181 182 183
            <a-range-picker style="width: 256px" />
          </div>
          <a-tab-pane key="sales" :tab="$t('app.analysis.sales')">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="salesBar">
                  <!-- <h4>活动实时交易情况</h4> -->
                  <a-row>
                    <a-col :md="6" :sm="12" :xs="24">
                      <a-number-info
184 185 186
                        subTitle="今日访问"
                        suffix="次"
                        :total="numeral(0).format('0,0')"
187 188 189
                      />
                    </a-col>
                    <a-col :md="6" :sm="12" :xs="24">
190
                      <a-number-info subTitle="未定义指标" total="0%" />
191 192 193
                    </a-col>
                    <a-col :md="6" :sm="12" :xs="24">
                      <!-- <NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} /> -->
194
                      <a-number-info subTitle="最新下载时间" total="00:00:00" />
195 196 197
                    </a-col>
                    <a-col :md="6" :sm="12" :xs="24">
                      <a-number-info
198 199 200
                        subTitle="每秒访问"
                        suffix="次"
                        :total="numeral(0).format('0,0')"
201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227
                      />
                    </a-col>
                  </a-row>
                  <div class="mapChart">
                    <a-tooltip title="等待后期实现">
                      <img
                        src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
                        alt="map"
                      />
                    </a-tooltip>
                  </div>
                </div>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="salesRank">
                  <h4 class="rankingTitle">
                    {{ $t("app.analysis.sales-ranking") }}
                  </h4>
                  <ul class="rankingList">
                    <li v-for="(item, i) in 10" :key="i">
                      <span
                        class="rankingItemNumber"
                        :class="{ active: i < 3 }"
                      >
                        {{ i + 1 }}
                      </span>
                      <span class="rankingItemTitle">
228
                        暂无数据 ⛽️ ⛽ ️⛽️
229 230 231 232 233 234 235 236 237 238 239 240
                      </span>
                      <span class="rankingItemValue"> 0,0 </span>
                    </li>
                  </ul>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="visits" :tab="$t('app.analysis.visits')">
          </a-tab-pane>
        </a-tabs>
      </div>
wanli's avatar
wanli committed
241 242 243 244 245 246 247 248 249 250 251 252 253
    </a-card>
    <!-- <a-row :gutter="24">8</a-row> -->
  </a-grid-content>
</template>

<script>
import {
  Card,
  Row,
  Col,
  Tooltip,
  Icon,
  Tabs,
254 255
  DatePicker,
  message,
wanli's avatar
wanli committed
256 257 258 259 260 261 262 263
} from "ant-design-vue";
import GridContent from "@/components/PageHeaderWrapper/GridContent";
import Trend from "@/components/Trend";
import NumberInfo from "@/components/NumberInfo";
import {
  ChartCard,
  Field,
  yuan,
264
  MiniProgress,
wanli's avatar
wanli committed
265 266 267 268 269 270 271 272
  // MiniBar,
  // MiniArea
} from "@/components/Charts";
import numeral from "numeral";
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');

273 274
import { workbench } from "@/api/openapi";

wanli's avatar
wanli committed
275 276
export default {
  data: () => ({
277 278 279 280 281 282 283 284 285 286 287
    loading: false,
    summary: {
      total_user: null,
      today_user: null,
      total_device: null,
      today_device: null,
      total_app: null,
      today_app: null,
      total_package: null,
      today_package: null,
    },
wanli's avatar
wanli committed
288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304
  }),
  components: {
    AGridContent: GridContent,
    ACard: Card,
    ARow: Row,
    ACol: Col,
    AChartCard: ChartCard,
    AField: Field,
    ATooltip: Tooltip,
    AIcon: Icon,
    ATrend: Trend,
    AMiniProgress: MiniProgress,
    // AMiniBar: MiniBar,
    // AMiniArea: MiniArea,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    ARangePicker: DatePicker.RangePicker,
305
    ANumberInfo: NumberInfo,
wanli's avatar
wanli committed
306 307 308
  },
  methods: {
    yuan,
309 310 311 312 313 314 315 316 317 318 319 320 321 322 323
    numeral,
    workbench() {
      workbench()
        .then((res) => {
          this.summary = res.data
          console.log(res);
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
  },
  created() {
    this.workbench();
  },
wanli's avatar
wanli committed
324 325 326 327 328
};
</script>
<style lang="less">
@import url("./Analysis.less");
</style>