bjquanjiang
/
DigitalScholl

﻿
@{
    ViewBag.Title = "Floor";
    Layout = "~/Views/Shared/_Index.cshtml";
}


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="" />
    <title>数字化校园-宿舍</title>
    <meta name="keywords" content="数字化校园-宿舍" />
    <meta name="description" content="数字化校园-宿舍" />
    <link href="~/Content/font/css/font-awesome.css" rel="stylesheet" />
    <link href="~/Content/css/swiper.min.css" rel="stylesheet" />
    <link href="~/Content/css/common.css" rel="stylesheet" />
    <link href="~/Content/css/index.css" rel="stylesheet" />
    <!--自适应-->
    <script src="~/Content/jquery/plugin/layer/layer.js"></script>
    <script src="~/Content/echarts/echarts.js"></script>
    <script src="~/Content/news/js/easing.js"></script>
    <script src="~/Content/jquery/plugin/jquery-ui/jquery-ui.min.js"></script>
    <!--自适应-->
    <script src="~/Content/js/dormitory/main.js"></script>

    <!--[if lte IE 9]>
       <script src="js/respond.min.js"></script>
       <script src="js/html5shiv.js"></script>
    <![endif]-->
    <style>
        html, body {
            background-image: url('/Content/images/floor/bg.jpg');
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/Content/images/floor/bg.jpg',  sizingMethod='scale');
            overflow: auto;
        }


        .layerImg {
            top: -10px;
            left: -210px;
            width: 400px
        }
    </style>
