ngfrontend/src/views/dashboard/admin/index.vue

<template>
  <div class="dashboard-editor-container" v-loading="loading">
    <!-- <github-corner class="github-corner" /> -->
    <el-row  class="system-carousel">
      <el-carousel trigger="click" indicator-position="none" :height="bannerHeight+'px'" style="max-height:350px;" :interval="6000" arrow="always" :indicator-position="outside">
        <el-carousel-item v-for="(item,key) in slides" :key="key">
          <template v-if="item.TYPE==='1'">
            <router-link :to="`/shop/index`" target="_self" class="islide">
            <img ref="bannerHeight"  @load="imgLoad"  :src="imageArticle(item.IMAGE)" alt="" >
          </router-link>
          </template>
          <template v-else>
						<router-link to="#" target="_self" class="islide">
							<img ref="bannerHeight" @load="imgLoad" :src="imageArticle(item.IMAGE)" alt="" @click="handleArticle(item.CONTENT)" >
						</router-link>
          </template>
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <panel-group @handleSetLineChartData="handleSetLineChartData" :rmBv="rmBv" :endTime="endTime" :heightEmpLv='heightEmpLv' :heightCrownLv='heightCrownLv' :decLv="decLv" :key="num" :cycle="cycle" />
    <el-row :gutter="40" v-loading="loading">
      <el-col :xs="24" :sm="24" :lg="12" v-for="(item,key) in news" :key="key">
        <el-card class="box-card">
					<el-table :data="item.LISTS" lazy stripe fit highlight-current-row>
						<el-table-column align="left" :label="$t('article.title')" prop="TITLE">
							<template slot-scope="{row}">
								<span @click="handleArticle(row.ID)">
									<el-link type="primary" href="#" target="_self" >{{ row.TITLE }}</el-link>
								</span>
							</template>
						</el-table-column>
						<el-table-column align="right">
							<template slot="header" slot-scope="scope">
								<el-button type="text" class="box-card-more">
									<router-link :to="`/article/article-list`">{{$t('dashboard.more')}}+</router-link>
								</el-button>
							</template>
							<template slot-scope="{row}">
								<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d}') }}</span>
							</template>
						</el-table-column>
					</el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row> -->

		<el-dialog title="" :visible.sync="dialog" :width="screenWidth" center style="margin-top: -80px;">
			<div class="white-box" style="text-align: center; margin-top: -20px;">
				<div class="white-box-title">
					<h1>{{ article.TITLE }}</h1>
					<span>{{ article.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
				</div>
				<div v-html="article.CONTENT" class="white-box-content">
				</div>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import tool from '@/utils/tool'
import {getScreenWidth} from "@/utils";
import {fetchArticleOne} from "@/api/article";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    GithubCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      myEmpLv: {'ID': 0, 'LEVEL_NAME': null, 'ICON_TYPE': 0, 'ICON_NUM': 0},
      bannerHeight: '',
      slides: [],
      news: [],
      periodNum: '',
      decLvName: '',
      myRemainPv: '',
      activeEnd: '',
      baseEmpLevels: [],
      heightEmpLv: '', // 最高级别
			heightCrownLv: '',
      decLv:'', // 当前等级
      cycle: '',//当前业绩期
      rmBv: '',
      endTime: '',
      num: 0,

			loading: false,
			dialog: false,
			article: {
				ID: '',
				CID: '',
				TITLE: '',
				CONTENT: '',
				CREATED_AT: '',
			},

			outside: 'outside',
			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px',
			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    sub_str(str, len = 15) {
      if (str) return str.slice(0, len)
    },
    imgLoad () {
      let _this = this
      if (_this.$refs.bannerHeight) {
        _this.$nextTick(function () {
          _this.bannerHeight = _this.$refs.bannerHeight[0] && _this.$refs.bannerHeight[0].height ?
          _this.$refs.bannerHeight[0].height
          : _this.bannerHeight
        })
      }
    },
    imageArticle (imageUrl) {
      return tool.getArImage(imageUrl, '/files/')
    },
    formatDate(data) {
      return tool.formatDate(data,false)
    },
		handleArticle(id) {
			this.loading = true
			fetchArticleOne(id).then(response => {
				this.article = response.data
				this.dialog = true
				setTimeout(() => {
					this.loading = false
				}, 0.5 * 1000)
			})
		},
  },
  mounted() {
    this.$store.dispatch('dashboard/getIndex', {})
    .then(response => {
      this.num++
      let ret = response.data
      this.slides = ret.slides
      this.news = ret.news
      this.periodNum = ret.periodNum
      this.decLvName = ret.decLvName
      this.myRemainPv = ret.myRemainPv
      this.activeEnd = ret.activeEnd
      this.decLv = ret.decLv
      this.heightEmpLv = ret.empLv
			this.heightCrownLv = ret.crownLv
      this.cycle = ret.periodNum
      this.rmBv = ret.myRemainPv
      this.endTime = ret.activeEnd
      this.imgLoad();
    })
    .catch((error) => {
    })
    window.addEventListener('resize', () => {
      this.imgLoad()
    }, false)
  }
}
</script>

<style lang="scss" scoped>
// img {
//   max-height:350px;
//   max-width:400px;
//   margin: 0 auto;
// }
.islide {
    display: block;
    text-align: center;
  }

  .islide img {
    max-width: 100%;
    max-height: 330px;
  }
.box-card .item{
  line-height: 30px;
}
.box-card .item span {
  float: right;
  color: #999;
  font-size: 12px;
}
.box-card .item:nth-of-type(odd) {
  background: #FAFAFA;
}
::v-deep .el-carousel__container {
  text-align: center !important;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.box-card-more {
    float: right;
    padding: 3px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
  }

  .box-card-more a {
    color: #666;
  }

  .box-card-more:hover {
    border-color: #409EFF;
  }

// carousel
.system-carousel {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: -10px;
}
// carousel

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}


::v-deep .el-carousel__button {
	border: 1px solid gray;
	width: 8px;
	height: 8px;
	border-radius: 50%;

}
</style>