Tony/god-ytr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:重庆市工程管理有限公司数字化提升项目

Browse Source
This commit is contained in:
xuyoubin 2024-01-10 17:13:50 +08:00
parent 87127da113
commit 2e17ddb4b6
4 changed files with 436 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
god-ui/src/views/bigscreen10/assets/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
god-ui/src/views/bigscreen10/china.js Normal file
View File

File diff suppressed because one or more lines are too long

614
god-ui/src/views/bigscreen10/index.vue
View File

@ -2,7 +2,7 @@
<div class="bigscreen6-wrapper bigscreen-main-wrapper">
<div class="header-main-wrapper">
<div class="header-left-part-wrapper"></div>
<div class="header-title-wrapper">石坪街道老旧小区管理驾驶仓</div>
<div class="header-title-wrapper">重庆工程管理有限公司数字化提升</div>
<div class="header-right-part-wrapper"><BigScreenTime /></div>
</div>
<div class="content-main-wrapper grid-wrapper">
@ -56,7 +56,9 @@
<div class="grid-item">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title">客户合同分布</div>
<div class="bigscreen-item-content"></div>
<div class="bigscreen-item-content map">
<div id='middleMap'></div>
</div>
</div>
</div>
</div>
@ -80,17 +82,22 @@
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer-min-wrapper">
<div class="grid-item">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title">合同签订趋势</div>
<div class="bigscreen-item-content"></div>
<div class="bigscreen-item-content trends">
<div id="chart5"></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="bigscreen-item-wrapper">
<div class="bigscreen-item-title">合同金额趋势</div>
<div class="bigscreen-item-content"></div>
<div class="bigscreen-item-content moneyTrends">
<div id="chart6"></div>
</div>
</div>
</div>
</div>
@ -104,10 +111,9 @@ import {
generatePieOptions,
initChartStatic,
} from "@/utils/bigscreenTool/index.js";
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
};
import { jsData } from "./china";
import * as echarts from "echarts";
import NotImg from "./assets/img.png";
export default {
components: { BigScreenTime, BigScreenTable },
data() {
@ -174,116 +180,11 @@ export default {
this.initChart2();
this.initChart3();
this.initChart4();
this.initChartLine();
this.initMap();
this.initChart5();
this.initChart6();
this.initMiddleMap()
},
methods: {
initMap() {
AMapLoader.load({
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("middleMap", {
zoom: 15, //级别
center: [106.503005, 29.515668], //中心点坐标
mapStyle: "amap://styles/blue",
});
this.map.on("click", (e) => {
navigator.clipboard.writeText(
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
);
});
const marks = [
{
locaton: [106.49925434121705, 29.516762649621796],
name: "新世纪百货",
device: "AI摄像头-CAM90801",
},
{
locaton: [106.50233888158418, 29.51453123556404],
name: "五洲小区东区彩虹广场",
device: "AI摄像头-CAM90802",
},
{
locaton: [106.50388929839779, 29.51887388677875],
name: "重庆天启后街文艺园",
device: "AI摄像头-CAM90803",
},
{
locaton: [106.50438272485353, 29.518270460128708],
name: "虹桥小区",
device: "AI摄像头-CAM90804",
},
];
const marks2 = [
{
locaton: [106.50158249864198, 29.518233115243664],
name: "澳元域33号楼",
device: "AI摄像头-CAM90801",
address: "有电动车乘坐电梯上楼",
},
{
locaton: [106.50255888158418, 29.51453525556404],
name: "五洲小区东区彩虹广场",
device: "AI摄像头-CAM90801",
address: "小区垃圾桶垃圾满溢报警",
},
];
marks.forEach((item, index) => {
this.addMapMarker(item.locaton, "sxt2", {
name: item.name,
device: item.device,
});
});
marks2.forEach((item, index) => {
this.addMapMarker2(item.locaton, "jb", {
name: item.name,
device: item.device,
address: item.address,
});
});
})
.catch((e) => {
console.log(e);
});
},
// 添加图形点标记
addMapMarker(sourceData = [], type = "sxt", info = {}) {
const marker = new AMap.Marker({
position: new AMap.LngLat(sourceData[0], sourceData[1]),
offset: new AMap.Pixel(-30, -52),
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
title: "",
});
this.map.add(marker);
marker.on("click", (e) => {
this.showInfoWindow(sourceData[0], sourceData[1], {
type: "#304156",
...info,
});
});
},
// 显示信息窗体
showInfoWindow(lng, lat, sourceInfo) {
let content = `
<div style="padding: 6px;background-color: #32b9ef;">
<div>
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
<div style="padding: 4px;">正常运行</div>
</div>
</div>
`;
const infoWindow = new AMap.InfoWindow({
content,
anchor: "middle-left",
isCustom: true,
});
infoWindow.open(this.map, [lng, lat]);
},
initChart1() {
initChartStatic(
"chart1",
@ -386,7 +287,7 @@ export default {
initChartStatic(
"chart3",
generatePieOptions({
color: ["#5aadf2", "#62d8ac","#5b6e95"],
color: ["#5aadf2", "#62d8ac", "#5b6e95"],
legend: {
right: "center",
top: "bottom",
@ -400,7 +301,7 @@ export default {
startAngle: 97,
type: "pie",
top: -20,
radius: '50%',
radius: "50%",
center: ["50%", "50%"],
data: [
{
@ -435,9 +336,17 @@ export default {
initChartStatic(
"chart4",
generatePieOptions({
color: ["#3cb7eb", "#77d0e7","#f9c014","#fd951c","#e05441","#be2a23","#8ccbf0"],
color: [
"#3cb7eb",
"#77d0e7",
"#f9c014",
"#fd951c",
"#e05441",
"#be2a23",
"#8ccbf0",
],
legend: {
show:false,
show: false,
right: "center",
top: "bottom",
orient: "horizontal",
@ -450,7 +359,7 @@ export default {
startAngle: 97,
type: "pie",
top: -20,
radius: '60%',
radius: "60%",
center: ["50%", "50%"],
data: [
{
@ -497,53 +406,349 @@ export default {
})
);
},
initChartLine() {
const xAxisData = [],
baseDate = new Date();
for (let i = 0; i < 5; i++) {
const middleDate = new Date();
middleDate.setMonth(baseDate.getMonth() - i);
xAxisData.unshift(`${middleDate.getMonth()}月`);
}
initChart5() {
initChartStatic(
"chartLine",
"chart5",
generateBaseOptions({
xAxis: {
data: xAxisData,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisTick: {
alignWithLabel: true,
},
axisLine: {
show: true,
},
},
legend: {
top: "top",
left: "center",
},
yAxis: {
type: "value",
},
color: ["#a27f53", "#1a3062", "#124a55"],
color: ["#fac25d"],
series: [
{
name: "已处理",
data: [107, 97.5, 88, 102, 91],
name: "合同数量",
data: [2, 3, 4, 5, 7, 11, 14, 15, 17, 18, 20, 24],
type: "line",
symbol: "none",
areaStyle: {
color: "#a27f53",
},
},
{
name: "处理中",
data: [54, 68.5, 71, 53, 47],
type: "line",
areaStyle: {
color: "#1a3062",
},
},
{
name: "已超时",
data: [76.5, 58, 61.5, 27, 38.5],
type: "line",
areaStyle: {
color: "#124a55",
},
},
],
grid: {
bottom: "20%",
},
})
);
},
initChart6() {
initChartStatic(
"chart6",
generateBaseOptions({
xAxis: {
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
legend:{
top:'top',
left:'center'
},
yAxis: {
type: "value",
},
color: ["#3875fe", "#fbbd00"],
series: [
{
name: "销售合同",
data: [200,240,250,260,290,360,380,400,400,410,450,490,500],
type:'bar',
barWidth:'20',
label:{
show:true,
position:'top'
}
},
{
name: "采购合同",
data: [60,67,80,87,105,132,128,150,145,167,170,230],
type:'bar',
barWidth:'20',
label:{
show:true,
position:'top'
}
}
],
grid: {
bottom: "30%",
},
})
);
},
// initMiddleMap() {
// echarts.registerMap("chongqing", jsData);
// const mainMap = document.getElementById("middleMap");
// this.mainMapIns = echarts.init(mainMap);
// const dataList = [
// {
// location: [87.2305571, 42.952565],
// name: "新疆维吾尔自治区",
// money: "10",
// project: "10",
// },
// {
// location: [87.6720922, 30.4421226],
// name: "西藏自治区",
// number: "115",
// money: "15",
// project: "18",
// },
// {
// location: [100.3294324, 37.073776],
// name: "甘肃省",
// money: "12",
// project: "15",
// },
// {
// location: [115.2680375, 42.6545234],
// name: "内蒙古自治区",
// money: "8",
// project: "10",
// },
// {
// location: [117.6596861, 35.494953],
// name: "山东省",
// money: "120",
// project: "15",
// },
// {
// location: [101.6172432, 30.8557071],
// name: "四川省",
// money: "15",
// project: "10",
// },
// {
// location: [109.5096669, 21.9042145],
// name: "广西壮族自治区",
// money: "25",
// project: "15",
// },
// {
// location: [115.1760343, 25.8285884],
// name: "江西省",
// money: "20",
// project: "16",
// },
// ];
// this.mainMapIns.setOption(
// {
// baseOption: {
// geo: {
// aspectScale: 1, //长宽比
// map: "chongqing",
// roam: false,
// itemStyle: {
// borderColor: "#1877cd",
// borderWidth: 2,
// areaColor: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: "#000000", // 0% 处的颜色// 0% 处的颜色
// },
// {
// offset: 1,
// color: "#514768", // 100% 处的颜色 // 100% 处的颜色
// },
// ],
// globalCoord: false, // 缺省为 false
// },
// shadowColor: "#0938b6",
// shadowOffsetX: -10,
// shadowOffsetY: -10,
// shadowBlur: 19,
// emphasis: {
// areaColor: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: "#0335b5", // 0% 处的颜色// 0% 处的颜色
// },
// {
// offset: 1,
// color: "#fba509", // 100% 处的颜色 // 100% 处的颜色
// },
// ],
// globalCoord: false, // 缺省为 false
// },
// borderWidth: 2,
// borderColor: "#7e95d2",
// },
// },
// },
// tooltip: {
// show: true,
// className: "tooltip-frame",
// },
// series: [
// // 正常设备
// {
// type: "scatter",
// coordinateSystem: "geo",
// tooltip: {
// backgroundColor: '#000',
// formatter: (val) => {
// const { data } = val;
// const { INFO } = data;
// return `<div style="
// background:#5b9ad4;
// display:flex;
// align-items:center;
// flex-direction: column;
// justify-content: space-around;color:#fff;width:150px;height:0px">
// <div style="width:100%,text-align:center;">${data.name}</div>
// <div style="display: flex; justify-content: space-around; align-items:center;width:100%;">
// <div>客户数量</div>
// <div>${data.project}</div>
// </div>
// <div style="display: flex; justify-content: space-around; align-items:center;width:100%;">
// <div>合同金额</div>
// <div>${data.money}亿</div>
// </div>
// </div>`;
// },
// },
// symbol: "image://" + NotImg,
// symbolSize: [20, 20],
// symbolOffset: [0, -25],
// radius: "50%",
// data: dataList.map((item) => {
// const INFO = {};
// for (let key in item) {
// INFO[key] = item[key];
// }
// return {
// value: item.location,
// name: item.name,
// money: item.money,
// project: item.project,
// number: item.number,
// };
// }),
// },
// {
// show: false,
// type: "map",
// map: "chongqing",
// zoom: 1,
// aspectScale: 1,
// itemStyle: {
// borderColor: "#05d6f8",
// borderWidth: 2,
// areaColor: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: "#012188", // 0% 处的颜色// 0% 处的颜色
// },
// {
// offset: 1,
// color: "#0335b5", // 100% 处的颜色 // 100% 处的颜色
// },
// ],
// globalCoord: false, // 缺省为 false
// },
// shadowColor: "#0938b6",
// shadowOffsetX: -10,
// shadowOffsetY: -10,
// shadowBlur: 19,
// emphasis: {
// areaColor: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: "#0335b5", // 0% 处的颜色// 0% 处的颜色
// },
// {
// offset: 1,
// color: "#fba509", // 100% 处的颜色 // 100% 处的颜色
// },
// ],
// globalCoord: false, // 缺省为 false
// },
// borderWidth: 2,
// borderColor: "#fda809",
// },
// },
// label: {
// show: true,
// color: "#ffffffA0",
// fontWeight: "500",
// fontSize: "10",
// emphasis: {
// color: "#ffffff",
// },
// },
// tooltip: {
// show: false,
// },
// },
// ],
// },
// },
// true
// );
// window.addEventListener("resize", () => {
// this.mainMapIns && this.mainMapIns.resize();
// });
// },
initMiddleMap(){
}
},
};
</script>
@ -569,20 +774,21 @@ export default {
}
.grid-wrapper {
padding: 10px;
height: 70% !important;
height:65% !important;
display: flex;
justify-content: space-between;
.center {
width: 40%;
height: 100%;
.grid-item{
width: 100%;
height: 100%;
}
}
.left,
.right {
width: 30%;
height: 100%;
}
.center {
width: 40%;
background: pink;
}
.left,
.right {
display: flex;
flex-direction: column;
align-items: center;
@ -606,16 +812,11 @@ export default {
display: flex;
background: linear-gradient(to top, #203b53, #203b5300);
}
#middleMap {
width: 100%;
height: 65%;
background: pink;
}
}
}
.footer-min-wrapper {
width: 100%;
height: 22%;
height: 25%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
@ -636,68 +837,13 @@ export default {
}
/**中央地图 */
.middle-map-wrapper {
position: relative;
.top-card-wrapper {
z-index: 9999;
display: flex;
justify-content: space-around;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 20px;
.top-card-item {
width: 32%;
background-image: url(./assets/backgroundImg.png);
background-size: 100% 100%;
.top-card-main {
display: flex;
align-items: center;
padding: 16px 24px 8px 24px;
&-title {
font-size: 0.9rem;
padding: 0 20px;
}
&-value {
font-size: 1.5rem;
font-family: "Microsoft YaHei";
font-family: "TitleFont";
}
.icon-warpper {
width: 50px;
height: 50px;
background-size: 100% 100%;
}
.icon1 {
background-image: url(./assets/icon1.png);
}
.icon2 {
background-image: url(./assets/icon2.png);
}
.icon3 {
background-image: url(./assets/icon3.png);
}
.map{
width: 100%;
height:100%;
#middleMap {
width: 100%;
height: 100%;
}
.top-card-extra-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
padding-bottom: 10px;
.top-card-extra-item {
padding: 0 10px;
display: flex;
align-items: center;
color: #ffffffdc;
font-size: 0.9rem;
justify-content: space-around;
span:nth-child(2) {
position: relative;
top: 2px;
}
}
}
}
}
}
// 本年合同收款 本年合同付款
@ -737,4 +883,22 @@ export default {
height: 100%;
}
}
//合同签订趋势
.trends {
width: 100%;
height: 100%;
#chart5 {
width: 100%;
height: 100%;
}
}
//合同金额趋势
.moneyTrends {
width: 100%;
height: 100%;
#chart6 {
width: 100%;
height: 100%;
}
}
</style>

46
god-ui/src/views/qcfgjIndustrialVision/qcfgquality/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div class="box">
<!-- 顶部 -->
<div class="top">
</div>
<!-- 质量问题类型 -->
<div class="problemType"></div>
<!-- 质量检测合格率统计 -->
<div class="testIng"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.initChart1()
this.initChart2()
},
methods: {
initChart1(){},
initChart2(){},
},
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: 'TITLEFONT';
src: url(../../../assets/biaoti.ttf);
}
.box{
width: 100%;
height: calc(100vh - 84px);
background: #f1f1f1;
}
.box-title{
font-family: 'TITLEFONT';
font-size: 20px;
margin-bottom: 10px;
}
</style>