123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372 |
- new Vue({
- el: '#app',
- data: {
- city: '上饶市',
- town: [],
- cityVal:"0",
- timeType: '1', //时间过滤条件 1是上月 2是半年
- leftData: {}, //左边数据块
- leftData1: {}, //左边数据块1
- leftData2: {}, //左边数据块2
- bakLeftData1:{},//缓存左边数据块1
- bakLeftData2:{},//缓存左边数据块2
- yesterdayData: {},
- leftChart1: null, //左边的图表1
- leftChart2: null, //左边的图表2
- rightChart1: null, //右边边的图表1
- rightChart2: null, //右边的图表2
- tableData1: null, //表格数据1
- tableData2: null, //表格数据2
- mapData: null,
- allData: null, //所有的数据 用来切换区县
- lineHeightIndex: null,
- skipShow: 0,
- hasData1:true,
- hasData2:true,
- hasData3:true,
- hasData4:true,
- hasData5:true,
- hasData6:true,
- hasMapData:true,
- },
- mounted: function() {
- this.initData();
- },
- filters:{
- formatData:function(value){
- if(value>100000){
- if(value>1000000000){
- return (value/100000000).toFixed(2)+"亿"
- }else{
- return (value/10000).toFixed(2)+"万"
- }
- }else{
- return value
- }
- }
- },
- methods: {
- initData: function() {
- this.timeType = 1;//默认显示本月
- $(".div-mask-layer").show();
- var vm = this,data1, data2, data3, data4, data5, data6, data7, data8;
- this.town.map(function(v, i) {
- if(v.name == vm.city) {
- vm.cityVal = v.id;
- }
- })
- var linkageFilter1 = "quotaDate >= '" + getLastMonthStartDate() + "' and quotaDate <= '" + getLastMonthEndDate() + "';";
- if(vm.cityVal!="0") {
- linkageFilter1 += "town=" + vm.cityVal + ";";
- }
- var linkageFilter2 = "quotaDate >= '" + getYearStartDate() + "' and quotaDate <= '" + getYearEndDate() + "';";
- if(vm.cityVal!="0") {
- linkageFilter2 += "town=" + vm.cityVal + ";";
- }
- var linkageFilter3 = "quotaDate >= '" + getHalfYearStartDate() + "' and quotaDate <= '" + getHalfYearEndDate() + "';";
- if(vm.cityVal!="0") {
- linkageFilter3 += "town=" + vm.cityVal + ";";
- }
- var linkageFilter4 = "quotaDate >= '" + getYearEndDate() + "' and quotaDate <= '" + getYearEndDate() + "';";
- // if(vm.cityVal!="0") {
- // linkageFilter4 += "town=" + vm.cityVal + ";";
- // }
-
-
- var reqUrl = [{url: bigDataAPI.getCityArea,reqType: 'get',data: {}},
- {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0011",linkageFilter:linkageFilter1}},//左上角-上月
- {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0011",linkageFilter:linkageFilter2}},//左上角-本年
- {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0012",linkageFilter:linkageFilter4}},
- {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0013",linkageFilter:linkageFilter3}},//
- {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0014",linkageFilter:linkageFilter3}},//
- {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0015",linkageFilter:linkageFilter3}},//门诊人次月趋势
- {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0016",linkageFilter:linkageFilter3}},//住院人次月趋势
- {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0017",linkageFilter:linkageFilter3}},//门诊分类别月趋势
- {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0018",linkageFilter:linkageFilter3}},//住院平均日数月趋势
- {url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据
- ];
- httpRequest.getReqPromises(reqUrl).then(function(datas) {
- vm.town = [{
- "name": "上饶市",
- "id": "0"
- }].concat(datas[0]);
- vm.leftData1 = datas[1];
- vm.leftData2 = datas[2];
- data3 = datas[3];
- data4 = datas[4];
- data5 = datas[5];
- data6 = datas[6];
- data7 = datas[7];
- data8 = datas[8];
- data9 = datas[9];
- data10 = datas[10];
- vm.setLeftChart1(data6);
- vm.setLeftChart2(data7);
- vm.setRightChart1(data8);
- vm.setRightChart2(data9);
- vm.setTable1(data4);
- vm.setTable2(data5);
- vm.setleftData1();
- echarts.registerMap('上饶',data10);
- vm.setMapData(data3);
- vm.setYesterDay(data3);
- $(".div-mask-layer").hide();
- })
- },
- setleftData1: function() {
- var options = {},options1={},options2={},vm=this;
- if(this.leftData1.successFlg) {
- _.map(vm.leftData1.obj.VIEW_14_0011,function(item,index){
- if(vm.cityVal=="0"){//上饶市
- options1 = vm.leftData1.obj.VIEW_14_0011[0];
- }else if(item.firstColumn==vm.city){
- options1 = item;
- }
- })
- }
- if(this.leftData2.successFlg) {
- _.map(vm.leftData2.obj.VIEW_14_0011,function(item,index){
- if(vm.cityVal=="0"){//上饶市
- options2 = vm.leftData2.obj.VIEW_14_0011[0];
- }else if(item.firstColumn==vm.city){
- options2 = item;
- }
- })
- }
- vm.bakLeftData1 = this.setFormater(options1);
- vm.bakLeftData2 = this.setFormater(options2);
- this.leftData = vm.bakLeftData1;
- },
- setYesterDay: function(data3) {
- var options = {},vm=this;
- if(data3.successFlg) {
- _.map(data3.obj&&data3.obj.VIEW_14_0012||[],function(item,index){
- if(vm.cityVal=="0"){//上饶市
- options = data3.obj.VIEW_14_0012[0];
- }else if(item.firstColumn==vm.city){
- options = item;
- }
- })
- }
- if(options){
- this.setFormater(options);
- this.yesterdayData = options;
- }
- },
- setLeftChart1: function(data6) {
- var options = null;
- var options = data6.successFlg?data6.obj.viewInfos&&JSON.parse(data6.obj.viewInfos[0].options[0].option):{};
- if(options&&options.series && options.series[0].data && options.series[1].data){
- options = leftChart1DataFormat(options);
- this.leftChart1 = options;
- this.hasData1 = true;
- }else{
- this.hasData1 = false;
- }
- },
- setLeftChart2: function(data7) {
- var options = null;
- var options = data7.successFlg?data7.obj.viewInfos&&JSON.parse(data7.obj.viewInfos[0].options[0].option):{};
- if(options&&options.series && options.series[0].data && options.series[1].data){
- options = leftChart2DataFormat(options);
- this.leftChart2 = options;
- this.hasData2 = true;
- }else{
- this.hasData2 = false;
- }
- },
- setMapData: function(data3) {
- var optionData = [];
- _.map(data3.obj&&data3.obj.VIEW_14_0012||[], function(item) {
- if(item.firstColumn != "合计") {
- optionData.push({
- name: item.townName,
- value: parseInt(item.HC_14_1019)
- })
- }
- })
- if(optionData.length>0){
- var options = optionData;
- this.mapData = {
- data: options,
- index: this.lineHeightIndex
- };
- this.hasMapData = true;
- }else{
- this.hasMapData = false;
- }
- },
- setRightChart1: function(data8) {
- var options = null;
- var options = data8.successFlg?data8.obj.viewInfos&&JSON.parse(data8.obj.viewInfos[0].options[0].option):{};
- if(options&&options.series && options.series[0].data && options.series[1].data && options.series[2].data && options.series[3].data){
- options = rightChart1DataFormat(options);
- this.rightChart1 = options
- this.hasData4 = true;
- $(".right1 .contentBox3").removeClass("div-menzhenfenleibei");
- }else{
- this.hasData4 = false;
- $(".right1 .contentBox3").addClass("div-menzhenfenleibei");
- }
- },
- setRightChart2: function(data9) {
- var options = null;
- var options = data9.successFlg?data9.obj.viewInfos&&JSON.parse(data9.obj.viewInfos[0].options[0].option):{};
- if(options&&options.series && options.series[0].data && options.series[1].data){
- options = rightChart2DataFormat(options);
- this.rightChart2 = options
- this.hasData6 = true;
- $(".right2 .contentBox3").removeClass("div-menzhenfenleibei");
- }else{
- this.hasData6 = false;
- $(".right2 .contentBox3").addClass("div-menzhenfenleibei");
- }
- },
- setTable1: function(data4) {
- var resData = [];
- var data = data4.successFlg?data4.obj.VIEW_14_0013:[];
- _.map(data, function(item, index) {
- if(item.firstColumn != "合计" && item.month) {
- item.month = parseInt(item.month.substring(5, 7))+"月";
- resData.push(item)
- }
- })
- if(resData.length==0){
- this.hasData3 = false;
- }else{
- this.hasData3 = true;
- this.tableData1 = resData
- }
- },
- setTable2: function(data5) {
- var resData = [];
- var data = data5.successFlg?data5.obj.VIEW_14_0014:[];
- _.map(data, function(item, index) {
- if(item.firstColumn != "合计" && item.month) {
- item.month = parseInt(item.month.substring(5, 7))+"月";
- resData.push(item)
- }
- })
- if(resData.length==0){
- this.hasData5 = false;
- }else{
- this.hasData5 = true;
- this.tableData2 = resData
- }
- },
- setCity(item) {
- this.city = item.name;
- },
- setTimeStr(v) {
- this.timeType = v;
- this.timeType == 1?this.leftData=this.bakLeftData1:this.leftData=this.bakLeftData2;
- },
- setFormater: function(obj) {
- for(var c in obj) {
- if(obj[c].toString().indexOf(",") == -1){//不存在,,说明要格式化
- var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
- if (!re.test(obj[c])) { //不是数字,则不格式化
- continue;
- }
- if(obj[c]>100000){
- obj[c] = (obj[c]/10000).toFixed(2)+"万"
- }else{
- obj[c] = toThousands(obj[c]);
- }
- }
- }
- return obj;
- },
- newObj: function(obj) {
- return JSON.parse(JSON.stringify(obj))
- },
- clickMap: function(res) {
- this.city = res.name;
- },
- skipClick: function() {
- console.log(222)
- this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0
- }
- },
- watch: {
- city: function(value) {
- var that = this;
- that.lineHeightIndex = value;
- this.initData();
- }
- }
- });
- //数字格式化
- function toThousands(str) {
- if(!str) return
- str = parseInt(str);
- if(typeof(str) == 'number') str = str.toString()
- var newStr = "";
- var count = 0;
- if(str.indexOf(".") == -1) {
- for(var i = str.length - 1; i >= 0; i--) {
- if(count % 3 == 0 && count != 0) {
- newStr = str.charAt(i) + "," + newStr;
- } else {
- newStr = str.charAt(i) + newStr;
- }
- count++;
- }
- str = newStr;
- } else {
- for(var i = str.indexOf(".") - 1; i >= 0; i--) {
- if(count % 3 == 0 && count != 0) {
- newStr = str.charAt(i) + "," + newStr;
- } else {
- newStr = str.charAt(i) + newStr; //逐个字符相接起来
- }
- count++;
- }
- str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
- }
- return str;
- }
- document.getElementById("full").onclick = function (event) {
- var app = document.getElementById('app');
- console.log()
- if($("#full").attr('src') == "../images/full-q.png"){
- $("#full").attr('src',"../images/full-s.png")
- FullScreen(app);
- }else{
- $("#full").attr('src',"../images/full-q.png")
- exitfullscreen()
- }
- }
- function FullScreen() {
- var el = document.documentElement;
- var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; //定义不同浏览器的全屏API
- //执行全屏
- if (typeof rfs != "undefined" && rfs) {
- debugger
- rfs.call(el);
- } else if (typeof window.ActiveXObject != "undefined") {
- var wscript = new ActiveXObject("WScript.Shell");
- if (wscript != null) {
- debugger
- wscript.SendKeys("{F11}");
- }
- }
- }
- function exitfullscreen() { //退出全屏
- if (document.exitFullscreen) {
- document.exitFullscreen();
- }
- else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- }
- else if (document.webkitCancelFullScreen) {
- document.webkitCancelFullScreen();
- }
- else if (document.msExitFullscreen) {
- document.msExitFullscreen();
- }
- }
|