<!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" />
<link rel="stylesheet" href="./css/index.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>
<body>
<div id="app">
<div class="pubtab">
<div class="tabitem">
<a :href="'jobsubmission.html?viewtoken='+viewtoken">
<img src="img/tab1.png" />
<span>派工统计</span>
</a>
</div>
<div class="tabitem">
<a :href="'guarantee.html?viewtoken='+viewtoken">
<img src="img/tab2.png" />
<span>保障统计</span>
</a>
</div>
<div class="tabitem actitem">
<a :href="'assets.html?viewtoken='+viewtoken">
<img src="img/tab3.png" />
<span>资产统计</span>
</a>
</div>
<div class="tabitem">
<a :href="'routeline.html?viewtoken='+viewtoken">
<img src="img/tab4.png" />
<span>线路统计</span>
</a>
</div>
</div>
<div class="threemain">
<!-- tab切换 -->
<div class="threeicon">
<div class="threetab">
<div class="threeitem" @click="itemclick(1)" :class="{'activeon':isActive==1}">
<span>服务资产</span>
<div></div>
</div>
<div class="threeitem" @click="itemclick(2)" :class="{'activeon':isActive==2}">
<span>代管备件</span>
<div></div>
</div>
</div>
</div>
<!-- 第一个地图 -->
<div class="threedraw">
<h4 v-show="isActive==1">{{texttitle1}}</h4>
<!-- <span v-show="isActive==1">{{tetxtime1}}</span> -->
<h4 v-show="isActive==2">{{texttitle2}}</h4>
<!-- <span v-show="isActive==2">{{tetxtime2}}</span> -->
<!--中国地图两个 -->
<div class="PieAssetL" ref="pieEcharts">
<div v-show="isActive==1" class="assetsall" id="assetsall"></div>
<div v-show="isActive==2" class="chinesethree" id="chinesethree"></div>
</div>
<div class="cenall" v-show="isActive==1">
<span class="censusitem" style="color:#005FBE;background: #E9F3FD;">报障：{{collally.reportCount}}单</span>
<span class="censusitem" style="color:#009AB0;background: #DDF3F5;">服务中：{{collally.serviceCount}}单</span>
<span class="censusitem" style="color:#00B18D;background: #E7F5F3;">已完成：{{collally.finishCount}}单</span>
</div>
</div>
<!-- 第一个显示环形图 -->
<div class="drawring" v-show="isActive==1">
<div><div class="ringstyleall" id="ringstyleall"></div></div>
</div>
<!-- 第二个显示记录 -->
<div class="remindtwo" v-show="isActive==2">
<div class="remindall">
<div class="remindtitle"><span>设备类型</span><span>设备数量</span></div>
<div
v-for="(item,index) in viewequipmentdata"
:class="'itemnum'+index"
>
<span>{{item.name}}</span><span>{{item.value}}</span>
</div>
</div>
</div>
<!-- 第二个显示环形图 -->
<div class="drawtwo" v-show="isActive==2">
<div class="titeone" v-show="isActive==2">设备状态</div>
<div ><div v-show="isActive==2" class="equipment" id="equipment"></div></div>
<div class="titeone" v-show="isActive==2">库存状态</div>
<div><div v-show="isActive==2" class="stockpart" id="stockpartid"></div></div>
</div>
</div>
</body>
<script>
var doc = document,
rootEl = doc.documentElement;
var app = new Vue({
el: "#app",
data() {
return {
viewequipmentdata:[],
collally:{},
isActive: 1,
texttitle1: '',
texttitle2: '',
list: [],
viewtoken:"",
api: "http://test.it188.com/client-service/app/",
img: "",
}
},
methods: {
itemclick(itemval) {
this.isActive = itemval;
if(itemval==1){
}else{
}
},
//环形图
drawscenering(viewceedata){
var sumData = [
{name:'正常',value:viewceedata.normalCount},
{name:'故障',value:viewceedata.faultCount},
{name:'报废',value:viewceedata.scrapCount},
{name:'已取消',value:viewceedata.cancelCount},
{name:'已过保',value:viewceedata.outCount},
];
let dataName = [];
let total = 0;
sumData.forEach((res) => {
dataName.push(res.name);
total += parseFloat(res.value);
});
var partsceneid = document.getElementById('ringstyleall');
var viewringscene = echarts.init(partsceneid);
option = {
tooltip: { //提示框，可以在全局也可以在
show: true,
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color: '#000', //提示框的背景色
textStyle: { //提示的字体样式
color: "white",
}
},
legend: { //图例
orient: 'horizontal',
x: 'center',
y: 'bottom',
icon: 'circle',
data: ['正常', '故障', '报废', '已取消', '已过保'],
textStyle: { //图例文字的样式
color: '#333', //文字颜色
fontSize: 12 //文字大小
}
},
series: [{
name: '访问来源',
type: 'pie', //环形图的type和饼图相同
radius: ['30%', '60%'], //饼图的半径，第一个为内半径，第二个为外半径
center: ['50%', '45%'],
avoidLabelOverlap: false,
color: ['#FF7171', '#3682FF', '#FFB021', '#13AF7A', '#756DE2'],
label: {
normal: { //正常的样式
show: true,
position: 'left',
formatter: '{b} : {c}'
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: true,
}
},
data: sumData
}]
};
viewringscene.setOption(option);
},
//二个环形图
drawequipmap(seibeidata){
var sumData = [
{name:'正常',value:seibeidata.normalCount},
{name:'故障',value:seibeidata.faultCount},
{name:'报废',value:seibeidata.scrapCount},
{name:'已取消',value:seibeidata.cancelCount},
{name:'已过保',value:seibeidata.outCount},
];
var partsceneid = document.getElementById('equipment');
partsceneid.style.width = this.$refs.pieEcharts.offsetWidth + "px";
var viewringscene = echarts.init(partsceneid);
option = {
tooltip: { //提示框，可以在全局也可以在
show: true,
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color: '#000', //提示框的背景色
textStyle: { //提示的字体样式
color: "white",
}
},
legend: { //图例
orient: 'horizontal',
x: 'center',
y: 'bottom',
icon: 'circle',
data: ['正常', '故障', '报废', '已取消', '已过保'],
textStyle: { //图例文字的样式
color: '#333', //文字颜色
fontSize: 12 //文字大小
}
},
series: [{
name: '设备状态',
type: 'pie', //环形图的type和饼图相同
radius: ['30%', '60%'], //饼图的半径，第一个为内半径，第二个为外半径
center: ['50%', '45%'],
avoidLabelOverlap: false,
color: ['#13AF7A', '#FFB021', '#3682FF', '#FF7171', '#756DE2'],
label: {
normal: { //正常的样式
show: true,
position: 'left',
formatter: '{b} : {c}'
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: true,
}
},
data: sumData
}]
};
viewringscene.setOption(option);
},
drawstockpart(optionion){
var sumData = [
{name:'空闲中',value:optionion.freeCount},
{name:'已留用',value:optionion.retentionCount},
{name:'使用中',value:optionion.useCount},
{name:'已锁定',value:optionion.lockCount},
];
var partsceneid = document.getElementById('stockpartid');
partsceneid.style.width = this.$refs.pieEcharts.offsetWidth + "px";
var viewringscene = echarts.init(partsceneid);
option = {
tooltip: { //提示框，可以在全局也可以在
show: true,
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color: '#000', //提示框的背景色
textStyle: { //提示的字体样式
color: "white",
}
},
legend: { //图例
orient: 'horizontal',
x: 'center',
y: 'bottom',
icon: 'circle',
data: ['空闲中', '已留用', '使用中', '已锁定'],
textStyle: { //图例文字的样式
color: '#333', //文字颜色
fontSize: 12 //文字大小
}
},
series: [{
name: '库存状态',
type: 'pie', //环形图的type和饼图相同
radius: ['30%', '60%'], //饼图的半径，第一个为内半径，第二个为外半径
center: ['50%', '45%'],
avoidLabelOverlap: false,
color: ['#13AF7A', '#756DE2', '#3682FF', '#FFB021'],
label: {
normal: { //正常的样式
show: true,
position: 'left',
formatter: '{b} : {c}'
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: true,
}
},
data: sumData
}]
};
viewringscene.setOption(option);
},
//第二个
drawmyMap(mycitydata) {
var moredata=[];
var newcitytwo = 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
})
newcitytwo = moredata.concat(newcitytwo)
var myChartContainer = document.getElementById('chinesethree');
myChartContainer.style.width = this.$refs.pieEcharts.offsetWidth + "px";
var myChartChina = echarts.init(myChartContainer);
// 绘制图表
var optionMap = {
//color:['#CE131B','#ff6600','#808bc6'],
tooltip: {
trigger: 'item',
triggerOn: 'click', //触发方式
enterable: true, // 鼠标可移入tooltip中
formatter:function (params) {
var viewdata =params.data;
var html = '';
html+=
'省份：'+viewdata.name+'<br>'+
'资产：'+viewdata.value +'<br>'
return html;
}
},
legend: {
orient: 'horizontal',
x: 'center',
y: 'bottom',
data: ['iphone3', 'iphone4', 'iphone5']
},
visualMap: {
show: true,
x: 'center',
y: 'bottom',
orient: "horizontal", //图例排列方向
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: newcitytwo //数据
}]
}
myChartChina.setOption(optionMap);
window.onresize = function() {
resizeMyChartContainer();
myChartChina.resize();
}
},
drawassetmap(mycitydata) {
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)
var myChartContainer = document.getElementById('assetsall');
myChartContainer.style.width = this.$refs.pieEcharts.offsetWidth + "px";
var myChartChina = echarts.init(myChartContainer);
// 绘制图表
var optionMap = {
//color:['#CE131B','#ff6600','#808bc6'],
tooltip: {
trigger: 'item',
triggerOn: 'click', //触发方式
enterable: true, // 鼠标可移入tooltip中
formatter:function (params) {
var viewdata =params.data;
var html = '';
html+=
'省份：'+viewdata.name+'<br>'+
'资产：'+viewdata.value +'<br>'
return html;
}
},
legend: {
orient: 'horizontal',
x: 'center',
y: 'bottom',
data: ['iphone3', 'iphone4', 'iphone5']
},
visualMap: {
show: true,
x: 'center',
y: 'bottom',
orient: "horizontal", //图例排列方向
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();
}
},
gettwomoredata(){
this.$http.get(
''+ this.api + 'ticket/statistics/selectStInventoryItemCountByProvince',
{headers: {'x-auth-token':this.viewtoken}},
{emulateJSON: true}
)
.then(function(res) {
if (res.body.code == 200) {
this.viewequipmentdata=res.body.data.resultList;
this.drawequipmap(res.body.data);
this.drawstockpart(res.body.data);
}else{
}
}, function(err) {
console.log(err);
});
},
gettwolist(){
//第二个地图地图加载的数据
const toast = this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: '加载数据中...',
});
this.$http.get(
''+ this.api + '/ticket/statistics/selectStInventoryItemByDistrict',
{headers: {'x-auth-token':this.viewtoken}},
{emulateJSON: true}
)
.then(function(res) {
if (res.body.code == 200) {
toast.clear();
this.texttitle2= "全国代管备件总数："+res.body.data.inventoryCount;
this.drawmyMap(res.body.data.inventoryInMap);
}
}, function(err) {
console.log(err);
});
},
getlist() {
//地图加载的数据
const toast = this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: '加载数据中...',
});
this.$http.get(
''+ this.api + '/ticket/statistics/selectMasMssCountByDistrict',
{headers: {'x-auth-token':this.viewtoken}},
{emulateJSON: true}
)
.then(function(res) {
if (res.body.code == 200) {
toast.clear();
this.texttitle1= "全国资产总数："+res.body.data.total;
this.drawassetmap(res.body.data.rsList);
}
}, function(err) {
console.log(err);
});
//地图下面统计的数据
this.$http.get(
''+ this.api + '/ticket/statistics/selectMasMssCountByProvince',
{headers: {'x-auth-token':this.viewtoken}},
{emulateJSON: true}
)
.then(function(res) {
if (res.body.code == 200) {
//console.log(res.body.data)
this.collally = res.body.data;
this.drawscenering(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;
//this.viewtoken = '934cd108-74fc-45c8-a393-6f1a9aea2584';
//this.viewtoken ='ce474455-d6bf-450d-aabd-21dc0d84dfdc';
},
mounted(e) {
this.getlist();
this.gettwolist();
this.gettwomoredata();
/* add elements */
function xiqiu(productId, totalNum) {
}
}
});
</script>
</html>
网友评论