</head>
<body>
    <!--  / warpper  -->
    <div id="app" class="index_warpper floor_warpper">

        <!--  / index_sec1  -->
        <div class="index_sec index_sec1">
            <div class="index_box">
                <div class="indSec1T">
                    @*山西省小店区高新校区*@

                    <ul class="indSec1List">
                        @*<li><a href="#" @@click="allocation()"><img src="/Content/images/floor/inSec1-6.png" alt="" />自动分配宿舍</a></li>*@
                        <li><a href="#" @@click="addFloor()"><img src="/Content/images/floor/inSec1-7.png" alt="" />添加宿舍楼</a></li>
                        @*<li><a href="#"><img src="/Content/images/floor/inSec1-8.png" alt="" />批量删除</a></li>*@
                        @*<li><a href="#"><img src="/Content/images/floor/inSec1-9.png" alt="" />打印宿舍数据</a></li>*@
                    </ul>
                </div>
                <div class="inSec1Row">
                    <div v-for="floor in floors" class="inSec1Col3">
                        <div class="inSec1Box">
                            <div class="inSec1Top">
                                <span>{{floor.dormitory.Name}}</span>
                                <ul class="inSec1TopList">
                                    <li>
                                        <a href="javascript:;"><img src="/Content/images/floor/inSec1-2.png" alt="" /></a>
                                        <div class="inSec1Con inSec1Con1">
                                            <img class="inSec1Horn" src="/Content/images/floor/inSec1-11.png" alt="" />
                                            <div class="inSec1Con2">
                                                <div class="inSec1ConT">
                                                    {{floor.dormitory.Name}}
                                                    @*<div class="inSec1Sex" :style="floor.dormitory.Sex | filter_style"><img :src="floor.dormitory.Sex | filter_sexImg" alt="" />{{floor.dormitory.Sex | filter_sex}}</div>*@
                                                </div>
                                                <div class="inSec1ConTxt">
                                                    <span>{{floor.UnitNum}}</span>单元 <span>{{floor.floorNum}}</span>层 <span>{{floor.RoomNum}}</span>间
                                                </div>
                                                <div class="inSec1ConTxt">
                                                    <span>{{floor.BedNum}}</span>床位 &nbsp;&nbsp;&nbsp;&nbsp; 入住<span>{{floor.HasStudentNum}}</span>人
                                                </div>
                                                <div @@click="checkDetail(floor)" class="inSec1Btn">查看更多信息  <i class="fa fa-angle-right"></i></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li @@click="update(floor.dormitory.ID)"><a href="#"><img src="/Content/images/floor/inSec1-1.png" alt="" /></a></li>
                                    <li @@click="deleteFloor(floor)"><a href="javascript:;"><img src="/Content/images/floor/inSec1-3.png" alt="" /></a></li>
                                </ul>
                                <div class="clear"></div>
                            </div>
                            <div class="inSec1Img">
                                <a :href="floor.dormitory.ID | filter_url"><img src="/Content/images/floor/inSec1-4.png" alt="" /></a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <!--  / index_sec1  -->

    </div>
    <!--  / warpper  -->


    <script>


        var color1 = ['#6471F3', '#A4C2FF'], color2 = ['#94DB95', '#ED94A5'];
        var vm = new Vue({
            el: "#app",
            data: {
                floors: "",
                sexImgUrl: "/Content/images/floor/inSec1-10.png",
            },
            methods: {
                getData: function () {
                    $.get('/LogisticsManagement/Accommodation/GetDormitoryList', function (ref) {
                        this.floors = ref.data;

                    }.bind(this), "json");

                },
                laterGetData: function () {
                    setTimeout(function () {
                        this.getData();
                    }.bind(this), 1000);
                },
                filter_Dept: function (value) {
                    var result = '';
                    top.learun.clientdata.getAsync('custmerData', {
                        sync: true,
                        url: '/LR_SystemModule/DataSource/GetDataTable?code=' + 'CdDeptInfo',
                        key: value,
                        keyId: 'deptno',
                        callback: function (_data) {
                            result = _data.deptname;
                        }
                    });
                    return result;
                },
                filter_Major: function (value) {
                    var result = '';
                    top.learun.clientdata.getAsync('custmerData', {
                        sync: true,
                        url: '/LR_SystemModule/DataSource/GetDataTable?code=' + 'CdMajorInfo',
                        key: value,
                        keyId: 'id',
                        callback: function (_data) {
                            result = _data.majorname;

                        }
                    });
                    return result;

                },
                filter_company: function (value) {
                    var result;
                    top.learun.clientdata.getAsync('custmerData', {
                        sync: true,
                        url: '/LR_SystemModule/DataSource/GetDataTable?code=' + 'company',
                        key: value,
                        keyId: 'f_companyid',
                        callback: function (_data) {
                            result = _data.f_fullname;
                        }
                    });

                    return result;
                },
                filter_sex: function (value) {
                    if (value == "1") {
                        return '<div class="laySec1Sex" style="background:#7070da"><img src="/Content/images/floor/inSec1-10_2.png" alt="" />男生宿舍</div></div>'

                    } else {

                        return '<div class="laySec1Sex"><img src="/Content/images/floor/inSec1-10.png" alt="" />女生宿舍</div></div>'
                    }
                },
                allocation: function () {
                    top.learun.layerForm({
                        id: 'form',
                        title: '自动分配宿舍',
                        url: top.$.rootUrl + '/LogisticsManagement/Accommodation/Allocation',
                        width: 400,
                        height: 250,
                        callBack: function (id) {
                            return top[id].acceptClick();
                        }
                    });
                },
                addFloor: function () {
                    var url = "";
                    url = top.$.rootUrl + '/LogisticsManagement/Accommodation/FormClassify';
                    top.learun.layerForm({
                        id: 'form',
                        title: '新增',
                        url: url,
                        width: 600,
                        height: 400,
                        callBack: function (id) {
                            return top[id].acceptClick(this.laterGetData());
                        }.bind(this)
                    });

                },
                update: function (id) {
                    top.learun.layerForm({
                        id: 'form',
                        title: '编辑',
                        url: top.$.rootUrl + '/LogisticsManagement/Accommodation/FormClassify?keyValue=' + id,
                        width: 600,
                        height: 400,
                        callBack: function (id) {
                            return top[id].acceptClick(this.laterGetData());
                        }.bind(this)
                    });

                },
                deleteFloor: function (floor) {
                    top.learun.layerConfirm('是否确认删除该项！', function (res) {
                        if (res) {
                            this.floors.splice($.inArray(floor, this.floors), 1);
                            top.learun.deleteForm(top.$.rootUrl + '/LogisticsManagement/Accommodation/DeleteForm', { keyValue: floor.dormitory.ID }, function () {
                            });
                        }
                    }.bind(this));
                },
                checkDetail: function (floor) {
                    var echarts1;
                    //圆形图
                    var i = 0;
                    var g = "0%";
                    if (!!floor.HasStudentNum && !!floor.BedNum && floor.HasStudentNum != 0 && floor.BedNum != 0) {
                        g = ((floor.HasStudentNum / floor.BedNum) * 100).toFixed(2) + "%";
                    }
                    layer.open({
                        type: 1,
                        closeBtn: 2,
                        area: ['888px', '80%'],
                        content: '<div class="layerBox">' +
                            '<img class="layerImg" src="/Content/images/floor/inSec1-4.png" alt="" />' +
                            '<div class="layer_sec1 layer_sec">' +
                            '<div class="laySec1L">' +
                            '<div class="laySec1ConT">' + floor.dormitory.Name +
                            '<span style="display:none">' + this.filter_sex(floor.dormitory.Sex) + '</span>' +
                            '</div>' +
                            '<div class="laySec1R">' +
                            '<div><div class="laySec1Txt"><span>负&nbsp;责&nbsp;人</span>' + floor.dormitory.Functionary + '</div>  <div class="laySec1Txt"><span>负责人电话</span>' + floor.dormitory.Phone + '</div></div>' +
                            '<div class="laySec1Txt"><span>校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span>' + this.filter_company(floor.dormitory.Campus) + '</div>' +
                            '<div class="laySec1Txt"><span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</span>' + floor.dormitory.Address + '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="layer_sec layer_sec2">' +
                            '<ul class="laySec2List">' +
                            '<li><span>编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span>' + floor.dormitory.DNo + '</li>' +
                            '<li><span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>' + (floor.dormitory.Price == null ? '' : floor.dormitory.Price) + ' <i>元</i></li>' +
                            '<li><span>单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</span>' + floor.UnitNum + ' <i>个</i></li>' +
                            '<li><span>入&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;住</span>' + floor.HasStudentNum + ' <i>人</i></li>' +
                            '<li><span>楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层</span>' + floor.floorNum + ' <i>层</i></li>' +
                            '<li><span>空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;床</span>' + floor.NoStudentNum + ' <i>床</i></li>' +
                            '<li><span>房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间</span>' + floor.RoomNum + ' <i>间</i></li>' +
                            //'<li><span>涉及院系</span>' + this.filter_Dept(floor.dormitory.Dept) + '</li>' +
                            '<li><span>床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</span>' + floor.UnitNum + ' <i>个</i></li>' +
                            // '<li><span>涉及专业</span>' + this.filter_Major(floor.dormitory.Major) + '</li>' +
                            '</ul>' +
                            '<div class="laySec2Btn">' +
                            //'<a href="#"><img @@click="update(floor.dormitory.ID)" src="/Content/images/floor/inSec1-1.png" alt="" /></a>' +
                            //'<a href="#"><img src="/Content/images/floor/inSec1-3.png" alt="" /></a>' +
                            //'<a href="#"><img src="/Content/images/floor/inSec1-12.png" alt="" /></a>' +
                            '</div>' +
                            '</div>' +
                            '<div class="layer_sec layer_sec3">' +
                            '<div class="layerSec3Box">' +
                            '<div id="echarts1" style="width: 100%;height:300px;"></div>' +
                            '</div>' +
                            '<div class="layerSec3Box">' +
                            '<div id="echarts2" style="width: 100%;height:300px;"></div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="layer_sec layer_sec2 layer_sec4">' +
                            '<ul class="laySec2List">' +
                            '<li><span>创  建 人 </span>' + floor.dormitory.CreateBy + '</li>' +
                            '<li><span>创建时间 </span>' + floor.dormitory.CreateTime + '</li>' +
                            '<li><span>更 新 人</span>' + floor.dormitory.UpdateBy + ' </li>' +
                            '<li><span>更新时间</span>' + floor.dormitory.UpdateTime + ' </li>' +
                            '</ul>' +
                            '</div>' +
                            '</div>',
                        cancel: function () {
                            echarts1.dispose();
                        }
                    })
                    echarts1 = echarts.init(document.getElementById('echarts1'));


                    echarts1.setOption({
                        title: {
                            text: '{a|' + g + '}\n{b|入住率}',
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                rich: {
                                    a: {
                                        fontSize: '26',
                                        color: '#8F8F8F',
                                        lineHeight: 40
                                    },
                                    b: {
                                        fontSize: '16',
                                        color: '#B1B1B1'
                                    }
                                }
                            }
                        },
                        legend: {
                            data: ['空床', '入住']
                        },
                        grid: {
                            top: '5%',
                            left: '2%',
                            bottom: '10%',
                            containLabel: true
                        },

                        tooltip: {
                            show: true
                        },

                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: true,
                                // 高亮偏移值
                                hoverOffset: 5,
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },

                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                //   highlight 自定义属性  有此属性该数据集保持高亮
                                data: [{ value: floor.HasStudentNum, name: "入住" }, { value: floor.NoStudentNum, name: "空床" }],
                                itemStyle: {
                                    normal: {
                                        color: function () {
                                            return color1[i++];
                                        }
                                    },
                                },
                            }
                        ]
                    });

                }

            },
            created() {
                this.getData();
            },
            filters: {
                filter_sex: function (value) {

                    return value == "1" ? "男生宿舍" : "女生宿舍";
                },
                filter_sexImg: function (value) {
                    return value == "1" ? "/Content/images/floor/inSec1-10_2.png" : "/Content/images/floor/inSec1-10.png"
                },
                filter_style: function (value) {
                    return value == "1" ? { background: '#7070da' } : {};
                },
                filter_url: function (value) {
                    return "/LogisticsManagement/Accommodation/Unit?ID=" + value + "&bbc=aa%26";
                }

            }

        })


    </script>
</body>


)