123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <template>
- <div class="left-bottom">
- <div class="loading" v-if="loading"><a-spin /></div>
- <dv-capsule-chart :config="config" style="width:98%;height:505px" />
- </div>
- </template>
- <script>
- import { queryProvinceSaleAmount } from '@/api/bigScreen.js'
- export default {
- data () {
- return {
- gatewayno: '',
- config: {
- showValue: true,
- unit: '万元',
- data: []
- },
- timer: null,
- loading: false
- }
- },
- created () {
- this.getData()
- },
- computed: {
- },
- mounted () { },
- beforeDestroy () {
- this.clearData()
- },
- methods: {
- clearData () {
- if (this.timer) {
- clearInterval(this.timer)
- this.timer = null
- }
- },
- // 轮询
- switper () {
- if (this.timer) {
- return
- }
- const looper = (a) => {
- this.getData()
- }
- this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
- },
- getData () {
- this.loading = true
- queryProvinceSaleAmount().then(res => {
- if (!this.timer) {
- console.log('销售金额top15省份', res)
- }
- if (res.status == 200) {
- const ret = []
- res.data.map(item => {
- ret.push({
- name: item.provinceName,
- value: (item.resultAmount / 1000).toFixed(2)
- })
- })
- this.config = {
- ...this.config,
- data: ret
- }
- this.switper()
- } else {
- this.pageflag = false
- }
- this.loading = false
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .list_Wrap {
- height: 100%;
- overflow: hidden;
- :deep(.kong) {
- width: auto;
- }
- }
- .sbtxSwiperclass {
- .img_wrap {
- overflow-x: auto;
- }
- }
- .right_bottom {
- box-sizing: border-box;
- padding: 0 16px;
- .searchform {
- height: 80px;
- display: flex;
- align-items: center;
- justify-content: center;
- .searchform_item {
- display: flex;
- justify-content: center;
- align-items: center;
- label {
- margin-right: 10px;
- color: rgba(255, 255, 255, 0.8);
- }
- button {
- margin-left: 30px;
- }
- input {}
- }
- }
- .img_wrap {
- display: flex;
- // justify-content: space-around;
- box-sizing: border-box;
- padding: 0 0 20px;
- // overflow-x: auto;
- li {
- width: 105px;
- height: 137px;
- border-radius: 6px;
- overflow: hidden;
- cursor: pointer;
- // background: #84ccc9;
- // border: 1px solid #ffffff;
- overflow: hidden;
- flex-shrink: 0;
- margin: 0 10px;
- img {
- flex-shrink: 0;
- }
- }
- }
- .noData {
- width: 100%;
- line-height: 100px;
- text-align: center;
- color: rgb(129, 128, 128);
- }
- }
- </style>
|