|
|
@@ -0,0 +1,472 @@
|
|
|
+<template>
|
|
|
+ <div class="home-body" v-loading="downloading" element-loading-text="'数据读取中，请稍候。。。'">
|
|
|
+ <!--标题部分-->
|
|
|
+ <div class="todo-box">
|
|
|
+ <div class="todo-box-item"></div>
|
|
|
+ <div class="todo-box-item"></div>
|
|
|
+ <div class="todo-box-item"></div>
|
|
|
+ <div class="todo-box-item"></div>
|
|
|
+ <div class="todo-box-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box">
|
|
|
+ <div class="chart-box-row">
|
|
|
+ <div class="chart-box-row-item">
|
|
|
+ <div style="height: 100%">
|
|
|
+ <highcharts :options="chartOptions"></highcharts>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box-row-item"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box-row">
|
|
|
+ <div class="chart-box-row-item"></div>
|
|
|
+ <div class="chart-box-row-item"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import echarts from 'echarts'
|
|
|
+
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex'
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ chartOptions: {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ beta: 0,
|
|
|
+ viewDistance: 25
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: false,
|
|
|
+ tooltip: {
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: false, // 设置饼图不可点击选择
|
|
|
+ cursor: 'pointer',
|
|
|
+ depth: 35, // 饼图的厚度
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 隐藏连线提示
|
|
|
+ format: '{point.name}'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '浏览器占比',
|
|
|
+ data: [
|
|
|
+ ['Firefox', 45.0],
|
|
|
+ ['IE', 26.8],
|
|
|
+ {
|
|
|
+ name: 'Chrome',
|
|
|
+ y: 12.8,
|
|
|
+ sliced: false, // 是否默认突出
|
|
|
+ selected: true
|
|
|
+ },
|
|
|
+ ['Safari', 8.5],
|
|
|
+ ['Opera', 6.2],
|
|
|
+ ['Others', 0.7]
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ credits: {
|
|
|
+ enabled: false // 不显示LOGO
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ todoNumList: {
|
|
|
+ newAccess: 0, // 新准入
|
|
|
+ append: 0, // 增项
|
|
|
+ yearAudit: 0, // 年审
|
|
|
+ infoChange: 0, // 信息变更
|
|
|
+ business: 0 // 业绩评价
|
|
|
+ },
|
|
|
+ // 饼状图&柱状图
|
|
|
+ deviceChartPie: null,
|
|
|
+ deviceChartBar: null,
|
|
|
+ // 折线图
|
|
|
+ deviceContractLine: null, // 合同
|
|
|
+ deviceCustomerLine: null, // 客户
|
|
|
+ deviceCollectionline: null, // 样本采集
|
|
|
+ devicePrepareline: null, // 制备
|
|
|
+ // num: 0,
|
|
|
+ usertotal: {},
|
|
|
+ user: {
|
|
|
+ photo: '',
|
|
|
+ name: '',
|
|
|
+ Realname: '',
|
|
|
+ host: ''
|
|
|
+ },
|
|
|
+ contracttotal: { // 合同统计
|
|
|
+ Total: 0, // 总数
|
|
|
+ Inprogress: 0, // 执行中
|
|
|
+ Addcontract: 0, // 本月新增
|
|
|
+ MonthTotal: [] // 月总数
|
|
|
+ },
|
|
|
+ customertotal: { // 客户统计
|
|
|
+ Total: 0, // 总数
|
|
|
+ Addcontract: 0, // 本月新增
|
|
|
+ MonthTotal: [] // 月总数
|
|
|
+ },
|
|
|
+ collectiontotal: { // 样本采集统计
|
|
|
+ Total: 0, // 总数
|
|
|
+ Addcontract: 0, // 本月新增
|
|
|
+ MonthTotal: [] // 月总数
|
|
|
+ },
|
|
|
+ preparetotal: { // 制备统计
|
|
|
+ InPreparation: 0, // 制备中
|
|
|
+ EndPreparation: 0, // 制备完成
|
|
|
+ MonthTotal: [] // 月总数
|
|
|
+ },
|
|
|
+ tjzztitles: [], // 样本统计图
|
|
|
+ tjzzdata: [], // 样本统计图
|
|
|
+ tjdevicex: [], // 容器统计图
|
|
|
+ tjdevicey: [], // 容器统计图
|
|
|
+ tjdevicecolor: [
|
|
|
+ '#6A5ACD', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
|
|
|
+ '#60C0DD', '#E87C25', '#27727B', '#FE8463'
|
|
|
+ ],
|
|
|
+ downloading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // this.getToDoNumList()
|
|
|
+ // this.initData()
|
|
|
+ // this.getContractinfo() // 合同统计
|
|
|
+ // this.getCustomerinfo() // 客户统计
|
|
|
+ // this.getCollectioninfo() // 采集
|
|
|
+ // this.getPrepareinfo() // 制备
|
|
|
+ let _this = this
|
|
|
+ _this.user.photo = _this.authUser.Profile.Photo
|
|
|
+ _this.user.name = _this.authUser.Profile.name
|
|
|
+ _this.user.Realname = _this.authUser.Profile.Realname
|
|
|
+ _this.user.host = _this.authUser.Profile.Host
|
|
|
+ },
|
|
|
+ computed: mapGetters({
|
|
|
+ authUser: 'authUser'
|
|
|
+ }),
|
|
|
+ methods: {
|
|
|
+ getToDoNumList () {
|
|
|
+ this.$axios.get('/supplier/todo-num', {}).then(res => {
|
|
|
+ console.log('待办任务数据返回结果', res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initData () {
|
|
|
+ let _this = this
|
|
|
+ this.$axios.get('/users/getaccountingo', {})
|
|
|
+ .then(res => {
|
|
|
+ _this.usertotal = res.data
|
|
|
+ _this.getgroupzzqg()
|
|
|
+ _this.getgroupdevice()
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ this.downloading = false
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toUrl (type) {
|
|
|
+ console.log('跳转到：', type)
|
|
|
+ },
|
|
|
+ // 获取合同信息
|
|
|
+ getContractinfo () {
|
|
|
+ let _this = this
|
|
|
+ this.$axios.get('/cellstotal/getcontractinfo', {})
|
|
|
+ .then(res => {
|
|
|
+ _this.contracttotal = res.data.items
|
|
|
+ _this.contracttotal.Addcontract = _this.contracttotal.MonthTotal[0].Count
|
|
|
+ let time = new Array()
|
|
|
+ let total = new Array()
|
|
|
+ let length = _this.contracttotal.MonthTotal.length
|
|
|
+ for (let index = 0; index < length; index++) {
|
|
|
+ time[index] = _this.contracttotal.MonthTotal[length - 1 - index].Year + '.' + _this.contracttotal.MonthTotal[
|
|
|
+ length - 1 - index].Month
|
|
|
+ total[index] = _this.contracttotal.MonthTotal[length - 1 - index].Count
|
|
|
+ }
|
|
|
+ _this.drawContractline('deviceContractLine', time, total) // 合同
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取客户信息
|
|
|
+ getCustomerinfo () {
|
|
|
+ let _this = this
|
|
|
+ this.$axios.get('/cellstotal/getcustomerinfo', {})
|
|
|
+ .then(res => {
|
|
|
+ _this.customertotal = res.data.items
|
|
|
+ _this.customertotal.Addcontract = _this.customertotal.MonthTotal[0].Count
|
|
|
+ let time = new Array()
|
|
|
+ let total = new Array()
|
|
|
+ let length = _this.customertotal.MonthTotal.length
|
|
|
+ for (let index = 0; index < length; index++) {
|
|
|
+ time[index] = _this.customertotal.MonthTotal[length - 1 - index].Year + '.' + _this.customertotal.MonthTotal[
|
|
|
+ length - 1 - index].Month
|
|
|
+ total[index] = _this.customertotal.MonthTotal[length - 1 - index].Count
|
|
|
+ }
|
|
|
+ _this.drawContractline('deviceCustomerLine', time, total) // 客户
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取采集信息
|
|
|
+ getCollectioninfo () {
|
|
|
+ let _this = this
|
|
|
+ this.$axios.get('/cellstotal/getcollectioninfo', {})
|
|
|
+ .then(res => {
|
|
|
+ _this.collectiontotal = res.data.items
|
|
|
+ _this.collectiontotal.Addcontract = _this.collectiontotal.MonthTotal[0].Count
|
|
|
+ let time = new Array()
|
|
|
+ let total = new Array()
|
|
|
+ let length = _this.collectiontotal.MonthTotal.length
|
|
|
+ for (let index = 0; index < length; index++) {
|
|
|
+ time[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Year + '.' + _this.collectiontotal.MonthTotal[
|
|
|
+ length - 1 - index].Month
|
|
|
+ total[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Count
|
|
|
+ }
|
|
|
+ _this.drawContractline('deviceCollectionline', time, total) // 样本采集
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取制备信息
|
|
|
+ getPrepareinfo () {
|
|
|
+ let _this = this
|
|
|
+ this.$axios.get('/cellstotal/getprepareinfo', {})
|
|
|
+ .then(res => {
|
|
|
+ _this.preparetotal = res.data.items
|
|
|
+ _this.preparetotal.EndPreparation = _this.preparetotal.MonthTotal[0].Count
|
|
|
+ let time = new Array()
|
|
|
+ let total = new Array()
|
|
|
+ let length = _this.preparetotal.MonthTotal.length
|
|
|
+ for (let index = 0; index < length; index++) {
|
|
|
+ time[index] = _this.preparetotal.MonthTotal[length - 1 - index].Year + '.' + _this.preparetotal.MonthTotal[
|
|
|
+ length - 1 - index].Month
|
|
|
+ total[index] = _this.preparetotal.MonthTotal[length - 1 - index].Count
|
|
|
+ }
|
|
|
+ _this.drawContractline('devicePrepareline', time, total) // 制备
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getgroupzzqg () {
|
|
|
+ let _this = this
|
|
|
+ _this.$axios.get('/users/gettotalbysampletype', {})
|
|
|
+ .then(res => {
|
|
|
+ _this.downloading = false
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].Name === '') {
|
|
|
+ res.data[i].Name = '未知'
|
|
|
+ }
|
|
|
+ if (i < 5) {
|
|
|
+ _this.tjzztitles.push({
|
|
|
+ name: res.data[i].Name
|
|
|
+ })
|
|
|
+ _this.tjzzdata.push({
|
|
|
+ name: res.data[i].Name,
|
|
|
+ value: res.data[i].Num
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ _this.tjzzdata.push({
|
|
|
+ name: res.data[i].Name,
|
|
|
+ value: res.data[i].Num
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this.drawPieChart()
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ _this.downloading = false
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getgroupdevice () {
|
|
|
+ let _this = this
|
|
|
+ _this.$axios.get('/users/gettotalbygroupbydevice', {})
|
|
|
+ .then(res => {
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].Name === '') {
|
|
|
+ res.data[i].Name = '未知'
|
|
|
+ }
|
|
|
+ if (i > 12) {
|
|
|
+ _this.tjdevicecolor.push(_this.tjdevicecolor[i % 12])
|
|
|
+ }
|
|
|
+ _this.tjdevicex.push(res.data[i].Name)
|
|
|
+ _this.tjdevicey.push(res.data[i].Num)
|
|
|
+ }
|
|
|
+ _this.drawBarChart()
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 统计样本总数的饼状图
|
|
|
+ drawPieChart () {
|
|
|
+ var chartPie = echarts.init(document.getElementById('deviceChartPie'))
|
|
|
+ chartPie.setOption({
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{b} {c} ({d}%)'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'right',
|
|
|
+ itemHeight: 20,
|
|
|
+ itemWidth: 20,
|
|
|
+ data: this.tjzztitles
|
|
|
+ },
|
|
|
+ color: ['#D1EEEE', '#FFE1FF', '#FFA500', '#6A5ACD', '#D1EEEE', '#CAE1FF', '#C0FF3E', '#1E90FF', '#000080'],
|
|
|
+ series: [{
|
|
|
+ name: '样本类型',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '92%',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.tjzzdata
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 容器数据统计柱状图
|
|
|
+ drawBarChart () {
|
|
|
+ let _this = this
|
|
|
+ var chartBar = echarts.init(document.getElementById('deviceChartBar'))
|
|
|
+ chartBar.setOption({
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '({b}) {c}'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: this.tjdevicex,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 40
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: '容器类型',
|
|
|
+ type: 'bar',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.tjdevicey,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: function (params) {
|
|
|
+ var colorList = _this.tjdevicecolor
|
|
|
+ return colorList[params.dataIndex]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 折线图
|
|
|
+ drawContractline (val, xdata, ydata) {
|
|
|
+ let _this = this
|
|
|
+ var chartBar = echarts.init(document.getElementById(val))
|
|
|
+ chartBar.setOption({
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xdata
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: ydata,
|
|
|
+ type: 'line'
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .avatar-index {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ margin-top: -15px;
|
|
|
+ margin-bottom: -15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-show .el-card__header {
|
|
|
+ /*padding: 5px 10px;*/
|
|
|
+ /*font-size: 10px;*/
|
|
|
+ }
|
|
|
+ .home-body {
|
|
|
+ padding: 0 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .todo-box {
|
|
|
+ display: flex;
|
|
|
+ height: 20%;
|
|
|
+ padding-top: 0px;
|
|
|
+ margin-bottom: 1%;
|
|
|
+ .todo-box-item {
|
|
|
+ width: 20%;
|
|
|
+ margin: 0 5px;
|
|
|
+ border: 1px solid #F6931F
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ padding-top: 0px;
|
|
|
+ margin-bottom: 1%;
|
|
|
+ .chart-box-row {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ padding-top: 0px;
|
|
|
+ margin-bottom: 1%;
|
|
|
+ .chart-box-row-item {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 5px;
|
|
|
+ padding-top: 0px;
|
|
|
+ border: 1px solid #00ffff;
|
|
|
+ margin-bottom: 1%
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wd