intelligent-medicine-cabinet/mini-pro-web/src/views/index/Index.vue

<template>
	<div class="index-wrap">
        <!-- <div class="home-text">首页</div> -->
        <div class="mask" v-show="drowMenuShow"></div>
        <div class="select" >
            <div class="drop-menu" :class="{active: drowMenuShow}">
                <div class="drop-menu-title tc fs-14" @click="drowMenuShow=!drowMenuShow">
                    <span class="v-middle">{{selcommunityName}}</span>
                    <van-icon name="arrow-down" />
                </div>
                <div class="drop-menu-area kitbox">
                    <div class="drop-menu-area-left" v-if="townList&&townList.length">
                        <van-sidebar v-model="activeKey">
                            <van-sidebar-item v-for="(item, i) in townList" :key="i" :title="item.townName" />
                        </van-sidebar>
                    </div>
                    <div class="drop-menu-area-right fs-14">
                        <div v-for="(item, i) in communityList" :key="i" @click="onSelect(item)">{{item.hospitalName}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 设备概况 -->
        <div class="panel mt10 sbzl">
            <div class="kitbox pt15 plr15 box-flex-c">
                <div class="box-flex-c c-333 fs-16 f-bold">设备概况</div>
                <div class="box-flex-c c-333 f-bold fs-12">在线率：{{ overview.onlineRate }}</div>
            </div>
            <div class="box-flex-c pt10 pb20 plr15">
                <div class="Online" @click="gotoDeviceList(1)">
                    <div class="equipment-num">{{ overview.onlineTotal }}</div>
                    <div class="equipment-text">在线设备</div>
                </div>
                <div class="total" @click="gotoDeviceList()">
                    <div class="equipment-num">{{ overview.total }}</div>
                    <div class="equipment-text">运营总台数</div>
                </div>
                <div class="offline" @click="gotoDeviceList(0)">
                    <div class="equipment-num">{{ overview.noOnlineTotal }}</div>
                    <div class="equipment-text">离线设备</div>
                </div>
            </div>
        </div>
        <!-- 运维数据 -->
        <div class="panel plr15 mt10 cygn">
			<div class="kitbox pt15 ">
				<div class="box-flex-1 c-333 fs-16 f-bold">运维数据</div>
			</div>
			<div class="pt10">
				<div class="pb20">
                    <van-row>
                        <van-col @click="gotoDevice()" class="col col-tl" span="12">
                            <div class="operations-num">{{ maintain.addTotal }}</div>
                            <div class="operations-text"><span><img class="img" src="../../assets/images/waiting-equipment.png" alt=""></span>待入库设备数</div>
                        </van-col>
                        <van-col @click="gotoDevice()" class="col" span="12">
                            <div class="operations-num">{{ maintain.hcWaringTotalNum }}</div>
                            <div class="operations-text"><span><img class="img" src="../../assets/images/thermometer.png" alt=""></span>温湿度预警数</div>
                        </van-col>
                        <van-col @click="gotoDeviceList(0)" class="col col-t col-bl" span="12">
                            <div class="operations-num">{{ maintain.noOnlineTotal1WithUserId }}</div>
                            <div class="operations-text"><span><img class="img" src="../../assets/images/waiting-equipment.png" alt=""></span>离线设备数</div>
                        </van-col>
                        <van-col @click="gotoUrl('/order/list')" class="col col-t" span="12">
                            <div class="operations-num">{{ maintain.noGetDrugNum }}</div>
                            <div class="operations-text"><span><img class="img" src="../../assets/images/offline-medicine.png" alt=""></span>待取药订单数</div>
                        </van-col>
                    </van-row>
                </div>
			</div>
		</div>
        <!-- 取药次数 -->
        <div v-if="medicineShow" class="panel plr15 mt10 medicine">
			<div class="kitbox pt15 box-flex-c">
				<div class="box-flex-c c-333 fs-16 f-bold">取药次数</div>
                <div class="box-flex-c c-333 fs-12 f-bold time">
                    <ul class="ul">
                        <li @click="medicineTime('1')" :class="medicineBag == '1' ? 'li-bag':''">今日</li>
                        <li @click="medicineTime('7')" :class="medicineBag == '7' ? 'li-bag':''">7日</li>
                        <li @click="medicineTime('30')" class="border-r" :class="medicineBag == '30' ? 'li-bag':''">30日</li>
                        <li @click="medicineTime('90')" class="border-r" :class="medicineBag == '90' ? 'li-bag':''">90日</li>
                        <li @click="medicineTime('全部')" :class="medicineBag == '' ? 'li-bag':''">全部</li>
                    </ul>
                </div>
			</div>
            <div class="pt24 pb19">
                <div class="medicine-b-l">
                    <div class="medicine-b-g-num">
                        {{ shippingType.total }}
                        <span>次</span>
                    </div>
                </div>
                <div class="scan">扫码取药：{{ shippingType.saomaTotal }}次</div>
                <div class="care">医保卡取药：{{ shippingType.yibaoTotal }}次</div>
            </div>
		</div>
        <!-- 电子处方单 -->
        <div class="panel plr15 mt10 medicine">
			<div class="kitbox pt15 box-flex-c">
				<div class="box-flex-c c-333 fs-16 f-bold">电子处方单</div>
                <div class="box-flex-c c-333 fs-12 f-bold time">
                    <ul class="ul">
                        <li @click="prescriptionTime('1')" :class="prescriptionBag == '1' ? 'li-bag':''">今日</li>
                        <li @click="prescriptionTime('7')" :class="prescriptionBag == '7' ? 'li-bag':''">7日</li>
                        <li @click="prescriptionTime('30')" class="border-r" :class="prescriptionBag == '30' ? 'li-bag':''">30日</li>
                        <li @click="prescriptionTime('90')" class="border-r" :class="prescriptionBag == '90' ? 'li-bag':''">90日</li>
                        <li @click="prescriptionTime('全部')" :class="prescriptionBag == '' ? 'li-bag':''">全部</li>
                    </ul>
                </div>
			</div>
            <div class="pt24 pb19">
                <div class="medicine-b-l prescription">
                    <div class="medicine-b-g-num">
                        {{ prescriptionStatics.total }}
                        <span>次</span>
                    </div>
                </div>
                <div class="prescription-num">药品数量：{{ prescriptionStatics.drugTotal }}件</div>
            </div>
		</div>
        <!-- 销售额 -->
        <div v-if="sales" class="panel plr15 mt10 medicine">
			<div class="kitbox pt15 box-flex-c">
				<div class="box-flex-c c-333 fs-16 f-bold">销售额</div>
                <div class="box-flex-c c-333 fs-12 f-bold time">
                    <ul class="ul">
                        <li @click="salesTime('1')" :class="salesBag == '1' ? 'li-bag':''">今日</li>
                        <li @click="salesTime('7')" :class="salesBag == '7' ? 'li-bag':''">7日</li>
                        <li @click="salesTime('30')" class="border-r" :class="salesBag == '30' ? 'li-bag':''">30日</li>
                        <li @click="salesTime('90')" class="border-r" :class="salesBag == '90' ? 'li-bag':''">90日</li>
                        <li @click="salesTime('全部')" :class="salesBag == '' ? 'li-bag':''">全部</li>
                    </ul>
                </div>
			</div>
            <div class="pt20 pb20 sales-data">
                <div>¥{{ amount }}</div>
                <div style="display:none;">月同比:<span>0.40%</span></div>
                <div style="display:none;">日环比:<span>5.00%</span></div>
            </div>
            <div id="sales-chart" class="sales-chart"></div>
		</div>
        <div class="home-bottom"></div>
	</div>
</template>
<script>
import { findOneUser} from "@/api/login";
import * as echarts from 'echarts';
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default {
	name: "index",
	components: {
		
  	},
    watch: {
        drowMenuShow(n){
            var body = document.getElementsByTagName('body')[0]
            if(n){
                body.classList.add('over-hidden')
            } else {
                body.classList.remove('over-hidden')
            }
        },
        activeKey(n){
            this.loadChildren()
        }
    },
    computed:{
        selcommunityName(){
            if(this.selcommunity){
                if(this.selcommunity.hospital === ''){
                    var item = this.townList[this.activeKey]
                    return item.town === ''? "全部" : item.townName
                } else {
                    return this.selcommunity.hospitalName
                }
            } 
            return "全部"
        }
    },
  	data() {
    	return {
            medicineBag:'1',
            medicineData:false,
            medicineShow:true,
            sales:true,
            prescriptionBag:'1',
            salesBag:'1',
            count:[],
            date:[],
            amount:'- -',
			overview:{
                total:'- -', // 总台数
                noOnlineTotal:'- -', // 不在线数
                onlineRate:'- -', // 在线率
                onlineTotal:'- -', // 在线台数
            },
            maintain:{
                hcWaringTotalNum:'- -', // 温湿度异常警告
                noOnlineTotal1WithUserId:'- -', // 不在线数
                noGetDrugNum:'- -', // 待取药订单数
                addTotal:'- -', // 缺货设备数
            },
            shippingType:{
                saomaTotal:'- -',
                total:'- -',
                yibaoTotal:'- -'
            },
            prescriptionStatics:{
                total:'- -',
                drugTotal:'- -'
            },

            drowMenuShow: false,
            townList: [],
            communityList: [],
            selcommunity: '',
            activeKey: 0,
            defaultOption: [
                { townName: '全部', town: "", children: [{hospital: '', hospitalName: '全部'}] },
            ],
            
    	}
  	},
	created(){
		this.refreshData()
        this.getOrgList()
        console.log('this.$store.user.state',this.$store.state.user.curRoleCode)
        if(this.$store.state.user.curRoleCode =='replenisher'){
            this.medicineShow = false;
            this.sales = false;
        }
    },
    mounted(){
        this.echartsData();
    },
  	methods: {
        // 设备概况 运营数据
		countall(){
            var p = this.getTownParams()
			medicineAbinetApi
				.countAllDevice(p)
				.then(res=>{
                    // console.log('countall', res);
                    this.overview = res.obj.overview;
                    this.maintain = res.obj.maintain;
				})
				.catch(err=>{
					console.error(err)
				})
        },
        //跳转
        gotoDevice(){
            this.$router.push('/device/index')
            this.$store.commit('getDeviceActive' ,0);
        },
        // 取药次数
        medicine(){
            var p = this.getTownParams()
            p.day = this.medicineBag
            console.log('medicine', p)
            medicineAbinetApi
				.getmedicine(p)
				.then(res=>{
                    console.log('medicine', res)
                    this.medicineData = true;
                    this.shippingType = res.obj;
				})
				.catch(err=>{
                    console.error(err)
                    this.medicineData = true;
				})
        },
        // 电子处方单
        prescriptions(){
            var p = this.getTownParams()
            p.day = this.prescriptionBag
            medicineAbinetApi
				.getprescriptions(p)
				.then(res=>{
                    // console.log('prescriptions', res)
                    this.prescriptionStatics = res.obj;
				})
				.catch(err=>{
					console.error(err)
				})
        },
        // 取药时间查询
        medicineTime(val){
            if(this.medicineData){
                if(val == '全部'){
                    this.medicineBag = '';
                    console.log('全部')
                }else{
                    this.medicineBag = val;
                    console.log('1,3,7,9')
                }
                this.medicineData = false;
                this.medicine();
                
            }
        },
        // 电子处方单查询
        prescriptionTime(val){
            if(val == '全部'){
                this.prescriptionBag = '';
                this.prescriptions();
                console.log('全部')
            }else{
                this.prescriptionBag = val;
                this.prescriptions();
                console.log('1,3,7,9')
            }
        },
        // 销售额查询
        salesTime(val){
            if(val == '全部'){
                this.salesBag = '';
                console.log('全部')
            }else{
                this.salesBag = val;
                console.log('1,3,7,9')
            }
            this.echartsData();
        },
        echartsData(){
            if(this.sales){
                var p = this.getTownParams()
                p.day = this.salesBag
                medicineAbinetApi
                    .getechartsData(p)
                    .then(res=>{
                        // console.log('echartsData', res);
                        this.amount = res.obj.amount;
                        this.count = res.obj.amountdateList.map((item) =>{
                            return item.count
                        });
                        this.date = res.obj.amountdateList.map((item) =>{
                            return item.date
                        });

                        // 基于准备好的dom，初始化echarts实例
                        var myChart;
                        if (myChart != null && myChart != "" && myChart != undefined){
                            // chartDom.clear();
                            myChart.dispose();
                            // document.getElementById('sales-chart').innerHTML = '';
                        }
                        var chartDom = document.getElementById('sales-chart');
                        myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            grid:{
                                left: '3%',
                                right: '4%',
                                bottom: '2%',
                                top:'5%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: this.date,
                                axisTick:{
                                    show:false, // X轴刻度隐藏
                                },
                                axisLabel:{
                                    fontSize:'8', // X轴文字字体大小
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                data: this.count,
                                type: 'line'
                                }
                            ]
                        };
                        // if (myChart != null && myChart != "" && myChart != undefined) {
                        //     myChart.dispose();
                        // }
                        option && myChart.setOption(option);
                    })
                    .catch(err=>{
                        console.error(err)
                    })
            }
        },

        refreshData(){
            this.countall();
            this.medicine();
            this.prescriptions();
        },
        getTownParams(){
            var p = {
                userId: this.user.id,
            }
            if(this.selcommunity){
                if(this.selcommunity.hospital===''){
                    var item = this.townList[this.activeKey]
                    if(item.town === ''){
                        p.level = ''; 
                        p.area = '';
                    } else {
                        p.level = 2; 
                        p.area = item.town;
                    }
                } else {
                    p.level = 3; //(name = "level", value = "1、市级、2、区级、3、社区", required = false)
                    p.area = this.selcommunity.hospital
                }
            }
            return p
        },

        getOrgList(){
            findOneUser({
                id: this.user.id
            }).then(async res => {
                // "saasAdmin"： "管理员"； regionAdmin" "区域管理员" ; communityAdmin "社区管理员" ; "replenisher"： "补货员"
                var role = this.user.curRoleCode
                var userArea = res.obj.userArea
                var townList = [].concat(this.defaultOption)
                if(role=='communityAdmin' || role=="replenisher"){
                    var g = _.groupBy(userArea, 'town')
                    for(var k in g){
                        var tmp = JSON.parse(JSON.stringify(g[k][0]))
                        tmp.children = [{hospital: '', hospitalName: '全部'}].concat( g[k])
                        townList.push(tmp)
                    }
                    this.townList = townList
                } else {
                    if(role == 'regionAdmin'){
                        userArea.forEach(v => {
                            v.children = []
                        });
                        this.townList = townList.concat(userArea) 
                    } else if(role=='saasAdmin'){
                        await medicineAbinetApi
                            .baseTownList({ filters: "city=350200"})//写死厦门市
                            .then(res => {
                                console.log('baseTownList', res)
                                if (res.status == 200) {
                                    var detailModelList = res.detailModelList;
                                    detailModelList.forEach((item) => {
                                        item.town = item.code
                                        item.townName = item.name
                                        item.children = [];
                                    });
                                    this.townList = townList.concat(detailModelList) 
                                }
                            });
                    }
                }
                this.loadChildren()
            });
        },
        async loadChildren(){
            var item = this.townList[this.activeKey]
            if(!item.children || !item.children.length){
                await medicineAbinetApi
                    .findOrgList({ code: item.town, paeg: 1, pageSize: 999 })
                    .then(res => {
                        console.log('findOrgList', res)
                        if (res.status == 200) {
                            res.detailModelList.forEach(v=>{
                                v.hospitalName = v.name
                                v.hospital = v.code
                            })
                            item.children = [{hospital: '', hospitalName: '全部'}] .concat (res.detailModelList)
                        }
                    })
                    .catch(err=>{
                        item.children = []
                    })
            }

            this.communityList = item.children
        },
        onSelect(item){
            this.selcommunity = item;
            this.drowMenuShow = false;
            this.refreshData()
        },
        gotoDeviceList(networkStatus){
            this.gotoUrl('/device/index', {networkStatus})
        }
    },
}
</script>
<style lang="scss" scoped>
@import "./scss/index.scss";
</style>