<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=320, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!--https请求http-->
<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<title>资产管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="./css/same.css" />
<script src="js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
<script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://www.html5tricks.com/demo/echarts-html5-canvas-map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
</head>
<style>
#app{
background: #E1E1E1;
}
.apptop{
width: 100%;
margin:auto;
height: 72px;
position: relative;
top: 20px;
}
.apptop span{
display: block;
font-size: 14px;
text-align: center;
color: white;
}
.apptop h4{
display: block;
font-size: 30px;
text-align: center;
font-weight: bolder;
color: white;
padding-top: 3px;
}
.chinesehome {
width: 100%;
margin: 10px auto auto 0px;
height: 330px;
}
.homecon{
background: url(img/bg.png) no-repeat top center;
width: 100%;
}
.maintongji{
border-radius:6px ;
background: white;
width: 95%;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 50px;
}
.conpart{
background: white;
position: relative;
margin-top: 20px;
padding-bottom: 50px;
}
.conpartend{
background: white;
position: relative;
margin-top: 20px;
}
.conall{
position: relative;
width: 90%;
margin: auto;
border-radius: 8px;
font-size: 14px;
border: 1px solid #e1e1e1;
top: 20px;
clear: both;
overflow: hidden;
}
.conall .conitem span{
display: block;
width: 50%;
float: left;
text-align: center;
height: 38px;
line-height: 38px;
}
.conheard span{
background: #F1F1F1!important;
color: black;
font-weight: bold;
}
.conend{
font-size: 14px;
width: 90%;
margin: auto;
box-sizing: border-box;
padding: 12px 0px 24px 0px;
}
.conend p{
font-weight: bold;
color: black;
border-left: 4px solid #3682FF;
width: 72px;
text-align: center;
height: 20px;
line-height: 20px;
}
.conend span{
display: block;
margin: 10px 0px;
color: #28282D;
font-weight: bold;
}
.endpart img{
display: block;
width: 30px;
float: left;
}
.endpart{
overflow: hidden;
clear: both;
}
#specialLook{
pointer-events: all;
}
.conitem{
clear: both;
overflow: hidden;
}
</style>
<body>
<div id="app">
<div class="homecon">
<div class="apptop">
<span>资产总数(个)</span>
<h4>{{viewdata.total}}</h4>
</div>
<div class="maintongji">
<div class="chinesehome" id="chinese"></div>
</div>
<div class="conpart">
<div class="conall">
<div class="conitem conheard"><span>设备类型</span><span>设备数量</span></div>
<div v-if="equipdata.length==0" style="text-align: center;padding: 60px 0px 20px;">暂无数据</div>
<div class="conitem" v-for="item in equipdata" @click="clickitem(item)">
<span>{{item.assetTypeName}}</span><span>{{item.deviceCount}}</span>
</div>
</div>
</div>
<div class="conpartend">
<div class="conend">
<p>资产分类</p>
<div class="endpart">
<span>拓扑结构图</span>
<div>
<img src="img/ppt.png" />
<img style="margin-left: 40px;" src="img/world.png" />
<img style="margin-left: 40px;" src="img/video.png" />
</div>
</div>
<div class="endpart">
<span>机构结构图</span>
<div>
<img src="img/pdf.png" />
<img style="margin-left: 40px;" src="img/exal.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var doc = document,
rootEl = doc.documentElement;
var app = new Vue({
el: "#app",
data() {
return {
equipdata:[],
province:"",
viewtime:0,
viewdata:'',
viewtoken:"",
showtime: false,
viewcount: "全部",
api: "http://test.it188.com/client-service/app/",
mydata: [],
gettime:[],
timerang:[
{name:'全部',id:0},
{name:'今日',id:1},
{name:'本周',id:2},
{name:'本月',id:3},
{name:'近六个月',id:4},
{name:'近一年',id:5},
],
citydata:[],
}
},
methods: {
drawmyMap( mycitydata) {
var that = this;
var moredata=[];
var newcitydata = mycitydata.map((item,index)=>{
if(item.name.indexOf('市') !== -1){
item.name = item.name.substring(0, item.name.length - 1);
}if(item.name.indexOf('省') !== -1){
item.name = item.name.substring(0, item.name.length - 1);
}if(item.name.indexOf('自治区') !== -1){
item.name = item.name.substring(0, item.name.length - 3);
}
if(item.name.indexOf('港澳台') !== -1){
moredata = [{name:"香港",value:item.value},{name:"澳门",value:item.value},{name:"台湾",value:item.value}]
}
return item
})
newcitydata = moredata.concat(newcitydata)
//console.log(newcitydata)
var myChartContainer = document.getElementById('chinese');
var myChartChina = echarts.init(myChartContainer);
// 绘制图表
var optionMap = {
tooltip: {
trigger: 'item',
triggerOn: 'click', //触发方式
enterable: true, // 鼠标可移入tooltip中
formatter:function (params) {
that.domore(params.data.name);
let url = "https://www.baidu.com/";
var goToUrl = url + '?province='+params.data.name;
var viewdata =params.data;
var html = '';
html+=
'省份：'+viewdata.name+'<br>'+
'资产：'+viewdata.value +'<br>'+
'<div style="width: 100%; height: 1px;background:white!important; margin: 10px 0px;"></div>'+
'<span id="specialLook" onclick="lookVideoGo(\'' +viewdata.name +'\')" style="pointer-events: all;color:white" >查看详情 〉</span>'+'<br>'
//lookVideoGo按钮触发函数 ，注意传递参数引号规则
return html;
}
},
legend: {
orient: 'horizontal',
x: 'center',
y: 'bottom',
data: ['iphone3', 'iphone4', 'iphone5']
},
visualMap: {
show: true,
x: 'center',
y: 'bottom',
orient: "horizontal", //图例排列方向
textGap:2,
splitList:
[
{start: 500,end: 1000},
{start: 100,end: 500},
{start: 50,end: 100},
{start: 0,end: 50},
],
color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', ]
},
selectedMode: 'single',
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
showLegendSymbol: false,
type: 'map',
mapType: 'china',
aspectScale: 0.9, //长宽比
zoom: 1.4,
roam: false,
label: {
normal: {
show: false //省份名称
},
emphasis: {
show: true
}
},
data: newcitydata //数据
}]
}
myChartChina.setOption(optionMap);
window.onresize = function() {
resizeMyChartContainer();
myChartChina.resize();
}
},
timeclick() {
this.showtime = !this.showtime
},
clickitem(val){
alert(val.catalogId)
},
domore(valcity){
this.equipdata=[];
this.province= valcity;
this.gettypedata()
},
gettypedata(){
this.$http.get(
''+ this.api + 'saMssItem/selectDeviceCountByCatalog?province='+this.province,
{headers: {'X-Auth-Token':this.viewtoken}},
{emulateJSON: true}
)
.then(function(res) {
if (res.body.code == 200) {
this.equipdata= res.body.data.voSet
//console.log(res.body.data)
}
}, function(err) {
console.log(err);
});
},
getlist() {
const toast = this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: '加载数据中...',
});
this.$http.get(
''+ this.api + 'saMssItem/selectDeviceCount',
{headers: {'X-Auth-Token':this.viewtoken}},
{emulateJSON: true}
)
.then(function(res) {
if (res.body.code == 200) {
toast.clear();
this.viewdata = res.body.data
this.drawmyMap(res.body.data.rsList);
//console.log(res.body.data)
}
}, function(err) {
console.log(err);
});
}
},
created() {
//处理链接拼接出的token
// http://127.0.0.1:8848/newone/index.html?viewtoken=934cd108-74fc-45c8-a393-6f1a9aea2584
var params = [], h;
var hash = window.location.href.slice(window.location.href.indexOf("?") + 1).split('&');
for (var i = 0; i < hash.length; i++) {
h = hash[i].split("=");
params.push(h[0]);
params[h[0]] = h[1];
}
this.viewtoken = params.viewtoken;
},
mounted(e) {
this.getlist();
this.gettypedata()
}
});
</script>
<script>
function lookVideoGo(val){
alert(val)
}
</script>
</html>
网友评论