web
/
local_archive


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import element-ui CSS -->
    <link rel="stylesheet" href="../css/element-plus.css">
    <!-- import Vue before Element -->
    <script src="../utijs/vue.js"></script>
    <!-- import element-ui JavaScript -->
    <script src="../utijs/elementui.js"></script>
    <script src="../utijs/echart.js"></script>
    <link rel="stylesheet"  href="../css/index.css">
</head>
<body>
<!--编写标签-->
<div id="app">
    <div class="hc-layout-box">
        <div class="main_box">
            <div class="main_nox_header">
                <span class="inner-text">
                    {{projectName}}
                </span>
            </div>
            <div class="maininfo">
                <div class="maininfo_box">
                    <div class="main_box_top">
                        <div class="main_box_top_left">
                            <div class="today_title">
                                <span>今日，</span>
                            </div>
                            <div class="today_title_info">
                                <span>{{yearTime}}年{{monthTime}}月{{dateTime}}日{{nowWeek}}，欢迎您使用档案控制台。</span>
                            </div>
                            <div class="today_title_info_bottom"> 
                                <div class="today_title_info_bottom_left">
                                    <span>总存储量</span>
                                </div>
                                <div class="today_title_info_bottom_right_box">
                                    <span class="today_title_info_bottom_right">{{allSize}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="main_box_top_right">
                            <div class="main_box_top_right_toptitle">
                                <span>档案总数</span>
                            </div>
                            <div class="main_box_top_right_topnumbox">
                                <span class="main_box_top_right_topnum">{{countArchives}}</span>
                                <span class="main_box_top_right_topnum_tip">卷</span>
                            </div>
                        </div>
                    </div>
                    <div class="main_box_center">
                        <div class="echart_box" id="main"></div>
                    </div>
                    <div class="main_box_center_btn_box">
                        <div class="main_box_center_btn" @click="toQuery">
                            <span >点击进馆查询</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script>
    let myEchart;
    
      
    // 创建vue
    new Vue({
        // 控制的标签容器
        el: '#app',
        // 交互的数据
        data: function () {
            return {
                allSize:'66.35MB',
                visible: false,
                projectName:'安康至来凤国家高速公路奉节至巫山段-档案管理',
                countArchives: 0,
                option:{
                    title: {
                    text: '各保管期限案卷数量'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['永久','定期30年','定期10年'],
                        axisLine: {
                            show: false, // 不显示坐标轴线
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
                            formatter: "{value}",
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: false, // 不显示坐标轴线
                        },
                        splitLine :{
                            lineStyle:{
                                type:'dashed'//虚线
                            },
                            show: true //隐藏
                            }

        
                    },
                    series:[
                        {   type: 'bar',
                            data: [0, 0, 0],
                            barWidth: '30%',
                            itemStyle:{
                                color:'#59CEF5'
                            }
                        }
                    ]
    

                },
                echartTest:null,
                yearTime:'',
                monthTime:'',
                dateTime:'',
                nowWeek:'',
            }
        },
        // 方法
        methods: {
            //获取当前时间
            getNowTime(){
                let date= new Date();
                this.yearTime=date .getFullYear();
                this.monthTime=date .getMonth()+1;
                this.dateTime=date .getDate();
                this.nowWeek="星期"+"天一二三四五六".charAt(new Date().getDay());
            },
            //获取项目名称
            getProjectName(){
                let that = this;
                var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
                db.transaction(function (tx) {
                    tx.executeSql('select node_name as name FROM m_archive_tree_contract WHERE parent_id=0 ',
                        [], function (tx, results) {
                            that.projectName = results.rows[0].name;
                        }, null);
                });
            },
            toQuery() {
                console.log('去首页');
                window.location.href="query.html";
            },
            //获取案卷总数
            getCountArchives(){
                let that = this;
                var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
                db.transaction(function (tx) {
                        tx.executeSql('SELECT * FROM u_archives_auto', [], function (tx, results) {
                            that.countArchives = results.rows.length;
                        }, null);
                });
            },
            //各保管期限档案数量
            getHistogram(){
                let that = this;
                var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
                db.transaction(function (tx) {
                    tx.executeSql('SELECT * FROM u_archives_auto where storage_time = "3"', [], function (tx, results) {
                        that.option.series[0].data[0] = results.rows.length;
                        console.log( that.option.series[0].data);
                        console.log('永久');
                    }, null);
                    tx.executeSql('SELECT * FROM u_archives_auto where storage_time = "2"', [], function (tx, results) {
                        that.option.series[0].data[1] = results.rows.length;
                        console.log( that.option.series[0].data);
                        console.log('30');
                    }, null);
                    tx.executeSql('SELECT * FROM u_archives_auto where storage_time = "1"', [], function (tx, results) {
                        that.option.series[0].data[2] = results.rows.length;
                        console.log( that.option.series[0].data);
                        console.log('10');
                        myEchart.setOption(that.option);
                    }, null);
                });
            },
            //获取档案总存储量
            getAutoAllSize(){
                let that = this;
                var db = openDatabase('test1341', '1.0', '测试', 2 * 1024 * 1024);
                db.transaction(function (tx) {
                    tx.executeSql('SELECT SUM(file_size) as fileSize FROM u_archives_auto', [], function (tx, results) {
                        var fileSizeString = "";
                        var wrongSize = "0B";
                        var fizeSize = results.rows[0].fileSize * 1024;
                        if (fizeSize == 0) {
                            return wrongSize;
                        }
                        if (fizeSize < 1024) {
                            fileSizeString = fizeSize + "B";
                        } else if (fizeSize < 1048576) {
                            fileSizeString =  (fizeSize / 1024).toFixed(2) + "KB";
                        } else if (fizeSize < 1073741824) {
                            fileSizeString =  (fizeSize / 1048576).toFixed(2) + "MB";
                        } else {
                            fileSizeString = (fizeSize / 1073741824).toFixed(2) + "GB";
                        }
                        that.allSize = fileSizeString;
                    }, null);
                });
            }
         
        },
        mounted(){
            this.getProjectName();
            this.getNowTime()
            this.getCountArchives();
            this.getHistogram();
            this.getAutoAllSize();
            myEchart = echarts.init(document.getElementById('main'));
            myEchart.setOption(this.option)
            this.echartTest =myEchart
            window.onresize =() => {
                if (this.echartTest) this.echartTest.resize();
            }
        }
    })
</script>
</html>