| src/views/home/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index_1280_1024.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index_1600_900.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/securityUnitOperation/economicAnalysis.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/securityUnitOperation/operationAnalysis.vue | ●●●●● patch | view | raw | blame | history | |
| vue.config.js | ●●●●● patch | view | raw | blame | history |
src/views/home/index.scss
@@ -1,8 +1,6 @@ .bajgxt-home { height: 100%; width: 100%; // width: 1920px; // height: 1080px; background: url("../../../public/img/bajgxt/backimg.png") no-repeat; background-size: 100% 100%; @@ -20,16 +18,6 @@ text-align: center; line-height: 77px; } // span:nth-child(2) { // position: absolute; // margin-top: 22px; // margin-left: 26%; // font-size: 22px; // cursor: pointer; // &:hover { // color: #90cef0; // } // } img { position: absolute; margin-top: 22px; @@ -47,20 +35,15 @@ color: #90cef0; } } .side { width: 27%; height: 100%; } .content { margin: 5px 20px 20px 20px; // height: calc(100% - 77px); // width: 100%; height: calc(100% - 102px); width: calc(100% - 40px); display: flex; .left, .right { @extend .side; width: 27%; height: 100%; } .middle { width: calc(46% - 50px); @@ -75,7 +58,7 @@ width: 100%; height: 260px; } .echartClass { .echartClass_1920 { // height: 100%; width: 100%; height: calc(100% - 70px); @@ -88,7 +71,7 @@ background-size: 100% 100%; position: relative; #left1Echart { @extend .echartClass; @extend .echartClass_1920; height: calc(100% - 140px) !important; margin-top: 68px; } @@ -101,7 +84,7 @@ margin-top: 25px; position: relative; #left2Echart { @extend .echartClass; @extend .echartClass_1920; } } } @@ -113,7 +96,7 @@ height: 28%; position: relative; #right1Echart { @extend .echartClass; @extend .echartClass_1920; } } .right2 { @@ -124,7 +107,7 @@ margin-top: 30px; position: relative; #right2Echart { @extend .echartClass; @extend .echartClass_1920; } } .right3 { @@ -134,7 +117,7 @@ background-size: 100% 100%; margin-top: 25px; #right3Echart { @extend .echartClass; @extend .echartClass_1920; } } } @@ -424,7 +407,7 @@ } /deep/ .el-table__body-wrapper { overflow: auto; height: 100%; height: calc(100% - 50px); } } .left2-btn { @@ -628,10 +611,11 @@ right: 47px; margin-top: 76px; .block1 { width: 30px; height: 15px; width: 10px; height: 10px; background: #008dec; margin-top: 7px; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; @@ -650,10 +634,11 @@ right: 47px; margin-top: 135px; .block1 { width: 30px; height: 15px; width: 10px; height: 10px; background: #886eff; margin-top: 7px; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; src/views/home/index.vue
@@ -699,7 +699,7 @@ selectJy, selectWg, punishList, lazyTrees, lazyTrees } from "../../api/index/index"; import car from "@/assets/img/car.png"; @@ -728,7 +728,7 @@ materialNum: 0, punishNum: 0, wgNum: 0, ymwsNum: 0, ymwsNum: 0 }, carNum: 0, peoNum: 0, @@ -738,7 +738,7 @@ left1Echart: null, left2Echart: null, mapEchart: null, right3Echart: null, right3Echart: null }, left1loading: true, left2loading: true, @@ -755,7 +755,7 @@ wz: 0, kqy: 0, nan: 0, nv: 0, nv: 0 }, left2EchartType: 0, poorPerformanceType: 3, @@ -765,29 +765,29 @@ total: 0, current: 1, type: "zg", title: "资格异常人员清单", title: "资格异常人员清单" }, dialogTable: { wgTable: [], jyTable: [], ymTable: [], ymTable: [] }, props: { children: "children", label: "title", value: "id", value: "id" }, node1: {}, //选中的记录 node2: {}, node2: {} }; }, computed: { text() { return { id: this.number, val: this.textArr[this.number], val: this.textArr[this.number] }; }, } }, methods: { //点击节点 @@ -841,7 +841,7 @@ // 左侧表的接口返回数据 initEchart() { securityTotal().then((res) => { securityTotal().then(res => { if (res.data.code == 200) { let securityData = res.data.data; if (!this.echarts.left1Echart) { @@ -855,10 +855,10 @@ } this.left1loading = false; }); seCountI({ jurisdiction: "", deptid: "" }).then((res) => { seCountI({ jurisdiction: "", deptid: "" }).then(res => { if (res.data.code == 200) { let data = res.data.data; data.forEach((item) => { data.forEach(item => { if (item.stats === "0") { this.leftData.zz = item.num; } @@ -879,7 +879,8 @@ this.$message.error(res.msg); } }); selectFj().then((res) => { selectFj().then(res => { debugger; if (res.data.code === 200) { if (!this.echarts.right3Echart) { this.echarts.right3Echart = echarts.init( @@ -903,7 +904,7 @@ this.echarts.left2Echart.clear(); } if (type === 0) { holderNum().then((res) => { holderNum().then(res => { if (res.data.code === 200) { let data = res.data.data; this.echarts.left2Echart = echarts.init( @@ -916,7 +917,7 @@ this.left2loading = false; }); } else { seCountUg({ jurisdiction: "", deptid: "" }).then((res) => { seCountUg({ jurisdiction: "", deptid: "" }).then(res => { if (res.data.code === 200) { this.echarts.left2Echart = echarts.init( document.getElementById("left2Echart") @@ -950,7 +951,7 @@ this.middleloading = false; this.textArr = []; if (type === 2) { this.tableData.forEach((item) => { this.tableData.forEach(item => { let obj = "押运车辆车牌号" + item.carNum + @@ -965,7 +966,7 @@ this.textArr.push(obj); }); } else if (type === 1) { this.tableData.forEach((item) => { this.tableData.forEach(item => { let obj = "押运人员" + item.name + @@ -978,7 +979,7 @@ this.textArr.push(obj); }); } else if (type === 3) { this.tableData.forEach((item) => { this.tableData.forEach(item => { let obj = "枪支编号" + item.number + @@ -999,21 +1000,21 @@ let middleData = { 1: { table: [], geoData: [], geoData: [] }, 2: { table: [], geoData: [], geoData: [] }, 3: { table: [], geoData: [], }, geoData: [] } }; getLiveLocationVoList({ type: type }).then((res) => { getLiveLocationVoList({ type: type }).then(res => { if (res.data.code === 200) { let allData = res.data.data; allData.forEach((m) => { allData.forEach(m => { let obj = { location: m.location, name: m.name, @@ -1021,7 +1022,7 @@ linkman: m.linkman, company: m.company, tel: m.tel, carNum: m.carNum, carNum: m.carNum }; // let geoObj = { @@ -1030,7 +1031,7 @@ // }; middleData[m.type]["geoData"].push([ Number(m.longitude), Number(m.latitude), Number(m.latitude) ]); middleData[m.type]["table"].push(obj); }); @@ -1056,36 +1057,38 @@ zIndex: 4, title: "影像", source: new XYZ({ url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划 }), url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划 }) }), new Tile({ zIndex: 5, title: "道路+中文注记", source: new XYZ({ url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记 }), }), url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记 }) }) ], view: new View({ projection: "EPSG:4326", center: [115.892151, 28.676493], zoom: 10, }), zoom: 10 }) }); this.carVectorLayer = new VectorLayer({ zIndex: 99, source: new VectorSource(), source: new VectorSource() }); this.peoVectorLayer = new VectorLayer({ zIndex: 99, source: new VectorSource(), source: new VectorSource() }); this.gunVectorLayer = new VectorLayer({ zIndex: 99, source: new VectorSource(), source: new VectorSource() }); this.map.addLayer(this.carVectorLayer); this.map.addLayer(this.peoVectorLayer); @@ -1095,7 +1098,7 @@ }, // 获取辖区列表 getOfficeData() { lazyTrees().then((res) => { lazyTrees().then(res => { if (res.data.code === 200) { this.options1 = res.data.data; this.options2 = res.data.data; @@ -1137,7 +1140,7 @@ } }, getWgTable() { this.dialogTable.wgTable.forEach((item) => { this.dialogTable.wgTable.forEach(item => { let czl = 0; if (Number(item.cznum) !== 0 && Number(item.znum) !== 0) { czl = @@ -1155,7 +1158,7 @@ this.gridData.total = this.dialogTable.wgTable.length; }, getJyTable() { this.dialogTable.jyTable.forEach((item) => { this.dialogTable.jyTable.forEach(item => { let pql = 0; if (Number(item.painum) !== 0 && Number(item.znum) !== 0) { pql = @@ -1183,9 +1186,9 @@ let params = { current: this.gridData.current, size: 10, jurisdiction: this.value2, jurisdiction: this.value2 }; punishList(params).then((res) => { punishList(params).then(res => { if (res.data.code === 200) { this.gridData.data = res.data.data.records; this.gridData.total = res.data.data.total; @@ -1223,9 +1226,9 @@ current: this.gridData.current, size: 10, examinationType: 1, jurisdiction: this.value1, jurisdiction: this.value1 }; qualificationPages(params).then((res) => { qualificationPages(params).then(res => { if (res.data.code === 200) { this.gridData.data = res.data.data.records; this.gridData.total = res.data.data.total; @@ -1246,9 +1249,9 @@ let params = { current: this.gridData.current, size: 10, jurisdiction: this.value2, jurisdiction: this.value2 }; punishList(params).then((res) => { punishList(params).then(res => { if (res.data.code === 200) { this.gridData.data = res.data.data.records; this.gridData.total = res.data.data.total; @@ -1259,7 +1262,7 @@ }, // 经营不善 getMaterial() { selectJy({ jurisdiction: this.value2 }).then((res) => { selectJy({ jurisdiction: this.value2 }).then(res => { if (res.data.code === 200) { this.rightData.materialNum = res.data.data.count; this.dialogTable.jyTable = res.data.data.List; @@ -1271,7 +1274,7 @@ }, // 有名无实 getselectYs() { selectYs({ jurisdiction: this.value2 }).then((res) => { selectYs({ jurisdiction: this.value2 }).then(res => { if (res.data.code === 200) { this.rightData.ymwsNum = res.data.data.count; this.dialogTable.ymTable = res.data.data.List; @@ -1283,7 +1286,7 @@ }, // 违规经营 getselectWg() { selectWg({ jurisdiction: this.value2 }).then((res) => { selectWg({ jurisdiction: this.value2 }).then(res => { if (res.data.code === 200) { this.rightData.wgNum = res.data.data.count; this.dialogTable.wgTable = res.data.data.list; @@ -1313,8 +1316,8 @@ // this.rightData.qualification = 45; selectBx({ jurisdiction: this.value1, type: this.poorPerformanceType, }).then((res) => { type: this.poorPerformanceType }).then(res => { if (res.data.code === 200) { this.rightData.poorPerformance = res.data.data[0].count; } else { @@ -1324,8 +1327,8 @@ }); selectExtype({ jurisdiction: this.value1, type: this.poorPerformanceType, }).then((res) => { type: this.poorPerformanceType }).then(res => { if (res.data.code === 200) { this.rightData.qualification = res.data.data[0].count; } else { @@ -1364,7 +1367,7 @@ // this.$router.push({ path: "/register/index" }); // this.$router.push({ path: "/securityGuardManagement/register" }); this.$router.push({ path: website.fistPage.value }); }, } }, mounted() { this.initEchart(); @@ -1375,12 +1378,25 @@ this.getTableData(0); // this.initMapEchart(); this.getOfficeData(); }, } }; </script> <style lang="scss" scoped> @import "./index.scss"; // 适配分辨率1280*1024 @media screen and (max-width: 1280px) { @import "./index_1280_1024.scss"; } // 适配分辨率1600*900 @media screen and (min-width: 1281px) and (max-width: 1600px) { @import "./index_1600_900.scss"; } // 适配分辨率1920*1080 @media screen and (min-width: 1601px) and (max-width: 1920px) { @import "./index.scss"; } // @import "./index.scss"; /deep/ .el-select-dropdown { border: 1px solid #9199ab; background-color: #022c53; src/views/home/index_1280_1024.scss
New file @@ -0,0 +1,699 @@ .bajgxt-home { height: 100%; width: 100%; background: url("../../../public/img/bajgxt/backimg.png") no-repeat; background-size: 100% 100%; .head-title { background: url("../../../public/img/bajgxt/title2.png") no-repeat; background-size: 100% 100%; width: 100%; height: 77px; text-align: center; // position: relative; span { font-family: "Arial Normal", "Arial", sans-serif; font-size: 36px; color: #ffffff; text-align: center; line-height: 77px; } img { position: absolute; margin-top: 22px; margin-left: 29%; } } .sub-title { float: right; color: #fff; margin-right: 52px; font-size: 18px; margin-top: -35px; cursor: pointer; &:hover { color: #90cef0; } } .content { margin: 5px 20px 20px 20px; height: calc(100% - 102px); width: calc(100% - 40px); display: flex; .left, .right { width: 27%; height: 100%; } .middle { width: calc(46% - 50px); height: 100%; margin: 0px 25px; position: relative; } } .leftimg { background: url("../../../public/img/bajgxt/left1.png") no-repeat; background-size: contain; width: 100%; height: 260px; } .echartClass_1280 { // height: 100%; width: 100%; height: calc(100% - 70px); } .left { .left1 { background: url("../../../public/img/bajgxt/left1.png") no-repeat; height: 60%; width: 100%; background-size: 100% 100%; position: relative; #left1Echart { @extend .echartClass_1280; height: calc(100% - 140px) !important; margin-top: 68px; } } .left2 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; height: calc(40% - 25px); width: 100%; background-size: 100% 100%; margin-top: 25px; position: relative; #left2Echart { @extend .echartClass_1280; } } } .right { .right1 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; background-size: 100% 100%; width: 100%; height: 28%; position: relative; #right1Echart { @extend .echartClass_1280; } } .right2 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; background-size: 100% 100%; width: 100%; height: 28%; margin-top: 30px; position: relative; #right2Echart { @extend .echartClass_1280; } } .right3 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; height: calc(40% - 25px); width: 100%; background-size: 100% 100%; margin-top: 25px; #right3Echart { @extend .echartClass_1280; } } } .title-pane { display: inline-flex; height: 55px; img { width: 25px; height: 25px; margin: 19px 10px 0px 10px; } span { line-height: 68px; color: #fff; font-size: 17px; } } .title-pane1 { display: inline-flex; height: 41px; img { width: 25px; height: 25px; margin: 8.5px 10px 0px 10px; } span { line-height: 46px; color: #fff; font-size: 17px; } } .title-pane2 { display: inline-flex; height: 53px; img { width: 25px; height: 25px; margin: 13.5px 10px 0px 10px; } span { line-height: 59px; color: #fff; font-size: 17px; } } .middle { .mapimg { background: url("../../../public/img/bajgxt/u3.png") no-repeat; background-size: 100% 100%; height: 60%; width: 100%; #map { width: calc(100% - 40px); height: calc(100% - 40px); margin: 0px 20px; top: 20px; position: relative; } } .table { margin-top: 25px; height: calc(40% - 25px); width: 100%; background: url("../../../public/img/bajgxt/table.png") no-repeat; background-size: 100% 100%; position: relative; .table-title { background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat; background-size: 100% 100%; position: absolute; width: 267px; margin-top: -13px; height: 50px; margin-left: calc(50% - 135.5px); color: #fff; font-size: 20px; text-align: center; line-height: 54px; } .lefttop { background: url("../../../public/img/bajgxt/lefttop.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: -7px; top: -9px; } .leftbottom { background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: -7px; bottom: -7px; } .righttop { background: url("../../../public/img/bajgxt/righttop.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: calc(100% - 37px); top: -9px; } .rightbottom { background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: calc(100% - 37px); bottom: -7px; } } } .middle { .el-table { width: calc(100% - 40px); height: calc(100% - 65px); margin: 0px 20px 15px; top: 50px; } /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td { background: #031d4b !important; } /deep/ .el-table--enable-row-transition .el-table__body td, /deep/ .el-table th, .el-table tr { background: #03225b !important; } /deep/ .el-table .cell { color: #fff; text-align: center; } /deep/ .el-table td, .el-table th.is-leaf { border-bottom-color: transparent; } /deep/ .el-table__header th { border-bottom: 1px solid #031a38 !important; } /deep/.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #b0caf3; } } /deep/ .el-input__inner { height: 27px; color: #fff !important; font-size: 14px; background-color: transparent !important; border-color: transparent !important; border-radius: 2px; } /deep/ .el-input { width: 138px; } /deep/ .el-select { line-height: 52px; position: absolute; right: 14px; } /deep/ .el-input__icon { line-height: 53px; } /deep/ .el-select:hover .el-input__inner, /deep/ .el-select .el-input.is-focus .el-input__inner { border: none; } /deep/ .el-table, /deep/ .el-table__expanded-cell, /deep/ .el-table--border::after, /deep/ .el-table--group::after, /deep/ .el-table::before { background-color: transparent !important; } .card-text { height: 30px; padding: 8px 10px; color: #fff; font-size: 14px; text-align: center; span:nth-child(2) { color: red; font-size: 21px; margin: 0px 10px; font-weight: bold; } span:nth-child(4) { margin-left: 15px; } span:nth-child(5) { margin: 0px 10px; color: red; font-size: 20px; } } .right-content { height: calc(100% - 71px); width: calc(100% - 30px); padding: 15px; } .card-list { margin-top: 10px !important; margin: 10px 60px 15px 5px; display: flex; height: 50px; line-height: 50px; img:first-child { height: 50px; z-index: 22; } img:nth-child(2) { position: absolute; margin-left: 13px; width: 30px; height: 30px; margin-top: 10px; z-index: 22; } img:nth-child(3) { margin-left: -20px; height: 50px; } span:nth-child(4) { color: red; font-size: 26px; display: block; width: 71px; margin-left: -74px; text-align: center; } span:nth-child(5) { color: #7ff3f4; font-size: 15px; display: block; width: 129px; margin-left: 22px; } } .mapBtn, .mapBtn:nth-child(2), .mapBtn:nth-child(3) { position: absolute; z-index: 99; color: #fff; background: #014e84; margin-top: 38px; margin-left: calc(100% - 140px); border-radius: 11px; height: 43px; display: inline-flex; width: 107px; cursor: pointer; img { margin: 8px 3px 8px 5px; height: 28px; width: 30px; } .text { width: 100px; text-align: center; margin: 3px; span:nth-child(1) { width: 100%; display: block; font-size: 10px; } span:nth-child(2) { width: 100%; display: block; color: red; font-size: 17px; font-weight: bold; } } &:hover { box-shadow: 0px 0px 10px #7ff3f4; } } .mapBtn:nth-child(2) { margin-top: 100px; } .mapBtn:nth-child(3) { margin-top: 160px; } /deep/ .el-table__body-wrapper { overflow: auto; height: calc(100% - 50px); } } .left2-btn { height: 19px; width: 60px; background-color: #4478d0; color: #fff; font-size: 0.1rem !important; font-weight: 700; line-height: 19px !important; text-align: center; position: absolute; cursor: pointer; } .left2-btn.btn1 { right: 78px; margin-top: 22px; } .left2-btn.btn2 { right: 12px; margin-top: 22px; } .left2-btn.date { right: 22px; margin-top: 12px; } .left2-btn.mounce { right: 22px; margin-top: 57px; } .left2-btn.all { right: 22px; margin-top: 101px; } .rightData { position: relative; color: #fff; background: #010945; border-radius: 11px; height: 50px; display: inline-flex; width: 125px; cursor: pointer; font-weight: 700; img { margin: 12px; height: 20px; width: 22px; } .text { width: 100px; text-align: center; // margin: 3px; line-height: 21px; span:nth-child(1) { width: 100%; display: block; font-size: 13px; } span:nth-child(2) { width: 100%; display: block; color: #00ccff; font-size: 14px; } } } .rightData1 { margin-left: 9px; margin-top: 10px; } .rightData2 { margin-left: 35px; margin-top: 10px; } .rightData3 { margin-top: 17px; margin-left: 9px; } .rightData4 { margin-top: 17px; margin-left: 35px; } .rightData5 { margin-top: 8px; margin-left: 42px; } .textBox { width: 70%; height: 58px; // margin: 0 auto; overflow: hidden; position: absolute; text-align: left; color: #09b560; left: 20px; top: 20px; font-size: 15px; .text { width: 100%; position: absolute; bottom: 0; } .slide-enter-active, .slide-leave-active { transition: all 0.5s linear; } .slide-enter { transform: translateY(20px) scale(1); opacity: 1; } .slide-leave-to { transform: translateY(-20px) scale(0.8); opacity: 0; } } .leftEchartTitle { height: 30px; display: flex; line-height: 30px; margin-top: 10px; margin-left: 15px; position: absolute; .block1 { width: 17px; height: 8px; background: #2ec7c9; border-radius: 3px; margin-top: 11px; } span:nth-child(2) { color: #fff; font-size: 12px; margin: 0px 3px 0px 3px; } span:nth-child(3) { color: #2ec7c9; font-size: 14px; font-weight: 700; display: block; width: 41px; text-align: center; } span:nth-child(4) { font-size: 12px; color: #2ec7c9; } } .leftEchartTitle2 { right: 18px; .block1 { background: #b6a2de; } span:nth-child(3) { color: #b6a2de; // font-size: 15px; } } .leftEchartTitle3 { margin-top: 37px; .block1 { background: #5ab1ef; } span:nth-child(3) { color: #5ab1ef; // font-size: 15px; } } .leftEchartTitle4 { margin-top: 37px; right: 15px; .block1 { background: #ffb980; } span:nth-child(2) { width: 77px; } span:nth-child(3) { color: #ffb980; // font-size: 15px; } } .leftEchartTitle5 { margin-top: 64px; .block1 { background: #fc8452; } span:nth-child(3) { color: #fc8452; font-size: 15px; } } .bayHover { background-color: #0445b5; color: #fff !important; } .leftEchartTitle.xbNan { right: 20px; margin-top: 76px; .block1 { width: 10px; height: 10px; background: #008dec; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 12px; } span:nth-child(3) { color: #008dec; font-size: 15px; } span:nth-child(4) { font-size: 12px; color: #008dec; } } .leftEchartTitle.xbNv { right: 20px; margin-top: 135px; .block1 { width: 10px; height: 10px; background: #886eff; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 12px; } span:nth-child(3) { color: #886eff; font-size: 15px; } span:nth-child(4) { font-size: 12px; color: #886eff; } } .showDialog:hover { cursor: pointer; } .bajgxt-home { /deep/.dialog { z-index: 10000000 !important; .el-table { top: 0px !important; margin: 0px !important; width: 100% !important; height: calc(100% - 50px) !important; .el-table__header { background-color: #2d5cc8 !important; } .el-table__body-wrapper { height: calc(100% - 50px); overflow-x: hidden; overflow-y: auto; } } .el-pagination { color: #a2a5a5; } .btn-prev, .btn-next { background: transparent !important; } .el-dialog__body { padding: 10px 20px; height: calc(100% - 60px); .el-input { width: 50px !important; border-bottom: 1px solid #8a7b7b !important; } } } /deep/ .el-dialog { width: 80% !important; height: 77%; } } src/views/home/index_1600_900.scss
New file @@ -0,0 +1,698 @@ .bajgxt-home { height: 100%; width: 100%; background: url("../../../public/img/bajgxt/backimg.png") no-repeat; background-size: 100% 100%; .head-title { background: url("../../../public/img/bajgxt/title2.png") no-repeat; background-size: 100% 100%; width: 100%; height: 77px; text-align: center; // position: relative; span { font-family: "Arial Normal", "Arial", sans-serif; font-size: 36px; color: #ffffff; text-align: center; line-height: 77px; } img { position: absolute; margin-top: 22px; margin-left: 29%; } } .sub-title { float: right; color: #fff; margin-right: 52px; font-size: 18px; margin-top: -35px; cursor: pointer; &:hover { color: #90cef0; } } .content { margin: 5px 20px 20px 20px; height: calc(100% - 102px); width: calc(100% - 40px); display: flex; .left, .right { width: 27%; height: 100%; } .middle { width: calc(46% - 50px); height: 100%; margin: 0px 25px; position: relative; } } .leftimg { background: url("../../../public/img/bajgxt/left1.png") no-repeat; background-size: contain; width: 100%; height: 260px; } .echartClass_1600_900 { // height: 100%; width: 100%; height: calc(100% - 70px); } .left { .left1 { background: url("../../../public/img/bajgxt/left1.png") no-repeat; height: 60%; width: 100%; background-size: 100% 100%; position: relative; #left1Echart { @extend .echartClass_1600_900; height: calc(100% - 140px) !important; margin-top: 68px; } } .left2 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; height: calc(40% - 25px); width: 100%; background-size: 100% 100%; margin-top: 25px; position: relative; #left2Echart { @extend .echartClass_1600_900; } } } .right { .right1 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; background-size: 100% 100%; width: 100%; height: 28%; position: relative; #right1Echart { @extend .echartClass_1600_900; } } .right2 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; background-size: 100% 100%; width: 100%; height: 28%; margin-top: 30px; position: relative; #right2Echart { @extend .echartClass_1600_900; } } .right3 { background: url("../../../public/img/bajgxt/rightImg.png") no-repeat; height: calc(40% - 25px); width: 100%; background-size: 100% 100%; margin-top: 25px; #right3Echart { @extend .echartClass_1600_900; } } } .title-pane { display: inline-flex; height: 44px; img { width: 26px; height: 26px; margin: 12px 10px 0px 10px; } span { line-height: 54px; color: #fff; font-size: 17px; } } .title-pane1 { display: inline-flex; height: 33px; img { width: 26px; height: 26px; margin: 3.5px 10px 0px 10px; } span { line-height: 33px; color: #fff; font-size: 17px; } } .title-pane2 { display: inline-flex; height: 41px; img { width: 26px; height: 26px; margin: 8.5px 10px 0px 10px; } span { line-height: 50px; color: #fff; font-size: 17px; } } .middle { .mapimg { background: url("../../../public/img/bajgxt/u3.png") no-repeat; background-size: 100% 100%; height: 60%; width: 100%; #map { width: calc(100% - 40px); height: calc(100% - 40px); margin: 0px 20px; top: 20px; position: relative; } } .table { margin-top: 25px; height: calc(40% - 25px); width: 100%; background: url("../../../public/img/bajgxt/table.png") no-repeat; background-size: 100% 100%; position: relative; .table-title { background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat; background-size: 100% 100%; position: absolute; width: 267px; margin-top: -13px; height: 50px; margin-left: calc(50% - 135.5px); color: #fff; font-size: 20px; text-align: center; line-height: 54px; } .lefttop { background: url("../../../public/img/bajgxt/lefttop.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: -7px; top: -9px; } .leftbottom { background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: -7px; bottom: -7px; } .righttop { background: url("../../../public/img/bajgxt/righttop.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: calc(100% - 37px); top: -9px; } .rightbottom { background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat; background-size: 100% 100%; width: 44px; height: 56px; position: absolute; left: calc(100% - 37px); bottom: -7px; } } } .middle { .el-table { width: calc(100% - 40px); height: calc(100% - 65px); margin: 0px 20px 15px; top: 50px; } /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td { background: #031d4b !important; } /deep/ .el-table--enable-row-transition .el-table__body td, /deep/ .el-table th, .el-table tr { background: #03225b !important; } /deep/ .el-table .cell { color: #fff; text-align: center; } /deep/ .el-table td, .el-table th.is-leaf { border-bottom-color: transparent; } /deep/ .el-table__header th { border-bottom: 1px solid #031a38 !important; } /deep/.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #b0caf3; } } /deep/ .el-input__inner { height: 27px; color: #fff !important; font-size: 14px; background-color: transparent !important; border-color: transparent !important; border-radius: 2px; } /deep/ .el-input { width: 138px; } /deep/ .el-select { line-height: 42px; position: absolute; right: 14px; } /deep/ .el-input__icon { line-height: 43px; } /deep/ .el-select:hover .el-input__inner, /deep/ .el-select .el-input.is-focus .el-input__inner { border: none; } /deep/ .el-table, /deep/ .el-table__expanded-cell, /deep/ .el-table--border::after, /deep/ .el-table--group::after, /deep/ .el-table::before { background-color: transparent !important; } .card-text { height: 30px; padding: 8px 10px; color: #fff; font-size: 14px; text-align: center; span:nth-child(2) { color: red; font-size: 21px; margin: 0px 10px; font-weight: bold; } span:nth-child(4) { margin-left: 15px; } span:nth-child(5) { margin: 0px 10px; color: red; font-size: 20px; } } .right-content { height: calc(100% - 71px); width: calc(100% - 30px); padding: 15px; } .card-list { margin-top: 0px !important; margin: 0px 60px 12px 10px; display: flex; height: 50px; line-height: 50px; img:first-child { height: 50px; z-index: 22; } img:nth-child(2) { position: absolute; margin-left: 13px; width: 30px; height: 30px; margin-top: 9px; z-index: 22; } img:nth-child(3) { margin-left: -20px; } span:nth-child(4) { color: red; font-size: 26px; display: block; width: 71px; margin-left: -78px; text-align: center; } span:nth-child(5) { color: #7ff3f4; font-size: 17px; display: block; width: 129px; margin-left: 16px; } } .mapBtn, .mapBtn:nth-child(2), .mapBtn:nth-child(3) { position: absolute; z-index: 99; color: #fff; background: #014e84; margin-top: 38px; margin-left: calc(100% - 140px); border-radius: 11px; height: 43px; display: inline-flex; width: 107px; cursor: pointer; img { margin: 8px 3px 8px 5px; height: 28px; width: 30px; } .text { width: 100px; text-align: center; margin: 3px; span:nth-child(1) { width: 100%; display: block; font-size: 10px; } span:nth-child(2) { width: 100%; display: block; color: red; font-size: 17px; font-weight: bold; } } &:hover { box-shadow: 0px 0px 10px #7ff3f4; } } .mapBtn:nth-child(2) { margin-top: 100px; } .mapBtn:nth-child(3) { margin-top: 160px; } /deep/ .el-table__body-wrapper { overflow: auto; height: calc(100% - 50px); } } .left2-btn { height: 21px; width: 69px; background-color: #4478d0; color: #fff; font-size: 13px !important; font-weight: 700; line-height: 21px !important; text-align: center; position: absolute; cursor: pointer; } .left2-btn.btn1 { right: 106px; margin-top: 16px; } .left2-btn.btn2 { right: 25px; margin-top: 16px; } .left2-btn.date { right: 35px; margin-top: 0px; } .left2-btn.mounce { right: 35px; margin-top: 44px; } .left2-btn.all { right: 35px; margin-top: 87px; } .rightData { position: relative; color: #fff; background: #010945; border-radius: 11px; height: 50px; display: inline-flex; width: 142px; cursor: pointer; font-weight: 700; img { margin: 12px; height: 25px; width: 27px; } .text { width: 100px; text-align: center; // margin: 3px; line-height: 25px; span:nth-child(1) { width: 100%; display: block; font-size: 14px; } span:nth-child(2) { width: 100%; display: block; color: #00ccff; font-size: 15px; } } } .rightData1 { margin-left: 29px; margin-top: 0px; } .rightData2 { margin-left: 58px; margin-top: 0px; } .rightData3 { margin-top: 10px; margin-left: 29px; } .rightData4 { margin-top: 10px; margin-left: 58px; } .rightData5 { margin-top: 8px; margin-left: 42px; } .textBox { width: 70%; height: 58px; // margin: 0 auto; overflow: hidden; position: absolute; text-align: left; color: #09b560; left: 20px; top: 20px; font-size: 15px; .text { width: 100%; position: absolute; bottom: 0; } .slide-enter-active, .slide-leave-active { transition: all 0.5s linear; } .slide-enter { transform: translateY(20px) scale(1); opacity: 1; } .slide-leave-to { transform: translateY(-20px) scale(0.8); opacity: 0; } } .leftEchartTitle { height: 30px; display: flex; line-height: 30px; margin-top: 10px; margin-left: 18px; position: absolute; .block1 { width: 18px; height: 9px; background: #2ec7c9; border-radius: 3px; margin-top: 11px; } span:nth-child(2) { color: #fff; font-size: 13px; margin: 0px 10px 0px 3px; } span:nth-child(3) { color: #2ec7c9; font-size: 17px; font-weight: 700; display: block; width: 65px; text-align: center; } span:nth-child(4) { font-size: 13px; color: #2ec7c9; } } .leftEchartTitle2 { right: 18px; .block1 { background: #b6a2de; } span:nth-child(3) { color: #b6a2de; font-size: 15px; } } .leftEchartTitle3 { margin-top: 37px; .block1 { background: #5ab1ef; } span:nth-child(3) { color: #5ab1ef; font-size: 15px; } } .leftEchartTitle4 { margin-top: 37px; right: 18px; .block1 { background: #ffb980; } span:nth-child(2) { width: 77px; } span:nth-child(3) { color: #ffb980; font-size: 15px; } } .leftEchartTitle5 { margin-top: 64px; .block1 { background: #fc8452; } span:nth-child(3) { color: #fc8452; font-size: 15px; } } .bayHover { background-color: #0445b5; color: #fff !important; } .leftEchartTitle.xbNan { right: 47px; margin-top: 76px; .block1 { width: 10px; height: 10px; background: #008dec; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #008dec; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #008dec; } } .leftEchartTitle.xbNv { right: 47px; margin-top: 135px; .block1 { width: 10px; height: 10px; background: #886eff; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #886eff; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #886eff; } } .showDialog:hover { cursor: pointer; } .bajgxt-home { /deep/.dialog { z-index: 10000000 !important; .el-table { top: 0px !important; margin: 0px !important; width: 100% !important; height: calc(100% - 50px) !important; .el-table__header { background-color: #2d5cc8 !important; } .el-table__body-wrapper { height: calc(100% - 50px); overflow-x: hidden; overflow-y: auto; } } .el-pagination { color: #a2a5a5; } .btn-prev, .btn-next { background: transparent !important; } .el-dialog__body { padding: 10px 20px; height: calc(100% - 60px); .el-input { width: 50px !important; border-bottom: 1px solid #8a7b7b !important; } } } /deep/ .el-dialog { width: 80% !important; height: 77%; } } src/views/securityUnitOperation/economicAnalysis.vue
@@ -325,6 +325,57 @@ }; </script> <style lang="scss" scoped> @media screen and (max-width: 1280px) { .box-card { font-size: 15px; width: 128px; background: #00aaf1; height: 117px; text-align: center; margin-right: 28px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 36px; span:nth-child(2) { color: #06ffff; font-size: 31px; } } .col-content { margin-top: 39px !important; } } // 适配分辨率1600*900 @media screen and (min-width: 1281px) and (max-width: 1600px) { .box-card { font-size: 15px; width: 128px; background: #00aaf1; height: 117px; text-align: center; margin-right: 66px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 36px; span:nth-child(2) { color: #06ffff; font-size: 31px; } } } @media screen and(min-width:1601px) and (max-width: 1920px) { .box-card { width: 150px; background: #00aaf1; height: 135px; text-align: center; margin-right: 66px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 40px; span:nth-child(2) { color: #06ffff; font-size: 34px; } } } .page1 { height: 100%; width: 100%; @@ -362,23 +413,11 @@ font-weight: 600; } } .box-card { width: 150px; background: #00aaf1; height: 135px; text-align: center; margin-right: 66px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 40px; } .box-card span { display: block; width: 100%; color: #fff; } .box-card span:nth-child(2) { color: #06ffff; font-size: 34px; } .rowTitle { height: 40px; src/views/securityUnitOperation/operationAnalysis.vue
@@ -414,6 +414,271 @@ }; </script> <style lang="scss" scoped> @media screen and (max-width: 1280px) { .box-card { font-size: 15px; width: 128px; background: #00aaf1; height: 117px; text-align: center; margin-right: 28px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 36px; span:nth-child(2) { color: #06ffff; font-size: 31px; } } .col-content { margin-top: 39px !important; } .leftEchartTitle.qing { right: 10px; margin-top: 42px; .block1 { background: #73c0de; margin-top: 11px; width: 10px; height: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 12px; margin: 0px 3px 0px 3px; } span:nth-child(3) { color: #73c0de; font-size: 15px; width: 45px; } span:nth-child(4) { font-size: 12px; color: #73c0de; } } .leftEchartTitle.zhong { right: 10px; margin-top: 83px; .block1 { width: 10px; height: 10px; border-radius: 100%; background: #fac858; margin-top: 11px; } span:nth-child(2) { color: #fff; font-size: 12px; margin: 0px 3px 0px 3px; } span:nth-child(3) { color: #fac858; font-size: 15px; width: 45px; } span:nth-child(4) { font-size: 12px; color: #fac858; } } .leftEchartTitle.lao { right: 10px; margin-top: 125px; .block1 { width: 10px; height: 10px; border-radius: 100%; background: #91cc75; margin-top: 11px; } span:nth-child(2) { color: #fff; font-size: 12px; margin: 0px 3px 0px 3px; } span:nth-child(3) { color: #91cc75; font-size: 15px; width: 45px; } span:nth-child(4) { font-size: 12px; color: #91cc75; } } } // 适配分辨率1600*900 @media screen and (min-width: 1281px)and (max-width: 1600px) { .box-card { font-size: 15px; width: 128px; background: #00aaf1; height: 117px; text-align: center; margin-right: 66px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 36px; span:nth-child(2) { color: #06ffff; font-size: 31px; } } .leftEchartTitle.qing { right: 37px; margin-top: 42px; .block1 { width: 10px; height: 10px; background: #73c0de; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #73c0de; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #73c0de; } } .leftEchartTitle.zhong { right: 37px; margin-top: 83px; .block1 { width: 10px; height: 10px; background: #fac858; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #fac858; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #fac858; } } .leftEchartTitle.lao { right: 37px; margin-top: 125px; .block1 { width: 10px; height: 10px; background: #91cc75; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #91cc75; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #91cc75; } } } @media screen and (min-width: 1601px)and (max-width: 1920px) { .box-card { width: 150px; background: #00aaf1; height: 135px; text-align: center; margin-right: 66px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 40px; span:nth-child(2) { color: #06ffff; font-size: 34px; } } .leftEchartTitle.qing { right: 37px; margin-top: 42px; .block1 { width: 10px; height: 10px; background: #73c0de; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #73c0de; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #73c0de; } } .leftEchartTitle.zhong { right: 37px; margin-top: 83px; .block1 { width: 10px; height: 10px; background: #fac858; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #fac858; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #fac858; } } .leftEchartTitle.lao { right: 37px; margin-top: 125px; .block1 { width: 10px; height: 10px; background: #91cc75; margin-top: 10px; border-radius: 100%; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #91cc75; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #91cc75; } } } .page1 { height: 100%; width: 100%; @@ -452,23 +717,11 @@ font-weight: 600; } } .box-card { width: 150px; background: #00aaf1; height: 135px; text-align: center; margin-right: 66px; box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); line-height: 40px; } .box-card span { display: block; width: 100%; color: #fff; } .box-card span:nth-child(2) { color: #06ffff; font-size: 34px; } .rowTitle { height: 40px; @@ -540,72 +793,6 @@ span:nth-child(4) { font-size: 13px; color: #2ec7c9; } } .leftEchartTitle.qing { right: 37px; margin-top: 42px; .block1 { width: 30px; height: 15px; background: #73c0de; margin-top: 7px; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #73c0de; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #73c0de; } } .leftEchartTitle.zhong { right: 37px; margin-top: 83px; .block1 { width: 30px; height: 15px; background: #fac858; margin-top: 7px; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #fac858; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #fac858; } } .leftEchartTitle.lao { right: 37px; margin-top: 125px; .block1 { width: 30px; height: 15px; background: #91cc75; margin-top: 7px; } span:nth-child(2) { color: #fff; font-size: 13px; } span:nth-child(3) { color: #91cc75; font-size: 17px; } span:nth-child(4) { font-size: 13px; color: #91cc75; } } </style> vue.config.js
@@ -30,9 +30,9 @@ // target: 'http://192.168.0.109:1', //远程演示服务地址,可用于直接启动项目 // target: 'http://2h3f861221.wicp.vip:58646', // target: 'http://s16s652780.51mypc.cn/api', target: 'http://s16s652780.51mypc.cn/api', // target: 'http://192.168.0.114:82', target: 'http://192.168.0.108:82', // target: 'http://192.168.0.108:82', // target: 'http://s16s652780.51mypc.cn/api', // 服务器使用 // target: 'http://localhost:82',
