diff --git a/ruoyi-ui/src/assets/images/login/139.png b/ruoyi-ui/src/assets/images/login/139.png
new file mode 100644
index 00000000..edd626e4
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/139.png differ
diff --git a/ruoyi-ui/src/assets/images/login/login-background.png b/ruoyi-ui/src/assets/images/login/login-background.png
new file mode 100644
index 00000000..26a364dc
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/login-background.png differ
diff --git a/ruoyi-ui/src/assets/images/login/logo.png b/ruoyi-ui/src/assets/images/login/logo.png
new file mode 100644
index 00000000..bb77139b
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/logo.png differ
diff --git a/ruoyi-ui/src/assets/images/login/password.png b/ruoyi-ui/src/assets/images/login/password.png
new file mode 100644
index 00000000..8231760a
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/password.png differ
diff --git a/ruoyi-ui/src/assets/images/login/user.png b/ruoyi-ui/src/assets/images/login/user.png
new file mode 100644
index 00000000..9c5c54d9
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/user.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
index 97dcbe14..5c3ed94a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
@@ -14,7 +14,7 @@ export default {
getProps() {
return {
// total
- layout: "prev, pager, next, sizes, jumper,total",
+ layout: "prev, pager, next, sizes, jumper, total",
...this.$attrs,
small: true,
};
@@ -109,5 +109,8 @@ export default {
margin-right: 6px;
}
}
+ ::v-deep .el-pagination__total {
+ margin-left: 10px;
+ }
}
</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.jpg b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.jpg
deleted file mode 100644
index 67814fe5..00000000
Binary files a/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.jpg and /dev/null differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.png b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.png
new file mode 100644
index 00000000..fa12035a
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue
index 4f7ea6e3..2ac7dcd5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue
@@ -1,17 +1,24 @@
<template>
- <div class='HomeFrame'>
- <ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
- popper-class="global-input-search-popover">
- <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
- <img src="@screen/images/home-Frame/Frame.svg">
+ <div class="HomeFrame">
+ <ElPopover
+ trigger="manual"
+ :value="activeIcon === 'Frame'"
+ :visibleArrow="false"
+ placement="left"
+ popper-class="global-input-search-popover"
+ >
+ <Button
+ :class="['btn', { 'btn-active': activeIcon }]"
+ slot="reference"
+ @click.native="handleClick('Frame')"
+ >
+ <img src="@screen/images/home-Frame/Frame.svg" />
</Button>
<div class="body">
- <div class="title">
- 图标含义
- </div>
+ <div class="title">图标含义</div>
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
- <img class="image" src="@screen/images/home-Frame/logoMean.jpg">
+ <img class="image" src="@screen/images/home-Frame/logoMean.png" />
<!-- <div class="footer">
</div> -->
</div>
@@ -20,21 +27,21 @@
</template>
<script>
-import Button from '@screen/components/Buttons/Button.vue';
-import Form from '@screen/components/FormConfig';
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
-import { merge, cloneDeep } from "lodash"
+import { merge, cloneDeep } from "lodash";
export default {
- name: 'HomeFrame',
+ name: "HomeFrame",
components: {
Button,
- Form
+ Form,
},
data() {
return {
- activeIcon: null
- }
+ activeIcon: null,
+ };
},
methods: {
handleClick(type) {
@@ -45,43 +52,45 @@ export default {
// this.filterData = data;
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
},
- }
-}
+ },
+};
</script>
-<style lang='scss'>
+<style lang="scss">
div.el-popper.global-input-search-popover {
background: rgba(6, 66, 88, 0.8);
border: 1px solid rgba(42, 217, 253, 0.6);
position: relative;
padding-top: 36px;
transform: translateY(24px);
- margin-top: 3vh;
+ margin-top: 6vh;
.body {
.title {
- background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
+ background: linear-gradient(
+ 90deg,
+ #237e9b 0%,
+ rgba(23, 145, 184, 0) 100%
+ );
padding: 3px 9px;
position: absolute;
top: 0;
left: 0;
width: 100%;
-
}
}
}
</style>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
.image {
- width: 45vw;
+ width: 60vw;
height: 65vh;
}
.HomeFrame {
-
.btn {
padding: 9px;
- background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+ background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
border-radius: 4px;
overflow: hidden;
height: unset;
@@ -89,7 +98,7 @@ div.el-popper.global-input-search-popover {
}
.btn-active {
- background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+ background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
}
}
</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue
index 8d6451a1..2e422e03 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue
@@ -42,6 +42,12 @@ import EventDispatchDialog from "./EventDispatchDialog/index";
import { searchFormList } from './data';
import request from "@/utils/request";
+const directionMapping = {
+ '1': '菏泽方向',
+ '2': '双向',
+ '3': '济南方向'
+}
+
export default {
name: 'RoadNetworkMonitoring',
components: {
@@ -81,8 +87,11 @@ export default {
params: this.searchData,
}).then((result) => {
if (result.code != 200) return Message.error(result?.msg);
- this.data = result.rows;
this.total = result.total;
+ result.rows.forEach(it => {
+ it.stringDirection = directionMapping[it.direction] || it.direction;
+ })
+ this.data = result.rows;
});
},
onSizeChange(pageSize) {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
index 19d2210e..3d4d0d68 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
@@ -1,13 +1,13 @@
<template>
<Dialog v-model="modelVisible" title="事件详情">
- <div class="EventDetail" :style="{ height: (activeName == '-1' || activeName == '0') ? '380px' : '768px'}">
+ <div class="EventDetail" :style="{ height: (activeName == '-1' || activeName == '0') ? '380px' : '768px' }">
<Form :formList="formList" :dFormData="formData" label-width="100px" />
<div class="video-pic">
- <Video style="height: 100%;" :showHeader="activeName != '-1'"/>
+ <Video style="height: 100%;" :showHeader="activeName != '-1'" />
<Video v-if="activeName != '-1'" style="height: 100%;" />
- <Carousel v-else style="flex: 1" :pictures="formData.pictures"/>
+ <Carousel v-else style="flex: 1" :pictures="formData.pictures" />
</div>
<TimeLine1 v-if="activeName == '1' || activeName == '2'" :data="timeLine1List" />
@@ -15,9 +15,10 @@
</div>
<template #footer>
- <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px;" @click.native="modelVisible = false">误报</Button>
+ <Button style="padding: 0 24px;" @click.native="onDelete">误报</Button>
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false">取消</Button>
- <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px;" @click.native="modelVisible = false">确认</Button>
+ <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px;"
+ @click.native="modelVisible = false">确认</Button>
</template>
</Dialog>
</template>
@@ -33,6 +34,7 @@ import Video from "@screen/components/Video";
import Carousel from "./Carousel/index.vue"
import Button from '@screen/components/Buttons/Button.vue';
import request from "@/utils/request";
+import { Message } from "element-ui";
var moment = require("moment");
export default {
@@ -92,7 +94,7 @@ export default {
},
methods: {
getProcess() {
- if(this.activeName == '-1' || this.activeName == '0'){
+ if (this.activeName == '-1' || this.activeName == '0') {
this.timeLine1List = [];
this.timeLine2List = [];
return;
@@ -144,6 +146,31 @@ export default {
})
+ },
+ onDelete() {
+ if (this.formData.id) {
+ this.$confirm('确定误报吗？', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then(() => {
+ // this.modelVisible = false;
+ // this.$emit('queryData', true);
+ // return;
+ request({
+ url: `/business/warning/delete`,
+ method: "post",
+ data: { id: this.formData.id }
+ }).then(result => {
+ if (result.code == 200) Message.success('成功！');
+ else Message.error(result?.msg);
+ this.modelVisible = false;
+ this.$emit('queryData', true);
+ })
+ })
+
+ }
+
}
}
}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
index 5f63793a..bde66452 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
@@ -367,6 +367,9 @@ export const vehicleCondition = (keyPrefix = "dcEventAccident") => ({
text: "辆",
},
type: "inputNumber",
+ options: {
+ min: 0,
+ },
key: `${keyPrefix}.smallCar`,
},
{
@@ -376,6 +379,9 @@ export const vehicleCondition = (keyPrefix = "dcEventAccident") => ({
suffix: {
text: "辆",
},
+ options: {
+ min: 0,
+ },
type: "inputNumber",
key: `${keyPrefix}.trucks`,
},
@@ -387,6 +393,9 @@ export const vehicleCondition = (keyPrefix = "dcEventAccident") => ({
text: "辆",
},
type: "inputNumber",
+ options: {
+ min: 0,
+ },
key: `${keyPrefix}.buses`,
},
{
@@ -397,6 +406,9 @@ export const vehicleCondition = (keyPrefix = "dcEventAccident") => ({
text: "辆",
},
type: "inputNumber",
+ options: {
+ min: 0,
+ },
key: `${keyPrefix}.tankers`,
},
],
@@ -630,23 +642,23 @@ export const trafficAccidentType = {
options: {
options: [
{
- value: "1",
+ value: "1-1",
label: "追尾",
},
{
- value: "2",
+ value: "1-2",
label: "侧翻",
},
{
- value: "3",
+ value: "1-3",
label: "撞护栏",
},
{
- value: "4",
+ value: "1-4",
label: "自然",
},
{
- value: "5",
+ value: "1-5",
label: "其他事故",
},
],
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
index 2f1098d2..0516f4e2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
@@ -63,10 +63,7 @@ export const tabConfigList = [
...PresetFormItems.callPolicePersonPhone,
key: "dcEventAccident.reporterPhoneNumber",
},
- {
- ...PresetFormItems.trafficAccidentType,
- key: "dcEventAccident.accidentType",
- },
+ PresetFormItems.trafficAccidentType,
PresetFormItems.eventLevel,
{
...PresetFormItems.locationMode,
@@ -422,7 +419,14 @@ export const tabConfigList = [
},
},
PresetFormItems.direction,
- PresetFormItems.station,
+ { ...PresetFormItems.station,
+ visible: (data) => {
+ if (data.dcEventVehicleAccident && data.dcEventVehicleAccident.locationType != 1) {
+ return false;
+ }
+ return true;
+ },
+ },
PresetFormItems.eventHappenTime,
PresetFormItems.aEstimatedReleaseTime,
{
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
index a5423158..775dc18d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
@@ -83,6 +83,10 @@ export const gjSearchFormList = [
key: "6",
label: "非机预警",
},
+ {
+ key: "7",
+ label: "气象监测器",
+ },
],
},
},
@@ -145,17 +149,17 @@ export const gzSearchFormList = [
options: {
options: [
{
- key: "济南方向",
- label: "济南方向",
- },
- {
- key: "菏泽方向",
+ key: "1",
label: "菏泽方向",
},
{
- key: "双向",
- label: "双向",
+ key: "3",
+ label: "济南方向",
},
+ // {
+ // key: "双向",
+ // label: "双向",
+ // },
],
},
},
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
index 6a44b764..3fe4e4c2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
@@ -5,7 +5,7 @@
<!-- 搜索栏 -->
<div class="filter">
<div>
- <ButtonGradient @click="onAddNew">
+ <ButtonGradient @click="onAddNew" v-if="activeName != '1' && activeName != '2'">
<template #prefix>
<img src="./images/insert.svg" />
</template>
@@ -43,7 +43,7 @@
</div>
<!-- "详情"弹出框 -->
- <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName" @update:value="handleClose" />
+ <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName" @update:value="handleClose" @queryData="queryData"/>
<!-- "新增"弹出框 -->
<FormEvent :visible="isShowAddNew" @close="onCloseAddNew" />
</div>
@@ -59,6 +59,7 @@ import EventDetailDialog from "./EventDetailDialog/index";
import FormEvent from "./FormEvent/index";
import { tabMap, gjSearchFormList, gzSearchFormList } from "./data";
import request from "@/utils/request";
+import { Message } from "element-ui";
import { Loading } from 'element-ui';
function getRandomData(min = 1, max = 15) {
@@ -81,6 +82,7 @@ const warningSourceMapping = {
4: '护栏碰撞',
5: '扫码报警',
6: '非机预警',
+ 7: '气象监测器'
}
const directionMapping = {
'1': '上行',
@@ -179,6 +181,9 @@ export default {
lastBtnText: text,
};
},
+ queryData(flag){
+ this.getData()
+ },
getData() {
if (this.activeName === '-1') {
request({
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
index bf55ef05..322bd9bd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
@@ -24,7 +24,7 @@ var options = {
grid: {
top: "15%", //上边距
right: "0", //右边距
- left: "10px", //左边距
+ left: "15px", //左边距
bottom: "10%", //下边距
containLabel: true,
},
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
index d605840d..e5324981 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
@@ -27,7 +27,7 @@ export const searchFormList = [
{
label: "时间范围:",
key: "time",
- required: true,
+ // required: true,
type: "datePicker",
options: {
format:"yyyy-MM-dd",
@@ -35,9 +35,9 @@ export const searchFormList = [
},
},
{
- label: "型号类型:",
+ label: "设备类型:",
key: "type",
- required: true,
+ // required: true,
type: "select",
options: {
options: [
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
index edffb3de..61c85463 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
@@ -39,7 +39,7 @@ var options = {
},
},
grid: {
- left: "1%",
+ left: "10px",
right: "0%",
top: "16%",
bottom: "5%",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
index 9d533bae..879158ae 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
@@ -1,52 +1,55 @@
<template>
- <div class='congestion'>
+ <div class="congestion">
<WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
<div class="board">
- <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
- <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="daytotal"></div>
+ <Empty
+ v-show="!dataList || dataList.length <= 0"
+ text="暂无数据..."
+ ></Empty>
+ <div
+ v-show="dataList && dataList.length > 0"
+ style="width: 450px"
+ class="charts keep-ratio"
+ id="daytotal"
+ ></div>
</div>
</div>
</template>
-
-<script>
-import WgtTitle from '../../../widgets/title'
+<script>
+import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
-import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
+import { getDailyCumulative } from "../../../../../../../api/event/perceiveEvent";
import moment from "moment";
export default {
- name: 'RailWayDay',
+ name: "RailWayDay",
components: {
- WgtTitle
+ WgtTitle,
},
data() {
return {
- dataList: []
- }
- },
-
- created() {
-
+ dataList: [],
+ };
},
- methods: {
- },
+ created() {},
+ methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
- var myChart = echarts.init(document.getElementById('daytotal'));
+ var myChart = echarts.init(document.getElementById("daytotal"));
- getDailyCumulative().then(res => {
+ getDailyCumulative().then((res) => {
if (res.code == 200) {
- this.dataList = res.data
+ this.dataList = res.data;
let data = res.data;
let timer = [];
let number = [];
data.forEach((it) => {
- timer.push(moment(it.time).format('HH:mm'));
+ timer.push(moment(it.time).format("HH:mm"));
number.push(it.number);
});
@@ -55,32 +58,34 @@ export default {
myChart.setOption(chartsStatistics);
}
-
});
-
});
});
},
-}
+};
</script>
-
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
.congestion {
width: 100%;
.board {
height: 200px;
width: 100%;
- padding: 0px 20px;
+ // padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+ border-image: linear-gradient(
+ 360deg,
+ rgba(55, 231, 255, 0.3),
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: space-between;
align-items: center;
-
}
}
@@ -89,4 +94,3 @@ export default {
width: 100%;
}
</style>
-
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
index 221623b2..86fa33f2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
@@ -51,8 +51,8 @@ let chartData = [],
"#50EED3",
"#5DEF9E",
"#29B3FF",
- "#FB5C38",
- "#FB5C38",
+ "#29A1AF",
+ "#2D5CA8",
"#FCBB14",
];
for (let i = 0; i < data.length; i++) {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
index b18cc633..59bddcab 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
@@ -54,7 +54,7 @@ let options = {
name: "（起）",
nameTextStyle: {
color: "#fff",
- fomtSize: 10,
+ fontSize: 10,
align: "right",
},
min: 0,
@@ -191,6 +191,9 @@ let options = {
zlevel: 10,
data: [],
animationDelay: 500,
+ tooltip: {
+ show: false,
+ },
},
],
};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index 9abb5d86..60366b91 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -220,8 +220,8 @@ export default {
dateTime: "2024",
direction: "1",
dataList: [],
- selectIndex: 3,
- selectId: 3,
+ selectIndex: 1,
+ selectId: 1,
type: "year",
chart1List: [],
chart2List: [],
@@ -400,30 +400,24 @@ export default {
data.forEach((it) => {
if (it.warningType == 1) {
types.push("交通拥堵");
- }
- if (it.warningType == 2) {
+ } else if (it.warningType == 2) {
types.push("行人");
- }
- if (it.warningType == 3) {
+ } else if (it.warningType == 3) {
types.push("非机动车");
- }
- if (it.warningType == 4) {
+ } else if (it.warningType == 4) {
types.push("停车");
- }
- if (it.warningType == 5) {
+ } else if (it.warningType == 5) {
types.push("倒车/逆行");
- }
- if (it.warningType == 6) {
+ } else if (it.warningType == 6) {
types.push("烟火");
- }
- if (it.warningType == 7) {
+ } else if (it.warningType == 7) {
types.push("撒落物");
- }
- if (it.warningType == 8) {
+ } else if (it.warningType == 8) {
types.push("异常天气");
- }
- if (it.warningType == 9) {
+ } else if (it.warningType == 9) {
types.push("护栏碰撞");
+ } else {
+ types.push("其他");
}
numbers.push({
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
index 6ea73b0c..7bfe5e2e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
@@ -1,25 +1,4 @@
-let data = [
- {
- average: 30,
- name: "视频识别",
- percent: 0.2,
- },
- {
- average: 25,
- name: "雷达识别",
- percent: 0.25,
- },
- {
- average: 15,
- name: "锥桶",
- percent: 0.3,
- },
- {
- average: 30,
- name: "护栏碰撞",
- percent: 0.25,
- },
-];
+let data = [];
window.mainData = data;
@@ -115,7 +94,7 @@ var options = {
right: 0,
orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状
- itemGap: 15, // 设置legend的间距
+ itemGap: 10, // 设置legend的间距
itemWidth: 8, // 设置宽度
// itemHeight: 15, // 设置高度
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
index 4ec2128f..5de3c418 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
@@ -86,7 +86,7 @@ export default {
{
average: 0,
name: "护栏碰撞",
- percent: 0.2,
+ percent: 0.1,
},
{
average: 0,
@@ -98,6 +98,11 @@ export default {
name: "非机预警",
percent: 0.1,
},
+ {
+ average: 0,
+ name: "气象监测器",
+ percent: 0.1,
+ },
];
data.forEach((it) => {
if (it.warningSource == 1) {
@@ -118,6 +123,9 @@ export default {
if (it.warningSource == 6) {
chartData[5].average += it.number;
}
+ if (it.warningSource == 7) {
+ chartData[6].average += it.number;
+ }
// total ++;
// drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
});
@@ -148,7 +156,7 @@ export default {
});
}
window.mainData = mainData;
- console.log("mainData", mainData);
+ // console.log("mainData", mainData);
chartsStatistics.title.text = `{tb|${total}}`;
chartsStatistics.title.subtext = "{zb|总数}";
@@ -208,12 +216,13 @@ export default {
let gr = context.createLinearGradient(230, 0, 360, 0);
gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.3)");
- drawRoundRect(context, 214, 15, 134, 21, 12, gr);
- drawRoundRect(context, 214, 42, 134, 21, 12, gr);
- drawRoundRect(context, 214, 69, 134, 21, 12, gr);
- drawRoundRect(context, 214, 96, 134, 21, 12, gr);
- drawRoundRect(context, 214, 123, 134, 21, 12, gr);
- drawRoundRect(context, 214, 150, 134, 21, 12, gr);
+ drawRoundRect(context, 206, 16, 134, 18, 12, gr);
+ drawRoundRect(context, 206, 39, 134, 18, 12, gr);
+ drawRoundRect(context, 206, 61, 134, 18, 12, gr);
+ drawRoundRect(context, 206, 83, 134, 18, 12, gr);
+ drawRoundRect(context, 206, 105, 134, 18, 12, gr);
+ drawRoundRect(context, 206, 127, 134, 18, 12, gr);
+ drawRoundRect(context, 206, 149, 134, 18, 12, gr);
context.lineWidth = 1; // 设置线段宽度
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
index 9a758274..ec5c19d6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
@@ -1,42 +1,44 @@
<template>
- <div class='congestion'>
+ <div class="congestion">
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
<div class="board">
- <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
- <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="monthStatistics">
- </div>
+ <Empty
+ v-show="!dataList || dataList.length <= 0"
+ text="暂无数据..."
+ ></Empty>
+ <div
+ v-show="dataList && dataList.length > 0"
+ style="width: 450px"
+ class="charts keep-ratio"
+ id="monthStatistics"
+ ></div>
</div>
</div>
</template>
-
-<script>
-import WgtTitle from '../../../widgets/title'
+<script>
+import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
-import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent';
+import { getDailyCumulativeMonth } from "../../../../../../../api/event/perceiveEvent";
export default {
- name: 'MonthStatistics',
+ name: "MonthStatistics",
components: {
- WgtTitle
+ WgtTitle,
},
data() {
return {
- dataList: []
- }
- },
-
- created() {
-
+ dataList: [],
+ };
},
- methods: {
- },
+ created() {},
+ methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
- var myChart = echarts.init(document.getElementById('monthStatistics'));
+ var myChart = echarts.init(document.getElementById("monthStatistics"));
getDailyCumulativeMonth().then((res) => {
console.log(res);
if (res.code == 200) {
@@ -64,31 +66,34 @@ export default {
myChart.setOption(chartsStatistics);
}
-
});
});
});
},
-}
+};
</script>
-
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
.congestion {
width: 100%;
.board {
height: 200px;
width: 100%;
- padding: 0px 20px;
+ // padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+ border-image: linear-gradient(
+ 360deg,
+ rgba(55, 231, 255, 0.3),
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: space-between;
align-items: center;
-
}
}
@@ -97,4 +102,3 @@ export default {
width: 100%;
}
</style>
-
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
index aac78436..74e7399f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
@@ -6,10 +6,16 @@
<div class="checked">路段车流量Top10</div>
<div>断面交通量Top10</div>
</div> -->
- <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
- <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio"
- id="situationEchartBox"></div>
-
+ <Empty
+ v-show="!dataList || dataList.length <= 0"
+ text="暂无数据..."
+ ></Empty>
+ <div
+ v-show="dataList && dataList.length > 0"
+ style="width: 450px"
+ class="charts keep-ratio"
+ id="situationEchartBox"
+ ></div>
</div>
</div>
</template>
@@ -27,7 +33,7 @@ export default {
},
data() {
return {
- dataList: []
+ dataList: [],
};
},
@@ -41,7 +47,7 @@ export default {
getSectionPerceivedList().then((res) => {
console.log(res);
if (res.code == 200) {
- this.dataList = res.data
+ this.dataList = res.data;
let data = res.data;
let texts = [];
@@ -60,7 +66,7 @@ export default {
});
});
},
- created() { },
+ created() {},
methods: {},
};
</script>
@@ -77,9 +83,12 @@ export default {
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg,
+ border-image: linear-gradient(
+ 360deg,
rgba(55, 231, 255, 0.3),
- rgba(55, 231, 255, 0)) 1 1;
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: flex-start;
align-items: center;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
index 32496833..2de31be1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
@@ -58,7 +58,7 @@ var options = {
grid: {
top: "15%", //上边距
right: "0", //右边距
- left: "0", //左边距
+ left: "10px", //左边距
bottom: "0%", //下边距
containLabel: true,
},
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
index 02b0c23b..8e043c37 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
@@ -1,42 +1,44 @@
<template>
- <div class='congestion'>
+ <div class="congestion">
<WgtTitle :title="'路段日感知事件'"></WgtTitle>
<div class="board">
- <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
- <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="railwayDay">
- </div>
+ <Empty
+ v-show="!dataList || dataList.length <= 0"
+ text="暂无数据..."
+ ></Empty>
+ <div
+ v-show="dataList && dataList.length > 0"
+ style="width: 450px"
+ class="charts keep-ratio"
+ id="railwayDay"
+ ></div>
</div>
</div>
</template>
<script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
-import { getSectionPerceivedNumber } from '../../../../../../../api/event/perceiveEvent';
+import { getSectionPerceivedNumber } from "../../../../../../../api/event/perceiveEvent";
export default {
- name: 'RailWayDay',
+ name: "RailWayDay",
components: {
- WgtTitle
+ WgtTitle,
},
data() {
return {
- dataList: []
- }
+ dataList: [],
+ };
},
- created() {
-
- },
- methods: {
-
- },
+ created() {},
+ methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
- var myChart = echarts.init(document.getElementById('railwayDay'));
+ var myChart = echarts.init(document.getElementById("railwayDay"));
getSectionPerceivedNumber().then((res) => {
if (res.code == 200) {
this.dataList = res.data;
@@ -44,9 +46,11 @@ export default {
if (data.length > 0) {
let texts = [];
let datas = [];
- const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
+ const maxObject = data.reduce((prev, current) =>
+ current.number > prev.number ? current : prev
+ );
- data.forEach(it => {
+ data.forEach((it) => {
texts.push(it.sectionName);
if (it.number == maxObject.number) {
@@ -54,62 +58,69 @@ export default {
value: it.number,
itemStyle: {
color: {
- type: 'linear',
+ type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
- colorStops: [{
- offset: 0, color: '#0469FF' // 0% 处的颜色
- }, {
- offset: 1, color: '#699CFF' // 100% 处的颜色
- }],
- global: false // 缺省为 false
+ colorStops: [
+ {
+ offset: 0,
+ color: "#0469FF", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#699CFF", // 100% 处的颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
- borderRadius: 6
+ borderRadius: 6,
},
});
} else {
datas.push({
value: it.number,
itemStyle: {
- borderRadius: 6
+ borderRadius: 6,
},
});
}
-
});
chartsStatistics.xAxis.data = texts;
chartsStatistics.series[0].data = datas;
}
myChart.setOption(chartsStatistics);
-
}
- })
+ });
});
});
},
-}
+};
</script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
.congestion {
width: 100%;
.board {
height: 200px;
width: 100%;
- padding: 0px 20px;
+ // padding: 0px 20px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+ border-image: linear-gradient(
+ 360deg,
+ rgba(55, 231, 255, 0.3),
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: space-between;
align-items: center;
-
}
}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
index 7fe27863..95cb7750 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
@@ -21,6 +21,8 @@ window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
var options = {
color: colorList,
legend: {
+ width: "500px",
+ height: "160px",
orient: "vertical",
top: "10",
icon: "circle",
@@ -54,17 +56,25 @@ var options = {
},
formatter: (params) => {
let count = 0;
+ console.log("typeAnalysisData", typeAnalysisData);
typeAnalysisData.forEach((it) => {
count += it.value;
});
+ console.log("count", count);
let obj = typeAnalysisData.filter((it) => {
return it.name == params;
});
- // console.log(obj);
return `{ast|${obj[0].name}} {bst|${
Math.round((obj[0].value / count) * 100) || 0
}%} {cst|${obj[0].value}起}`;
},
+ pageIconColor: "#fff",
+ pageIconSize: 10,
+ pageTextStyle: {
+ color: "#fff",
+ },
+ type: "scroll",
+ pageButtonPosition: "end",
// data: typeAnalysisData?.map(x => x.name),
},
tooltip: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
index a31445f2..206fcb26 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
@@ -1,179 +1,193 @@
<template>
- <div class='congestion'>
+ <div class="congestion">
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="board">
- <div class="charts keep-ratio " id="typeAnalysis"></div>
+ <div class="charts keep-ratio" id="typeAnalysis"></div>
</div>
</div>
</template>
<script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
-import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent';
-
+import { getWarningTypeDay } from "../../../../../../../api/event/perceiveEvent";
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
- // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
+ // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
ctx.beginPath();
ctx.fillStyle = gr;
- ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+ ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
ctx.lineTo(width - radius + x, y);
- ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
+ ctx.arc(
+ width - radius + x,
+ radius + y,
+ radius,
+ (Math.PI * 3) / 2,
+ Math.PI * 2
+ );
ctx.lineTo(width + x, height + y - radius);
- ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
+ ctx.arc(
+ width - radius + x,
+ height - radius + y,
+ radius,
+ 0,
+ (Math.PI * 1) / 2
+ );
ctx.lineTo(radius + x, height + y);
- ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
+ ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
ctx.closePath();
//ctx.stroke();
- ctx.fill()
-}
-
+ ctx.fill();
+};
export default {
- name: 'TypeAnalysis',
+ name: "TypeAnalysis",
components: {
- WgtTitle
+ WgtTitle,
},
data() {
- return {
-
- }
- },
- created() {
-
- },
- methods: {
-
+ return {};
},
+ created() {},
+ methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
- var myChart = echarts.init(document.getElementById('typeAnalysis'));
+ var myChart = echarts.init(document.getElementById("typeAnalysis"));
-
- getWarningTypeDay().then(res => {
+ getWarningTypeDay().then((res) => {
console.log(res);
if (res.code == 200) {
let data = res.data;
- console.log("===================", data);
- typeAnalysisData = [];
- for (var i = 0; i < data.length; i++) {
- var it = data[i];
- if (it.warningType == 1) {
- typeAnalysisData.push({
- name: '交通拥堵',
- value: it.number
- });
- }
- if (it.warningType == 2) {
- typeAnalysisData.push({
- name: '行人',
- value: it.number
- });
- }
- if (it.warningType == 3) {
- typeAnalysisData.push({
- name: '非机动车',
- value: it.number
- });
- }
- if (it.warningType == 4) {
- typeAnalysisData.push({
- name: '停车',
- value: it.number
- });
- }
- if (it.warningType == 5) {
- typeAnalysisData.push({
- name: '倒车/逆行',
- value: it.number
- });
- }
- if (it.warningType == 6) {
- typeAnalysisData.push({
- name: '烟火',
- value: it.number
- });
- }
- if (it.warningType == 7) {
- typeAnalysisData.push({
- name: '撒落物',
- value: it.number
- });
- }
- if (it.warningType == 8) {
- typeAnalysisData.push({
- name: '异常天气',
- value: it.number
- });
- }
- if (it.warningType == 9) {
- typeAnalysisData.push({
- name: '护栏碰撞',
- value: it.number
- });
- }
-
- drawRoundRect(context, 250, 8 + i * 28, 120, 24, 12, gr)
- }
-
- chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name);
- chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => {
- return {
- ...item,
- label: {
- color: colorList[index]
+ console.log("===================22", data);
+ typeAnalysisData = [
+ {
+ name: "交通拥堵",
+ warningType: 1,
+ value: 0,
+ },
+ {
+ name: "行人",
+ warningType: 1,
+ value: 0,
+ },
+ {
+ name: "非机动车",
+ warningType: 3,
+ value: 0,
+ },
+ {
+ name: "停车",
+ warningType: 4,
+ value: 0,
+ },
+ {
+ name: "倒车/逆行",
+ warningType: 5,
+ value: 0,
+ },
+ {
+ name: "烟火",
+ warningType: 6,
+ value: 0,
+ },
+ {
+ name: "撒落物",
+ warningType: 7,
+ value: 0,
+ },
+ {
+ name: "异常天气",
+ warningType: 8,
+ value: 0,
+ },
+ {
+ name: "护栏碰撞",
+ warningType: 9,
+ value: 0,
+ },
+ {
+ name: "交通事故",
+ warningType: 10,
+ value: 0,
+ },
+ {
+ name: "车辆故障",
+ warningType: 11,
+ value: 0,
+ },
+ {
+ name: "其他",
+ warningType: 99,
+ value: 0,
+ },
+ ];
+ data.forEach((item, index) => {
+ typeAnalysisData.forEach((r) => {
+ if (item.warningType == r.warningType) {
+ r.value += item.number;
}
+ });
+ // drawRoundRect(context, 250, 8 + index * 28, 120, 24, 12, gr);
+ });
+
+ chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name);
+ chartsStatistics.series[0].data = typeAnalysisData.map(
+ (item, index) => {
+ return {
+ ...item,
+ label: {
+ color: colorList[index],
+ },
+ };
}
- })
- chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => {
- return {
- ...item,
- label: {
- color: colorList[index]
- }
+ );
+ chartsStatistics.series[1].data = typeAnalysisData.map(
+ (item, index) => {
+ return {
+ ...item,
+ label: {
+ color: colorList[index],
+ },
+ };
}
- })
+ );
}
myChart.setOption(chartsStatistics);
- })
+ });
const domMap = document.getElementById("typeAnalysis");
let parentDiv = domMap.firstChild;
// 创建canvas
- let canvas = document.createElement('canvas');
+ let canvas = document.createElement("canvas");
canvas.width = parentDiv.offsetWidth;
canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas);
- const context = canvas.getContext('2d');
+ const context = canvas.getContext("2d");
// 填充渐变颜色
var gr = context.createLinearGradient(230, 0, 360, 0);
// 颜色断点
- gr.addColorStop(1, 'rgba(92,197,255,0)');
- gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-
+ gr.addColorStop(1, "rgba(92,197,255,0)");
+ gr.addColorStop(0, "rgba(92,197,255,0.5)");
context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形
-
- // drawRoundRect(context, 260, 36, 120, 24, 12,gr)
- // drawRoundRect(context, 260, 64, 120, 24, 12,gr)
- // drawRoundRect(context, 260, 92, 120, 24, 12,gr)
- // drawRoundRect(context, 260, 120, 120, 24, 12,gr)
- // drawRoundRect(context, 260, 148, 120, 24, 12,gr)
+ drawRoundRect(context, 260, 6, 120, 24, 12, gr);
+ drawRoundRect(context, 260, 36, 120, 24, 12, gr);
+ drawRoundRect(context, 260, 64, 120, 24, 12, gr);
+ drawRoundRect(context, 260, 92, 120, 24, 12, gr);
+ drawRoundRect(context, 260, 120, 120, 24, 12, gr);
});
});
},
-}
+};
</script>
-
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
.congestion {
width: 100%;
@@ -181,15 +195,23 @@ export default {
height: 200px;
width: 100%;
padding: 0px 20px;
- background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #06425888 100%);
+ background: linear-gradient(
+ 180deg,
+ rgba(6, 66, 88, 0.2) 0%,
+ #06425888 100%
+ );
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
+ border-image: linear-gradient(
+ 360deg,
+ rgba(55, 231, 255, 0.1),
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: space-between;
align-items: center;
-
}
}
@@ -198,4 +220,3 @@ export default {
width: 100%;
}
</style>
-
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
index c4379cb6..4cd1a98d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class='TrafficFlow'>
+ <div class="TrafficFlow">
<section class="content">
<Railway class="content-l" />
<div class="content-m">
@@ -10,7 +10,7 @@
<EventSource class="content-m-t" />
<DailyDisposal class="content-m-t" />
</div>
- <div class="content-m" style="margin-right: 0;">
+ <div class="content-m" style="margin-right: 0">
<MonthStatistice class="content-m-t" />
<TypeAnalysis class="content-m-t" />
</div>
@@ -20,19 +20,19 @@
</section>
</div>
</template>
-
+
<script>
-import Railway from './components/railway/index.vue';
-import RailWayDay from './components/railwayDay/index.vue';
-import DayTotal from './components/dayTotal/index.vue';
-import EventSource from './components/eventSource/index.vue';
-import DailyDisposal from './components/dailyDisposal/index.vue';
-import TypeAnalysis from './components/typeAnalysis';
-import MonthStatistice from './components/monthStatistics/index.vue';
-import EventQuery from './components/eventQuery';
+import Railway from "./components/railway/index.vue";
+import RailWayDay from "./components/railwayDay/index.vue";
+import DayTotal from "./components/dayTotal/index.vue";
+import EventSource from "./components/eventSource/index.vue";
+import DailyDisposal from "./components/dailyDisposal/index.vue";
+import TypeAnalysis from "./components/typeAnalysis";
+import MonthStatistice from "./components/monthStatistics/index.vue";
+import EventQuery from "./components/eventQuery";
export default {
- name: 'EventDetection',
+ name: "EventDetection",
components: {
Railway,
RailWayDay,
@@ -42,11 +42,11 @@ export default {
TypeAnalysis,
MonthStatistice,
EventQuery,
- }
-}
+ },
+};
</script>
-
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
.TrafficFlow {
width: 100%;
height: 100%;
@@ -68,7 +68,7 @@ export default {
pointer-events: none;
margin-top: 19px;
- >div {
+ > div {
pointer-events: auto;
}
@@ -76,10 +76,8 @@ export default {
width: calc(100% / 4 - 25px * 3);
min-width: 475px;
margin-right: 15px;
-
}
-
.content-m {
display: inline-flex;
flex-direction: column;
@@ -107,13 +105,12 @@ export default {
pointer-events: none;
margin-top: 0px;
- >div {
+ > div {
pointer-events: auto;
}
.foot-w {
width: 100%;
-
}
.foot-l {
@@ -130,4 +127,3 @@ export default {
}
}
</style>
-
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
index 0c5d9bd3..fd3edf39 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
@@ -189,7 +189,7 @@ var options = {
itemStyle: {
normal: {
borderRadius: "5",
- borderWidth: 2,
+ borderWidth: 4,
borderType: "solid",
borderCap: "round",
borderJoin: "round",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
index 46e65aa3..213ed6ef 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
@@ -55,6 +55,10 @@ nameList.map((item, index) => {
});
var options = {
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
grid: {
top: "5%", //上边距
right: "20px", //右边距
@@ -157,6 +161,9 @@ var options = {
borderRadius: 6,
},
},
+ tooltip: {
+ show: false,
+ },
},
],
};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
index a2ed2068..a6743533 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
@@ -1,5 +1,9 @@
import * as echarts from "echarts";
var options = {
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
axisPointer: {
link: [
{
@@ -127,7 +131,7 @@ var options = {
],
series: [
{
- name: "Evaporation",
+ name: "",
type: "line",
symbolSize: 0,
lineStyle: {
@@ -160,7 +164,7 @@ var options = {
],
},
{
- name: "Rainfall",
+ name: "",
type: "line",
symbol: "circle",
symbolSize: 0,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/data.js
new file mode 100644
index 00000000..ceb40be9
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/data.js
@@ -0,0 +1,43 @@
+export const searchFormList = [
+ {
+ label: "路段名称:",
+ key: "ld",
+ // required: true,
+ type: "select",
+ options: {
+ options: [],
+ },
+ },
+ {
+ label: "指标名称:",
+ key: "type",
+ // required: true,
+ type: "select",
+ options: {
+ options: [
+ {
+ value: "1",
+ label: "拥挤度",
+ },
+ {
+ value: "2",
+ label: "饱和度",
+ },
+ {
+ value: "3",
+ label: "交通组成特征指数",
+ },
+ ],
+ },
+ },
+ {
+ label: "时间范围:",
+ key: "time",
+ // required: true,
+ type: "datePicker",
+ options: {
+ format: "yyyy-MM-dd",
+ type: "daterange",
+ },
+ },
+];
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
index b974fb6f..e365ea3e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
@@ -1,12 +1,19 @@
<template>
<div class='congestion'>
<div class="buttonbar">
- <div class="button">
- <i class="el-icon-refresh-right"></i>刷新
- </div>
- <div class="button">
- <i class="el-icon-upload2"></i>导出Excal
- </div>
+ <ButtonGradient class="button">
+ <template #prefix>
+ <i class="el-icon-refresh-right"></i>
+ </template>
+ 刷新
+ </ButtonGradient>
+ <ButtonGradient class="button">
+ <template #prefix>
+ <i class="el-icon-upload2"></i>
+ </template>
+ 导出
+ </ButtonGradient>
+ <InputSearch style="width: 402px;margin-left: 1300px;" :formList="formList" @handleSearch="handleSearch" />
</div>
<div class="board">
@@ -26,15 +33,29 @@
</el-table>
</div>
</div>
+ <!-- 分页 -->
+ <div class="footer">
+ <Pagination @current-change="getData" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
+ :page-size="pageSize" :current-page.sync="pageNum" layout="total, sizes, prev, pager, next" :total="50">
+ </Pagination>
+ </div>
</div>
</template>
<script>
+import Pagination from "@screen/components/Pagination.vue";
+import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
+import InputSearch from "@screen/components/InputSearch/index.vue";
+import request from "@/utils/request";
+import { Message } from "element-ui";
+import { searchFormList } from './data.js'
export default {
name: 'IndicatorQuery',
components: {
-
+ Pagination,
+ ButtonGradient,
+ InputSearch
},
data() {
return {
@@ -199,17 +220,46 @@ export default {
name: '2640.78m',
address: 'K100+000-K110+000'
},
- ]
+ ],
+ formList: [],
+ pageSize: 10,
+ pageNum: 1
}
},
-
created() {
-
+ // this.formList = searchFormList;
+ this.queryLdAll();
},
methods: {
selectItem(index) {
this.selectIndex = index;
},
+ getData() {
+
+ },
+ onSizeChange() {
+
+ },
+ handleSearch() {
+
+ },
+ queryLdAll() {
+ request({
+ url: `/business/roadSection/listAll`,
+ method: "get",
+ }).then((result) => {
+ if (result.code != 200) return Message.error(result?.msg);
+ let lds = [];
+ result.data.forEach(it => {
+ lds.push({
+ value: it.id,
+ label: it.sectionName
+ })
+ })
+ searchFormList[0].options.options = lds;
+ this.formList = searchFormList;
+ });
+ }
},
mounted() {
@@ -303,7 +353,7 @@ export default {
}
.board {
- height: 880px;
+ height: 829px;
width: 100%;
padding: 0px 0px;
border-radius: 5px 5px 5px 5px;
@@ -313,7 +363,7 @@ export default {
align-items: center;
flex-direction: column;
margin-top: 20px;
-
+ overflow-y: auto;
.warningList {
@@ -496,6 +546,14 @@ export default {
}
}
+
+ .footer {
+ margin-top: 15px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
.charts {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
index 8d1412fa..5f088a5c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
@@ -1,391 +1,399 @@
var res = [
- { value: 50, name: '情报板发布' },
- { value: 1, name: '' },
- { value: 20, name: '微博发布' },
- { value: 1, name: '' },
- { value: 30, name: '服务网站' },
- { value: 1, name: '' },
- ];
- // var res = this.evaluatedCountList;
- var data1 = [], data2 = [], data3 = [], legendData = [];
- var curIndex = 0;
- var index = 0;
- let angle = 0; //角度，用来做简单的动画效果的
+ { value: 50, name: "情报板发布" },
+ { value: 20, name: "微博发布" },
+ { value: 30, name: "服务网站" },
+];
+// var res = this.evaluatedCountList;
+var data1 = [],
+ data2 = [],
+ data3 = [],
+ legendData = [];
+var curIndex = 0;
+var index = 0;
+let angle = 0; //角度，用来做简单的动画效果的
- for (var i = 0; i < res.length; i++) {
+for (var i = 0; i < res.length; i++) {
+ data1.push({
+ value: res[i].value,
+ name: res[i].name,
+ });
+ data2.push({
+ value: res[i].value,
+ name: res[i].name,
+ itemStyle: {
+ opacity: 0.4,
+ },
+ });
- data1.push({
- value: res[i].value,
- name: res[i].name,
- })
- data2.push({
- value: res[i].value,
- name: res[i].name,
- itemStyle: {
- opacity: 0.4,
- },
- })
+ data3.push({
+ value: res[i].value,
+ name: res[i].name,
+ itemStyle: {
+ opacity: 0.1,
+ },
+ });
+ if (res[i].name != "") legendData.push(res[i].name);
+}
- data3.push({
- value: res[i].value,
- name: res[i].name,
- itemStyle: {
- opacity: 0.1,
+var options = {
+ color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"],
+ title: [
+ {
+ text: "999",
+ top: "27%",
+ textAlign: "center",
+ left: "49%",
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 30,
+ fontFamily: "PangMenZhengDao",
},
- })
- if ( res[i].name != "" )
- legendData.push(res[i].name);
- }
-
- var options = {
- color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'],
- title: [
- {
- text:'999',
- top: '27%',
- textAlign: 'center',
- left: '49%',
- textStyle: {
- color: '#ffffff',
- fontSize: 30,
- fontFamily: 'PangMenZhengDao',
- },
+ },
+ {
+ text: "总数",
+ top: "38%",
+ textAlign: "center",
+ left: "49%",
+ textStyle: {
+ color: "rgba(242, 252, 253, 0.84)",
+ fontSize: 14,
+ fontWeight: 400,
},
- {
- text: '总数',
- top: '38%',
- textAlign: 'center',
- left: '49%',
- textStyle: {
- color: 'rgba(242, 252, 253, 0.84)',
+ },
+ ],
+ grid: {
+ top: "3%",
+ left: "6%",
+ right: "6%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "item",
+ // formatter: '{b} : {c}:{d}'
+ },
+ legend: {
+ orient: "vertical",
+ height: "80px",
+ // left: "10%",
+ top: "68%",
+ itemWidth: 10,
+ itemHeight: 10,
+ icon: "circle",
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 14,
+ lineHeight: 22,
+ rich: {
+ text: {
+ width: 80,
+ marginLeft: 32,
+ fontSize: 14,
+ },
+ number: {
+ fontSize: 14,
+ color: "#37E7FF",
+ marginLeft: 32,
+ fontWeight: "bold",
+ },
+ unit: {
fontSize: 14,
- fontWeight: 400,
},
},
- ],
- grid: {
- top: '3%',
- left: '6%',
- right: '6%',
- bottom: '3%',
- containLabel: true
},
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c}:{d}'
- },
- legend: {
- orient: '',
- left: '10%',
- top: '68%',
- itemWidth: 10,
- itemHeight: 10,
- icon:"circle",
- textStyle: {
- color: "#ffffff",
- fontSize: 14,
- lineHeight: 22,
- rich: {
- text: {
- marginLeft:32,
- fontSize: 14,
- },
- number: {
- fontSize: 14,
- color: "#37E7FF",
- marginLeft:32,
- fontWeight: 'bold'
- },
- unit: {
- fontSize: 14,
- }
+ data: legendData,
+ formatter(name) {
+ if (name == "") return "";
+ const newData = res;
+ let tarValue = 0;
+ let total = 0;
+ for (let i = 0; i < newData.length; i++) {
+ total += newData[i].value;
+ if (newData[i].name === name) {
+ tarValue = newData[i].value;
}
- },
- data: legendData,
- formatter(name) {
- if ( name == "" ) return "";
- const newData = res;
- let tarValue = 0;
- let total = 0;
- for (let i = 0; i < newData.length; i++) {
- total += newData[i].value;
- if (newData[i].name === name) {
- tarValue = newData[i].value;
- }
- }
- var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
- const arr = name + ' ' + tarValue;
- return `{text|${name}} {number|${percert}%}`;;
- },
+ }
+ var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+ const arr = name + " " + tarValue;
+ return `{text|${name}} {number|${percert}%}`;
+ },
+ pageIconColor: "#fff",
+ pageIconSize: 10,
+ pageTextStyle: {
+ color: "#fff",
},
- series: [
- /** 饼图上刻度 */
+ type: "scroll",
+ pageButtonPosition: "end",
+ },
+ series: [
+ /** 饼图上刻度 */
{
- type: 'gauge',
- center: ['50%', '35%'],
- radius: '40%', // 错位调整此处
+ type: "gauge",
+ center: ["50%", "35%"],
+ radius: "40%", // 错位调整此处
startAngle: 0,
endAngle: 360,
splitNumber: 52,
axisLine: { show: false },
- splitLine: {
+ splitLine: {
// length: 39,
- length: '2',
+ length: "2",
lineStyle: {
width: 5,
- color: '#5CC5FF'
- }
+ color: "#5CC5FF",
+ },
},
axisTick: { show: false },
- axisLabel: { show: false }
+ axisLabel: { show: false },
},
- /** 绘制外部圆弧-2-开始圆点 <left-top> */
+ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{
- type: 'custom',
- coordinateSystem: 'none',
+ type: "custom",
+ coordinateSystem: "none",
renderItem: (params, api) => {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return {
- type: 'circle',
+ type: "circle",
shape: {
/** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180),
- r: 4
+ cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
+ r: 4,
},
style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
},
- silent: true
- }
+ silent: true,
+ };
},
- data: [0]
+ data: [0],
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
- startAngle: (350 + -angle) * Math.PI / 180,
- endAngle: (120 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+ startAngle: ((350 + -angle) * Math.PI) / 180,
+ endAngle: ((120 + -angle) * Math.PI) / 180,
+ },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
- startAngle: (150 + -angle) * Math.PI / 180,
- endAngle: (-30 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+ startAngle: ((150 + -angle) * Math.PI) / 180,
+ endAngle: ((-30 + -angle) * Math.PI) / 180,
},
- data: [0]
- },
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
- startAngle: (590 + -angle) * Math.PI / 180,
- endAngle: (350 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+ startAngle: ((590 + -angle) * Math.PI) / 180,
+ endAngle: ((350 + -angle) * Math.PI) / 180,
+ },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
- startAngle: (90 + -angle) * Math.PI / 180,
- endAngle: (160 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'pie',
- radius: ['45%', '39%'],
- center: ['50%', '35%'],
- z: 10,
- label: {
- show: false,
- position: 'center',
- formatter: (params) => {
- return params.name + "\r\n" + params.value
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+ startAngle: ((90 + -angle) * Math.PI) / 180,
+ endAngle: ((160 + -angle) * Math.PI) / 180,
},
- rich: {
- total: {
- fontSize: 16,
- color: '#04F5FE',
- },
- efficiency: {
- fontSize: 12,
- color: '#00FD6D',
- },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
},
- color: '#FFFFFF',
- fontSize: 12,
- lineHeight: 16,
+ silent: true,
+ };
+ },
+ data: [0],
+ },
+ {
+ type: "pie",
+ radius: ["45%", "39%"],
+ center: ["50%", "35%"],
+ z: 10,
+ label: {
+ show: false,
+ position: "center",
+ formatter: (params) => {
+ return params.name + "\r\n" + params.value;
},
- data: data1,
- labelLine: {
- show: false,
+ rich: {
+ total: {
+ fontSize: 16,
+ color: "#04F5FE",
+ },
+ efficiency: {
+ fontSize: 12,
+ color: "#00FD6D",
+ },
},
- itemStyle: {
- normal: {
- borderWidth: 6,
- shadowBlur: 10,
- borderRadius: 50, // 圆角
- }
- }
+ color: "#FFFFFF",
+ fontSize: 12,
+ lineHeight: 16,
},
- {
- type: 'pie',
- radius: ['25%', '39%'],
- center: ['50%', '35%'],
- label: {
- show: false,
+ data: data1,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ normal: {
+ borderRadius: "5",
+ borderWidth: 4,
+ borderType: "solid",
+ borderColor: "#0C2D3A",
},
- data: data2,
- labelLine: {
- show: false,
+ },
+ },
+ {
+ type: "pie",
+ radius: ["25%", "39%"],
+ center: ["50%", "35%"],
+ label: {
+ show: false,
+ },
+ data: data2,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ normal: {
+ borderRadius: "5",
+ borderWidth: 4,
+ borderType: "solid",
+ borderColor: "#0C2D3A",
},
- itemStyle: {
- normal: {
- borderWidth: 6,
- shadowBlur: 10,
- borderRadius: 0, // 圆角
- }
- }
},
- ],
-
- };
+ },
+ ],
+};
- export default options
\ No newline at end of file
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
index d57f651c..435b6e5b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
@@ -1,392 +1,406 @@
var res = [
- { value: 20, name: '情报板发布' },
- { value: 1, name: '' },
- { value: 20, name: '微博发布' },
- { value: 1, name: '' },
- { value: 20, name: '服务网站' },
- { value: 1, name: '' },
- { value: 20, name: '短信发布' },
- { value: 1, name: '' },
- { value: 20, name: '微信发布' },
- { value: 1, name: '' },
- ];
- // var res = this.evaluatedCountList;
- var data1 = [], data2 = [], data3 = [], legendData = [];
- var curIndex = 0;
- var index = 0;
+ { value: 20, name: "情报板发布" },
+ { value: 20, name: "微博发布" },
+ { value: 20, name: "服务网站" },
+ { value: 20, name: "短信发布" },
+ { value: 20, name: "微信发布" },
+];
+// var res = this.evaluatedCountList;
+var data1 = [],
+ data2 = [],
+ data3 = [],
+ legendData = [];
+var curIndex = 0;
+var index = 0;
- for (var i = 0; i < res.length; i++) {
- data1.push({
- value: res[i].value,
- name: res[i].name,
- })
- data2.push({
- value: res[i].value,
- name: res[i].name,
- itemStyle: {
- opacity: 0.4,
- },
- })
+for (var i = 0; i < res.length; i++) {
+ data1.push({
+ value: res[i].value,
+ name: res[i].name,
+ });
+ data2.push({
+ value: res[i].value,
+ name: res[i].name,
+ itemStyle: {
+ opacity: 0.4,
+ },
+ });
- data3.push({
- value: res[i].value,
- name: res[i].name,
- itemStyle: {
- opacity: 0.1,
+ data3.push({
+ value: res[i].value,
+ name: res[i].name,
+ itemStyle: {
+ opacity: 0.1,
+ },
+ });
+ if (res[i].name != "") legendData.push(res[i].name);
+}
+let angle = 0; //角度，用来做简单的动画效果的
+var options = {
+ color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"],
+ title: [
+ {
+ text: "999",
+ top: "27%",
+ textAlign: "center",
+ left: "49%",
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 30,
+ fontFamily: "PangMenZhengDao",
},
- })
- if ( res[i].name != "" )
- legendData.push(res[i].name);
- }
- let angle = 0; //角度，用来做简单的动画效果的
- var options = {
- color: ['#68F4DD', 'transparent', '#FFDD69', 'transparent', '#3CC3F0', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'],
- title: [
- {
- text:'999',
- top: '27%',
- textAlign: 'center',
- left: '49%',
- textStyle: {
- color: '#ffffff',
- fontSize: 30,
- fontFamily: 'PangMenZhengDao',
- },
+ },
+ {
+ text: "总数",
+ top: "38%",
+ textAlign: "center",
+ left: "49%",
+ textStyle: {
+ color: "rgba(242, 252, 253, 0.84)",
+ fontSize: 14,
+ fontWeight: 400,
},
- {
- text: '总数',
- top: '38%',
- textAlign: 'center',
- left: '49%',
- textStyle: {
- color: 'rgba(242, 252, 253, 0.84)',
+ },
+ ],
+ grid: {
+ top: "3%",
+ left: "6%",
+ right: "6%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "item",
+ // formatter: "{b} : {c}:{d}",
+ },
+ legend: {
+ orient: "vertical",
+ // width: "350px",
+ height: "80px",
+ // left: "10%",
+ top: "68%",
+ itemWidth: 10,
+ itemHeight: 10,
+ icon: "circle",
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 12,
+ lineHeight: 22,
+ rich: {
+ text: {
+ width: 80,
+ marginLeft: 32,
+ fontSize: 14,
+ },
+ number: {
+ fontSize: 14,
+ color: "#37E7FF",
+ marginLeft: 32,
+ fontWeight: "bold",
+ },
+ unit: {
fontSize: 14,
- fontWeight: 400,
},
},
- ],
- grid: {
- top: '3%',
- left: '6%',
- right: '6%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c}:{d}'
},
- legend: {
- orient: '',
- left: '10%',
- top: '68%',
- itemWidth: 10,
- itemHeight: 10,
- icon:"circle",
- textStyle: {
- color: "#ffffff",
- fontSize: 14,
- lineHeight: 22,
- rich: {
- text: {
- marginLeft:32,
- fontSize: 14,
- },
- number: {
- fontSize: 14,
- color: "#37E7FF",
- marginLeft:32,
- fontWeight: 'bold'
- },
- unit: {
- fontSize: 14,
- }
- }
- },
- data: legendData,
- formatter(name) {
- const newData = res;
- let tarValue = 0;
- let total = 0;
- for (let i = 0; i < newData.length; i++) {
- total += newData[i].value;
- if (newData[i].name === name) {
- tarValue = newData[i].value;
- }
+ data: legendData,
+ formatter(name) {
+ const newData = res;
+ let tarValue = 0;
+ let total = 0;
+ for (let i = 0; i < newData.length; i++) {
+ total += newData[i].value;
+ if (newData[i].name === name) {
+ tarValue = newData[i].value;
}
- var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
- const arr = name + ' ' + tarValue;
- return `{text|${name}} {number|${percert}%}`;;
- },
+ }
+ var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+ const arr = name + " " + tarValue;
+ return `{text|${name}} {number|${percert}%}`;
+ },
+ pageIconColor: "#fff",
+ pageIconSize: 10,
+ pageTextStyle: {
+ color: "#fff",
},
- series: [
- /** 饼图上刻度 */
+ type: "scroll",
+ pageButtonPosition: "end",
+ },
+ series: [
+ /** 饼图上刻度 */
{
- type: 'gauge',
- center: ['50%', '35%'],
- radius: '46%', // 错位调整此处
+ type: "gauge",
+ center: ["50%", "35%"],
+ radius: "46%", // 错位调整此处
startAngle: 0,
endAngle: 360,
splitNumber: 52,
axisLine: { show: false },
- splitLine: {
+ splitLine: {
// length: 39,
- length: '2',
+ length: "2",
lineStyle: {
width: 5,
- color: '#5CC5FF'
- }
+ color: "#5CC5FF",
+ },
},
axisTick: { show: false },
- axisLabel: { show: false }
+ axisLabel: { show: false },
},
- /** 绘制外部圆弧-2-开始圆点 <left-top> */
+ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{
- type: 'custom',
- coordinateSystem: 'none',
+ type: "custom",
+ coordinateSystem: "none",
renderItem: (params, api) => {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return {
- type: 'circle',
+ type: "circle",
shape: {
/** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180),
- r: 4
+ cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
+ r: 4,
},
style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
},
- silent: true
- }
+ silent: true,
+ };
},
- data: [0]
+ data: [0],
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
- startAngle: (350 + -angle) * Math.PI / 180,
- endAngle: (120 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+ startAngle: ((350 + -angle) * Math.PI) / 180,
+ endAngle: ((120 + -angle) * Math.PI) / 180,
+ },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
- startAngle: (150 + -angle) * Math.PI / 180,
- endAngle: (-30 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+ startAngle: ((150 + -angle) * Math.PI) / 180,
+ endAngle: ((-30 + -angle) * Math.PI) / 180,
},
- data: [0]
- },
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
- startAngle: (590 + -angle) * Math.PI / 180,
- endAngle: (350 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+ startAngle: ((590 + -angle) * Math.PI) / 180,
+ endAngle: ((350 + -angle) * Math.PI) / 180,
+ },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
- startAngle: (90 + -angle) * Math.PI / 180,
- endAngle: (160 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'pie',
- radius: ['45%', '40%'],
- center: ['50%', '35%'],
- z: 10,
- label: {
- show: false,
- position: 'center',
- formatter: (params) => {
- return params.name + "\r\n" + params.value
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+ startAngle: ((90 + -angle) * Math.PI) / 180,
+ endAngle: ((160 + -angle) * Math.PI) / 180,
},
- rich: {
- total: {
- fontSize: 16,
- color: '#04F5FE',
- },
- efficiency: {
- fontSize: 12,
- color: '#00FD6D',
- },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
},
- color: '#FFFFFF',
- fontSize: 12,
- lineHeight: 16,
+ silent: true,
+ };
+ },
+ data: [0],
+ },
+ {
+ type: "pie",
+ radius: ["45%", "40%"],
+ center: ["50%", "35%"],
+
+ z: 10,
+ label: {
+ show: false,
+ position: "center",
+ formatter: (params) => {
+ return params.name + "\r\n" + params.value;
},
- data: data1,
- labelLine: {
- show: false,
+ rich: {
+ total: {
+ fontSize: 16,
+ color: "#04F5FE",
+ },
+ efficiency: {
+ fontSize: 12,
+ color: "#00FD6D",
+ },
},
- itemStyle: {
- normal: {
- borderWidth: 6,
- shadowBlur: 10,
- borderRadius: 50, // 圆角
- }
- }
+ color: "#FFFFFF",
+ fontSize: 12,
+ lineHeight: 16,
},
- {
- type: 'pie',
- radius: ['29%', '40%'],
- center: ['50%', '35%'],
- label: {
- show: false,
+ data: data1,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ // normal: {
+ // borderWidth: 4,
+ // shadowBlur: 10,
+ // borderRadius: 50, // 圆角
+ // },
+ normal: {
+ borderRadius: "5",
+ borderWidth: 4,
+ borderType: "solid",
+ borderColor: "#0C2D3A",
},
- data: data2,
- labelLine: {
- show: false,
+ },
+ },
+ {
+ type: "pie",
+ radius: ["29%", "40%"],
+ center: ["50%", "35%"],
+ label: {
+ show: false,
+ },
+ data: data2,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ normal: {
+ borderRadius: "5",
+ borderWidth: 8,
+ borderType: "solid",
+ borderColor: "#0C2D3A",
},
- itemStyle: {
- normal: {
- borderWidth: 6,
- shadowBlur: 10,
- borderRadius: 0, // 圆角
- }
- }
},
- ],
-
- };
+ },
+ ],
+};
- export default options
\ No newline at end of file
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
index 4c0891f5..6b71da75 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
@@ -1,25 +1,16 @@
var res = [
- { value: 20, name: '交通事故' },
- { value: 1, name: '' },
- { value: 20, name: '车辆故障' },
- { value: 1, name: '' },
- { value: 15, name: '路障清除' },
- { value: 1, name: '' },
- { value: 10, name: '交通管制' },
- { value: 1, name: '' },
- { value: 5, name: '道路拥堵' },
- { value: 1, name: '' },
- { value: 5, name: '异常天气' },
- { value: 1, name: '' },
- { value: 5, name: '其他事件' },
- { value: 1, name: '' },
- { value: 10, name: '施工建设' },
- { value: 1, name: '' },
- { value: 10, name: '服务区异常' },
- { value: 1, name: '' },
- ];
- let angle = 0; //角度，用来做简单的动画效果的
-
+ { value: 20, name: "交通事故" },
+ { value: 20, name: "车辆故障" },
+ { value: 15, name: "路障清除" },
+ { value: 10, name: "交通管制" },
+ { value: 5, name: "道路拥堵" },
+ { value: 5, name: "异常天气" },
+ { value: 5, name: "其他事件" },
+ { value: 10, name: "施工建设" },
+ { value: 10, name: "服务区异常" },
+];
+let angle = 0; //角度，用来做简单的动画效果的
+
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
@@ -30,383 +21,405 @@ function getCirlPoint(x0, y0, r, angle) {
};
}
- // var res = this.evaluatedCountList;
- var data1 = [], data2 = [], data3 = [], legendData = [];
- var curIndex = 0;
- var index = 0;
+// var res = this.evaluatedCountList;
+var data1 = [],
+ data2 = [],
+ data3 = [],
+ legendData = [];
+var curIndex = 0;
+var index = 0;
- for (var i = 0; i < res.length; i++) {
- data1.push({
- value: res[i].value,
- name: res[i].name,
- })
- data2.push({
- value: res[i].value,
- name: res[i].name,
- itemStyle: {
- opacity: 0.4,
- },
- })
+for (var i = 0; i < res.length; i++) {
+ data1.push({
+ value: res[i].value,
+ name: res[i].name,
+ });
+ data2.push({
+ value: res[i].value,
+ name: res[i].name,
+ itemStyle: {
+ opacity: 0.4,
+ },
+ });
- data3.push({
- value: res[i].value,
- name: res[i].name,
- itemStyle: {
- opacity: 0.1,
- },
- })
- if ( res[i].name != "" )
- legendData.push(res[i].name);
- }
+ data3.push({
+ value: res[i].value,
+ name: res[i].name,
+ itemStyle: {
+ opacity: 0.1,
+ },
+ });
+ if (res[i].name != "") legendData.push(res[i].name);
+}
- var options = {
- color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',],
- title: [
- {
- text:'999',
- top: '27%',
- textAlign: 'center',
- left: '49%',
- textStyle: {
- color: '#ffffff',
- fontSize: 30,
- fontFamily: 'PangMenZhengDao',
- },
- },
- {
- text: '总数',
- top: '38%',
- textAlign: 'center',
- left: '49%',
- textStyle: {
- color: 'rgba(242, 252, 253, 0.84)',
- fontSize: 14,
- fontWeight: 400,
- },
+var options = {
+ color: [
+ "#2867FF",
+ "#58C3FF",
+ "#FF6A3B",
+ "#FDA474",
+ "#FEE58F",
+ "#8DFEBF",
+ "#66F4DC",
+ "#33E27D",
+ "#5D8CFE",
+ ],
+ title: [
+ {
+ text: "999",
+ top: "27%",
+ textAlign: "center",
+ left: "49%",
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 30,
+ fontFamily: "PangMenZhengDao",
},
- ],
- grid: {
- top: '38%',
- left: '6%',
- right: '6%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c}:{d}'
},
- legend: {
- orient: '',
- left: '0%',
- top: '68%',
- itemWidth: 10,
- itemHeight: 10,
- icon:"circle",
+ {
+ text: "总数",
+ top: "38%",
+ textAlign: "center",
+ left: "49%",
textStyle: {
- color: "#ffffff",
+ color: "rgba(242, 252, 253, 0.84)",
fontSize: 14,
- lineHeight: 22,
- rich: {
- text: {
- marginLeft:32,
- fontSize: 14,
- },
- number: {
- fontSize: 14,
- color: "#37E7FF",
- marginLeft:32,
- fontWeight: 'bold'
- },
- unit: {
- fontSize: 14,
- }
- }
+ fontWeight: 400,
},
- data: legendData,
- formatter(name) {
- const newData = res;
- let tarValue = 0;
- let total = 0;
- for (let i = 0; i < newData.length; i++) {
- total += newData[i].value;
- if (newData[i].name === name) {
- tarValue = newData[i].value;
- }
- }
- var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
- const arr = name + ' ' + tarValue;
- return `{text|${name}} {number|${percert}%}`;;
+ },
+ ],
+ grid: {
+ top: "38%",
+ left: "6%",
+ right: "6%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "item",
+ // formatter: "{b} : {c}:{d}",
+ },
+ legend: {
+ orient: "vertical",
+ height: "80px",
+ // left: "0%",
+ top: "68%",
+ itemWidth: 10,
+ itemHeight: 10,
+ icon: "circle",
+ textStyle: {
+ color: "#ffffff",
+ fontSize: 14,
+ lineHeight: 22,
+ rich: {
+ text: {
+ width: 80,
+ marginLeft: 32,
+ fontSize: 14,
+ },
+ number: {
+ fontSize: 14,
+ color: "#37E7FF",
+ marginLeft: 32,
+ fontWeight: "bold",
+ },
+ unit: {
+ fontSize: 14,
+ },
},
},
- series: [
- /** 饼图上刻度 */
+ data: legendData,
+ formatter(name) {
+ const newData = res;
+ let tarValue = 0;
+ let total = 0;
+ for (let i = 0; i < newData.length; i++) {
+ total += newData[i].value;
+ if (newData[i].name === name) {
+ tarValue = newData[i].value;
+ }
+ }
+ var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+ const arr = name + " " + tarValue;
+ return `{text|${name}} {number|${percert}%}`;
+ },
+ pageIconColor: "#fff",
+ pageIconSize: 10,
+ pageTextStyle: {
+ color: "#fff",
+ },
+ type: "scroll",
+ pageButtonPosition: "end",
+ },
+ series: [
+ /** 饼图上刻度 */
{
- type: 'gauge',
- center: ['50%', '35%'],
- radius: '46%', // 错位调整此处
+ type: "gauge",
+ center: ["50%", "35%"],
+ radius: "46%", // 错位调整此处
startAngle: 0,
endAngle: 360,
splitNumber: 52,
axisLine: { show: false },
- splitLine: {
+ splitLine: {
// length: 39,
- length: '2',
+ length: "2",
lineStyle: {
width: 5,
- color: '#5CC5FF'
- }
+ color: "#5CC5FF",
+ },
},
axisTick: { show: false },
- axisLabel: { show: false }
+ axisLabel: { show: false },
},
- /** 绘制外部圆弧-2-开始圆点 <left-top> */
+ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{
- type: 'custom',
- coordinateSystem: 'none',
+ type: "custom",
+ coordinateSystem: "none",
renderItem: (params, api) => {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return {
- type: 'circle',
+ type: "circle",
shape: {
/** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180),
- r: 4
+ cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
+ r: 4,
},
style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
},
- silent: true
- }
+ silent: true,
+ };
},
- data: [0]
+ data: [0],
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
- startAngle: (350 + -angle) * Math.PI / 180,
- endAngle: (120 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+ startAngle: ((350 + -angle) * Math.PI) / 180,
+ endAngle: ((120 + -angle) * Math.PI) / 180,
+ },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
- startAngle: (150 + -angle) * Math.PI / 180,
- endAngle: (-30 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
+ startAngle: ((150 + -angle) * Math.PI) / 180,
+ endAngle: ((-30 + -angle) * Math.PI) / 180,
},
- data: [0]
- },
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
- startAngle: (590 + -angle) * Math.PI / 180,
- endAngle: (350 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- let x0 = api.getWidth() / 2;
- let y0 = api.getHeight() / 2 - 59;
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
- return {
- type: 'circle',
- shape: {
- /** 角度175° 外弧2开始角度 */
- cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180),
- cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180),
- r: 4
- },
- style: {
- fill: '#5BC4FF',
- stroke: '#5BC4FF'
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+ startAngle: ((590 + -angle) * Math.PI) / 180,
+ endAngle: ((350 + -angle) * Math.PI) / 180,
+ },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
+ },
+ silent: true,
+ };
},
- {
- type: 'custom',
- coordinateSystem: 'none',
- renderItem: (params, api) => {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2 - 59,
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
- startAngle: (90 + -angle) * Math.PI / 180,
- endAngle: (160 + -angle) * Math.PI / 180
- },
- style: {
- fill: 'transparent',
- stroke: '#5BC4FF66',
- lineWidth: 2.6
- },
- silent: true
- }
- },
- data: [0]
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ let x0 = api.getWidth() / 2;
+ let y0 = api.getHeight() / 2 - 59;
+ let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
+ return {
+ type: "circle",
+ shape: {
+ /** 角度175° 外弧2开始角度 */
+ cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
+ cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
+ r: 4,
+ },
+ style: {
+ fill: "#5BC4FF",
+ stroke: "#5BC4FF",
+ },
+ silent: true,
+ };
},
- {
- type: 'pie',
- radius: ['45%', '40%'],
- center: ['50%', '35%'],
- z: 10,
- label: {
- show: false,
- position: 'center',
- formatter: (params) => {
- return params.name + "\r\n" + params.value
+ data: [0],
+ },
+ {
+ type: "custom",
+ coordinateSystem: "none",
+ renderItem: (params, api) => {
+ return {
+ type: "arc",
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2 - 59,
+ r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
+ startAngle: ((90 + -angle) * Math.PI) / 180,
+ endAngle: ((160 + -angle) * Math.PI) / 180,
},
- rich: {
- total: {
- fontSize: 16,
- color: '#04F5FE',
- },
- efficiency: {
- fontSize: 12,
- color: '#00FD6D',
- },
+ style: {
+ fill: "transparent",
+ stroke: "#5BC4FF66",
+ lineWidth: 2.6,
},
- color: '#FFFFFF',
- fontSize: 12,
- lineHeight: 16,
+ silent: true,
+ };
+ },
+ data: [0],
+ },
+ {
+ type: "pie",
+ radius: ["45%", "40%"],
+ center: ["50%", "35%"],
+ z: 10,
+ label: {
+ show: false,
+ position: "center",
+ formatter: (params) => {
+ return params.name + "\r\n" + params.value;
},
- data: data1,
- labelLine: {
- show: false,
+ rich: {
+ total: {
+ fontSize: 16,
+ color: "#04F5FE",
+ },
+ efficiency: {
+ fontSize: 12,
+ color: "#00FD6D",
+ },
},
- itemStyle: {
- normal: {
- borderWidth: 6,
- shadowBlur: 10,
- borderRadius: 50, // 圆角
- }
- }
+ color: "#FFFFFF",
+ fontSize: 12,
+ lineHeight: 16,
},
- {
- type: 'pie',
- radius: ['29%', '39%'],
- center: ['50%', '35%'],
- label: {
- show: false,
+ data: data1,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ normal: {
+ borderRadius: "5",
+ borderWidth: 4,
+ borderType: "solid",
+ borderColor: "#0C2D3A",
},
- data: data2,
- labelLine: {
- show: false,
+ },
+ },
+ {
+ type: "pie",
+ radius: ["29%", "39%"],
+ center: ["50%", "35%"],
+ label: {
+ show: false,
+ },
+ data: data2,
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ normal: {
+ borderRadius: "5",
+ borderWidth: 4,
+ borderType: "solid",
+ borderColor: "#0C2D3A",
},
- itemStyle: {
- normal: {
- borderWidth: 6,
- shadowBlur: 10,
- borderRadius: 0, // 圆角
- }
- }
},
- ],
-
- };
+ },
+ ],
+};
- export default options
\ No newline at end of file
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
index a32f9e85..edac1849 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
@@ -19,25 +19,25 @@ let data2 = [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500];
let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
let options = {
tooltip: {
- show: false,
+ show: true,
trigger: "axis",
- axisPointer: {
- // 坐标轴指示器，坐标轴触发有效
- type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
- },
- textStyle: {
- color: "#fff",
- fontSize: 14,
- },
- backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
- borderColor: "rgba(3, 31, 71, .0)",
- formatter: "健康监测<br>{b1}：{c1}人",
+ // axisPointer: {
+ // // 坐标轴指示器，坐标轴触发有效
+ // type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+ // },
+ // textStyle: {
+ // color: "#fff",
+ // fontSize: 14,
+ // },
+ // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
+ // borderColor: "rgba(3, 31, 71, .0)",
+ // formatter: "健康监测<br>{b1}：{c1}人",
},
grid: {
- left: "2%",
- right: "4%",
- top: "20%",
- bottom: "10%",
+ left: "0",
+ right: "0",
+ top: "80px",
+ bottom: "25px",
containLabel: true,
},
xAxis: {
@@ -51,7 +51,7 @@ let options = {
},
axisLine: {
lineStyle: {
- color: "#1C82C5",
+ color: "#2CC9EC",
},
},
axisLabel: {
@@ -60,17 +60,23 @@ let options = {
rotate: "1",
margin: "20",
textStyle: {
- fontSize: 12,
- color: "#50A2C1",
+ fontSize: 10,
+ color: "#fff",
},
},
},
yAxis: [
{
- min: 0,
+ name: "(起)",
+ nameTextStyle: {
+ color: "#fff",
+ fontSize: 10,
+ align: "right",
+ verticalAlign: "center",
+ },
axisLine: {
lineStyle: {
- color: "#1C82C5",
+ color: "#1D7B93",
},
},
splitLine: {
@@ -81,9 +87,9 @@ let options = {
},
},
axisLabel: {
- color: "#DEEBFF",
+ color: "#fff",
textStyle: {
- fontSize: 12,
+ fontSize: 10,
},
},
axisTick: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
index 0c6f1fe6..ebc29771 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
@@ -1,54 +1,70 @@
<template>
- <div class='congestion'>
+ <div class="congestion">
<WgtTitle :title="'月审核通过趋势分析'"></WgtTitle>
<div class="board">
<div class="searchPanel_1">
- <el-date-picker size="mini" type="month" class="selectRoad" v-model="dateTime" style="width:140px;"
- placeholder="请选择" />
- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter"
- aria-placeholder="请选季度" />
-
- <el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button>
- <el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button>
+ <el-date-picker
+ size="mini"
+ type="month"
+ class="selectRoad"
+ v-model="dateTime"
+ style="width: 140px"
+ placeholder="请选择"
+ />
+ <el-quarter-picker
+ size="mini"
+ class="selectRoad"
+ style="width: 180px"
+ v-if="year == 'quarter'"
+ v-model="quarter"
+ aria-placeholder="请选季度"
+ />
+
+ <el-button
+ type="primary"
+ size="mini"
+ class="btnSearch"
+ icon="el-icon-search"
+ >查询</el-button
+ >
+ <el-button class="btnReset" size="mini" icon="el-icon-refresh-left"
+ >重置</el-button
+ >
</div>
- <div class="charts keep-ratio " id="nucleusThrough"></div>
+ <div class="charts keep-ratio" id="nucleusThrough"></div>
</div>
</div>
</template>
-
+
<script>
import WgtTitle from "@screen/pages/perception/widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts3";
export default {
- name: 'nucleusThrough',
+ name: "nucleusThrough",
components: {
- WgtTitle
+ WgtTitle,
},
data() {
return {
dateTime: "",
- }
- },
-
- created() {
-
+ };
},
- methods: {
- },
+ created() {},
+ methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
- var myChart = echarts.init(document.getElementById('nucleusThrough'));
+ var myChart = echarts.init(document.getElementById("nucleusThrough"));
myChart.setOption(chartsStatistics);
});
});
},
-}
+};
</script>
-
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
.congestion {
width: 100%;
@@ -61,18 +77,22 @@ export default {
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+ border-image: linear-gradient(
+ 360deg,
+ rgba(55, 231, 255, 0.3),
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: space-between;
align-items: center;
-
.searchPanel_1 {
position: absolute;
display: flex;
align-items: center;
height: 40px;
- width: 100%;
+ width: 50%;
font-size: 14px;
margin-bottom: 10px;
left: 20px;
@@ -102,7 +122,7 @@ export default {
.selectRoad {
width: 89px;
- border: 1px solid #00B3CC;
+ border: 1px solid #00b3cc;
::v-deep {
.el-input__inner {
@@ -113,19 +133,17 @@ export default {
}
.btnSearch {
- background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+ background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px;
border-color: transparent;
}
.btnReset {
- background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
- ;
+ background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
border-color: transparent;
color: white;
}
}
-
}
}
@@ -134,4 +152,3 @@ export default {
width: 100%;
}
</style>
-
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
index 3bff0d09..9991db10 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
@@ -1,271 +1,302 @@
-
/* 数据 */
-let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数
-var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+let nameList = [
+ "00:00",
+ "02:00",
+ "04:00",
+ "06:00",
+ "08:00",
+ "10:00",
+ "12:00",
+ "14:00",
+ "16:00",
+ "18:00",
+ "20:00",
+ "22:00",
+]; // 类别
+let valueList = [
+ 800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903,
+]; // 人数
+var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"];
/* 数据整合 */
let dataList = [];
nameList.map((item, index) => {
- if (index === 4) {
- dataList.push({
- name: item,
- value: valueList[index],
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#FFB904' // 0% 处的颜色
- }, {
- offset: 1, color: '#FF6969' // 100% 处的颜色
- }],
- global: false // 缺省为 false
+ if (index === 4) {
+ dataList.push({
+ name: item,
+ value: valueList[index],
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#FFB904", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#FF6969", // 100% 处的颜色
},
- borderRadius: 6
- },
- label: { show: false }
- })
- } else {
- dataList.push({
- name: item,
- value: valueList[index],
- itemStyle:{
- borderRadius: 6
- }
- })
- }
-})
+ ],
+ global: false, // 缺省为 false
+ },
+ borderRadius: 6,
+ },
+ label: { show: false },
+ });
+ } else {
+ dataList.push({
+ name: item,
+ value: valueList[index],
+ itemStyle: {
+ borderRadius: 6,
+ },
+ });
+ }
+});
var options = {
- legend: {
- // orient: 'vertical',
- icon: "circle",
- itemHeight: 8,
- itemWidth: 8,
- top: "5%",
- x: "right",
- textStyle: {
- color: "#fff",
- },
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
+ legend: {
+ // orient: 'vertical',
+ icon: "circle",
+ itemHeight: 8,
+ itemWidth: 8,
+ top: "20px",
+ x: "right",
+ textStyle: {
+ color: "#fff",
},
- grid: {
- top: '15%',//上边距
- right: '0',//右边距
- left: '0',//左边距
- bottom: "10%",//下边距
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- data: nameList,
- axisTick: {
- show: false //隐藏X轴刻度
- },
- axisLine: {
- lineStyle: {
- color: "rgba(49, 217, 255, 0.8)"
- }
- },
- axisLabel: {
- show: true,
- color: '#B6E6FF',
- fontSize:8,
- fontFamily: 'Source Han Sans CN-Regular',
+ },
+ grid: {
+ top: "75px", //上边距
+ right: "0", //右边距
+ left: "0", //左边距
+ bottom: "20px", //下边距
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: nameList,
+ axisTick: {
+ show: false, //隐藏X轴刻度
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rgba(49, 217, 255, 0.8)",
},
- },
- yAxis: [{
- type: 'value',
- name: "",
- max: 1200,
- min:0,
- splitNumber:5,
+ },
+ axisLabel: {
+ show: true,
+ color: "#fff",
+ fontSize: 10,
+ },
+ },
+ yAxis: [
+ {
+ type: "value",
+ name: "(起)",
nameTextStyle: {
- color: '#B6E6FF',
- fontSize: 13,
- fontFamily: 'Source Han Sans CN-Regular',
- align: "left",
- verticalAlign: "center",
+ color: "#fff",
+ fontSize: 10,
+ align: "right",
+ verticalAlign: "center",
},
axisLabel: {
- fontSize: 13,
- color: '#B6E6FF',
- fontFamily: 'HarmonyOS Sans-Regular',
- // formatter:function(value,index){
- // return yList[index]
- // }
+ fontSize: 10,
+ color: "#fff",
+ // formatter:function(value,index){
+ // return yList[index]
+ // }
},
axisLine: {
- show: false,
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
splitLine: {
- lineStyle: {
- color: 'rgba(49, 217, 255, 0.5)',
- }
+ lineStyle: {
+ color: "rgba(49, 217, 255, 0.5)",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "情报板发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#32BB8A90" },
+ { offset: 1, color: "#32BB8A00" },
+ ],
+ global: false,
+ },
+ },
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#32BB8A",
+ },
+ lineStyle: {
+ width: 2,
},
- }],
- series: [
- {
- name: '情报板发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#32BB8A90" },
- { offset: 1, color: "#32BB8A00" },
- ],
- global: false,
- },
- },
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#32BB8A',
- },
- lineStyle: {
- width:2,
- },
-
- data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
- },
- {
- name: '服务网站',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#08BAF4',
- },
- lineStyle: {
- width: 2,
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#08BAF490" },
- { offset: 1, color: "#08BAF400" },
- ],
- global: false,
- },
- },
- data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
- },
- {
- name: '微信发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#E2BA74',
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#E2BA7490" },
- { offset: 1, color: "#E2BA7400" },
- ],
- global: false,
- },
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },{
- name: '微博发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#51BFA4',
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#51BFA490" },
- { offset: 1, color: "#51BFA400" },
- ],
- global: false,
- },
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },{
- name: '短信发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#08BAF4',
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#08BAF490" },
- { offset: 1, color: "#08BAF400" },
- ],
- global: false,
- },
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },
- ]
-}
+ data: [
+ 1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
+ ], // 折线图的数据
+ },
+ {
+ name: "服务网站",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#08BAF4",
+ },
+ lineStyle: {
+ width: 2,
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#08BAF490" },
+ { offset: 1, color: "#08BAF400" },
+ ],
+ global: false,
+ },
+ },
+ data: [
+ 600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600,
+ ], // 折线图的数据
+ },
+ {
+ name: "微信发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#E2BA74",
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#E2BA7490" },
+ { offset: 1, color: "#E2BA7400" },
+ ],
+ global: false,
+ },
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [
+ 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
+ ], // 折线图的数据
+ },
+ {
+ name: "微博发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#51BFA4",
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#51BFA490" },
+ { offset: 1, color: "#51BFA400" },
+ ],
+ global: false,
+ },
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [
+ 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
+ ], // 折线图的数据
+ },
+ {
+ name: "短信发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#08BAF4",
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#08BAF490" },
+ { offset: 1, color: "#08BAF400" },
+ ],
+ global: false,
+ },
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [
+ 850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480, 480, 780,
+ ], // 折线图的数据
+ },
+ ],
+};
export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
index b5d032e2..c0b1c0e7 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
@@ -1,271 +1,293 @@
-
/* 数据 */
-let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数
-var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+let nameList = [
+ "00:00",
+ "02:00",
+ "04:00",
+ "06:00",
+ "08:00",
+ "10:00",
+ "12:00",
+ "14:00",
+ "16:00",
+ "18:00",
+ "20:00",
+ "22:00",
+]; // 类别
+let valueList = [
+ 800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, 903,
+]; // 人数
+var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"];
/* 数据整合 */
let dataList = [];
nameList.map((item, index) => {
- if (index === 4) {
- dataList.push({
- name: item,
- value: valueList[index],
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#FFB904' // 0% 处的颜色
- }, {
- offset: 1, color: '#FF6969' // 100% 处的颜色
- }],
- global: false // 缺省为 false
+ if (index === 4) {
+ dataList.push({
+ name: item,
+ value: valueList[index],
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#FFB904", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#FF6969", // 100% 处的颜色
},
- borderRadius: 6
- },
- label: { show: false }
- })
- } else {
- dataList.push({
- name: item,
- value: valueList[index],
- itemStyle:{
- borderRadius: 6
- }
- })
- }
-})
+ ],
+ global: false, // 缺省为 false
+ },
+ borderRadius: 6,
+ },
+ label: { show: false },
+ });
+ } else {
+ dataList.push({
+ name: item,
+ value: valueList[index],
+ itemStyle: {
+ borderRadius: 6,
+ },
+ });
+ }
+});
var options = {
- legend: {
- // orient: 'vertical',
- icon: "circle",
- itemHeight: 8,
- itemWidth: 8,
- top: "5%",
- x: "right",
- textStyle: {
- color: "#fff",
- },
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
+ legend: {
+ // orient: 'vertical',
+ icon: "circle",
+ itemHeight: 8,
+ itemWidth: 8,
+ top: "5%",
+ x: "right",
+ textStyle: {
+ color: "#fff",
},
- grid: {
- top: '20%',//上边距
- right: '0',//右边距
- left: '0',//左边距
- bottom: "10%",//下边距
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- data: nameList,
- axisTick: {
- show: false //隐藏X轴刻度
- },
- axisLine: {
- lineStyle: {
- color: "rgba(49, 217, 255, 0.8)"
- }
- },
- axisLabel: {
- show: true,
- color: '#B6E6FF',
- fontSize:8,
- fontFamily: 'Source Han Sans CN-Regular',
+ },
+ grid: {
+ top: "80px", //上边距
+ right: "0", //右边距
+ left: "0", //左边距
+ bottom: "10px", //下边距
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: nameList,
+ axisTick: {
+ show: false, //隐藏X轴刻度
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rgba(49, 217, 255, 0.8)",
},
- },
- yAxis: [{
- type: 'value',
- name: "",
- max: 1000,
- min:0,
- splitNumber:5,
+ },
+ axisLabel: {
+ show: true,
+ color: "#fff",
+ fontSize: 10,
+ },
+ },
+ yAxis: [
+ {
+ type: "value",
+ name: "(起)",
nameTextStyle: {
- color: '#B6E6FF',
- fontSize: 13,
- fontFamily: 'Source Han Sans CN-Regular',
- align: "left",
- verticalAlign: "center",
+ color: "#fff",
+ fontSize: 10,
+ align: "right",
+ verticalAlign: "center",
},
axisLabel: {
- fontSize: 13,
- color: '#B6E6FF',
- fontFamily: 'HarmonyOS Sans-Regular',
- // formatter:function(value,index){
- // return yList[index]
- // }
+ fontSize: 10,
+ color: "#fff",
+ // fontFamily: "HarmonyOS Sans-Regular",
+ // formatter:function(value,index){
+ // return yList[index]
+ // }
},
axisLine: {
- show: false,
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
splitLine: {
- lineStyle: {
- color: 'rgba(49, 217, 255, 0.5)',
- }
+ lineStyle: {
+ color: "rgba(49, 217, 255, 0.5)",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "情报板发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#51BFA490" },
+ { offset: 1, color: "#51BFA400" },
+ ],
+ global: false,
+ },
+ },
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#51BFA4",
+ },
+ lineStyle: {
+ width: 2,
},
- }],
- series: [
- {
- name: '情报板发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#51BFA490" },
- { offset: 1, color: "#51BFA400" },
- ],
- global: false,
- },
- },
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#51BFA4',
- },
- lineStyle: {
- width:2,
- },
-
- data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
- },
- {
- name: '服务网站',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#08BAF4',
- },
- lineStyle: {
- width: 2,
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#08BAF490" },
- { offset: 1, color: "#08BAF400" },
- ],
- global: false,
- },
- },
- data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
- },
- {
- name: '微信发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#E2BA74',
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#E2BA7490" },
- { offset: 1, color: "#E2BA7400" },
- ],
- global: false,
- },
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },{
- name: '微博发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#FB6D07',
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#FB6D0799" },
- { offset: 1, color: "#FB6D0700" },
- ],
- global: false,
- },
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },{
- name: '短信发布',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#07DEFB',
- },
- smooth: true,
- areaStyle: {
- width: 4,
- opacity: 0.25,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0.389, color: "#07DEFB90" },
- { offset: 1, color: "#07DEFB00" },
- ],
- global: false,
- },
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },
- ]
-}
+ data: [1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900], // 折线图的数据
+ },
+ {
+ name: "服务网站",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#08BAF4",
+ },
+ lineStyle: {
+ width: 2,
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#08BAF490" },
+ { offset: 1, color: "#08BAF400" },
+ ],
+ global: false,
+ },
+ },
+ data: [600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500], // 折线图的数据
+ },
+ {
+ name: "微信发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#E2BA74",
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#E2BA7490" },
+ { offset: 1, color: "#E2BA7400" },
+ ],
+ global: false,
+ },
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
+ },
+ {
+ name: "微博发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#FB6D07",
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#FB6D0799" },
+ { offset: 1, color: "#FB6D0700" },
+ ],
+ global: false,
+ },
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
+ },
+ {
+ name: "短信发布",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#07DEFB",
+ },
+ smooth: true,
+ areaStyle: {
+ width: 4,
+ opacity: 0.25,
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0.389, color: "#07DEFB90" },
+ { offset: 1, color: "#07DEFB00" },
+ ],
+ global: false,
+ },
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480], // 折线图的数据
+ },
+ ],
+};
export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
index 5afcef2d..57d54279 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
@@ -1,54 +1,71 @@
<template>
- <div class='congestion'>
+ <div class="congestion">
<WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle>
<div class="board">
<div class="searchPanel_1">
- <el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
- type="month" placeholder="请选择" />
- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter"
- aria-placeholder="请选季度" />
-
- <el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button>
- <el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button>
+ <el-date-picker
+ size="mini"
+ v-if="year != 'quarter'"
+ class="selectRoad"
+ v-model="dateTime"
+ style="width: 140px"
+ type="month"
+ placeholder="请选择"
+ />
+ <el-quarter-picker
+ size="mini"
+ class="selectRoad"
+ style="width: 180px"
+ v-if="year == 'quarter'"
+ v-model="quarter"
+ aria-placeholder="请选季度"
+ />
+
+ <el-button
+ type="primary"
+ size="mini"
+ class="btnSearch"
+ icon="el-icon-search"
+ >查询</el-button
+ >
+ <el-button class="btnReset" size="mini" icon="el-icon-refresh-left"
+ >重置</el-button
+ >
</div>
- <div class="charts keep-ratio " id="postTrendsMonth"></div>
+ <div class="charts keep-ratio" id="postTrendsMonth"></div>
</div>
</div>
</template>
-
+
<script>
import WgtTitle from "@screen/pages/perception/widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
export default {
- name: 'postTrendsMonth',
+ name: "postTrendsMonth",
components: {
- WgtTitle
+ WgtTitle,
},
data() {
return {
dateTime: "",
- }
- },
-
- created() {
-
+ };
},
- methods: {
- },
+ created() {},
+ methods: {},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
- var myChart = echarts.init(document.getElementById('postTrendsMonth'));
+ var myChart = echarts.init(document.getElementById("postTrendsMonth"));
myChart.setOption(chartsStatistics);
});
});
},
-}
+};
</script>
-
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
.congestion {
width: 100%;
@@ -61,7 +78,12 @@ export default {
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
- border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+ border-image: linear-gradient(
+ 360deg,
+ rgba(55, 231, 255, 0.3),
+ rgba(55, 231, 255, 0)
+ )
+ 1 1;
display: flex;
justify-content: space-between;
align-items: center;
@@ -72,7 +94,7 @@ export default {
display: flex;
align-items: center;
height: 40px;
- width: 100%;
+ width: 50%;
font-size: 14px;
margin-bottom: 10px;
left: 20px;
@@ -102,7 +124,7 @@ export default {
.selectRoad {
width: 89px;
- border: 1px solid #00B3CC;
+ border: 1px solid #00b3cc;
::v-deep {
.el-input__inner {
@@ -113,25 +135,22 @@ export default {
}
.btnSearch {
- background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+ background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px;
border-color: transparent;
}
.btnReset {
- background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
- ;
+ background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
border-color: transparent;
color: white;
}
}
-
-
}
}
.charts {
height: 300px;
width: 100%;
-}</style>
-
\ No newline at end of file
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue
index ef8fab4e..be27eb70 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue
@@ -1,177 +1,166 @@
<template>
- <div class='TrafficFlow'>
- <section class="foot">
- <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
- <el-tab-pane label="公众服务统计分析" name="first">
- <div class="header-shot" >
- <TopComponent />
- </div>
- <div class="content" >
- <ChannelAnalytics class="content-l" />
- <EventTypeAnalysis class="content-l" />
- <AuditAnalytics class="content-l" />
- <PostTrendsDay class="content-l" />
- </div>
- <div class="content" >
- <PostTrendsMonth class="content-mi" />
- <NucleusThrough class="content-mi" />
- </div>
- </el-tab-pane>
- <el-tab-pane label="公众服务统计查询" name="second">
-
- </el-tab-pane>
- </el-tabs>
- </section>
- </div>
- </template>
-
- <script>
- import TopComponent from './components/topComponent';
- import ChannelAnalytics from './components/channelAnalytics';
- import EventTypeAnalysis from './components/eventTypeAnalysis';
- import AuditAnalytics from './components/auditAnalytics';
- import PostTrendsDay from './components/postTrendsDay';
- import PostTrendsMonth from './components/postTrendsMonth';
- import NucleusThrough from './components/nucleusThrough';
-
- export default {
- name: 'publicService',
- components: {
- TopComponent,
- ChannelAnalytics,
- EventTypeAnalysis,
- AuditAnalytics,
- PostTrendsDay,
- PostTrendsMonth,
- NucleusThrough
- },
- data(){
- return {
- activeName:"first"
- }
- },
- methods:{
- changeTabs(){
-
- }
- }
-
+ <div class="TrafficFlow">
+ <section class="foot">
+ <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
+ <el-tab-pane label="公众服务统计分析" name="first">
+ <div class="header-shot">
+ <TopComponent />
+ </div>
+ <div class="content">
+ <ChannelAnalytics class="content-l" />
+ <EventTypeAnalysis class="content-l" />
+ <AuditAnalytics class="content-l" />
+ <PostTrendsDay class="content-l" style="margin-right: 0" />
+ </div>
+ <div class="content">
+ <PostTrendsMonth class="content-mi" />
+ <NucleusThrough class="content-mi" style="margin-right: 0" />
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="公众服务统计查询" name="second"> </el-tab-pane>
+ </el-tabs>
+ </section>
+ </div>
+</template>
+
+<script>
+import TopComponent from "./components/topComponent";
+import ChannelAnalytics from "./components/channelAnalytics";
+import EventTypeAnalysis from "./components/eventTypeAnalysis";
+import AuditAnalytics from "./components/auditAnalytics";
+import PostTrendsDay from "./components/postTrendsDay";
+import PostTrendsMonth from "./components/postTrendsMonth";
+import NucleusThrough from "./components/nucleusThrough";
+
+export default {
+ name: "publicService",
+ components: {
+ TopComponent,
+ ChannelAnalytics,
+ EventTypeAnalysis,
+ AuditAnalytics,
+ PostTrendsDay,
+ PostTrendsMonth,
+ NucleusThrough,
+ },
+ data() {
+ return {
+ activeName: "first",
+ };
+ },
+ methods: {
+ changeTabs() {},
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-tabs__item {
+ display: inline-flex;
+ justify-content: center;
+ font-size: 16px;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 500;
+ color: #ffffff;
+ min-width: 128px;
+ position: relative;
+ left: 10px;
+}
+
+::v-deep .el-tabs__active-bar {
+ min-width: 128px;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+ background-color: #133242;
+ opacity: 0.1;
+}
+
+.footTabs {
+ display: inline;
+ width: 100%;
+}
+
+.TrafficFlow {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 6;
+ color: white;
+
+ .header-shot {
+ width: 98%;
+ margin: auto;
+ margin-top: 15px;
+ height: 160px;
}
- </script>
-
- <style lang='scss' scoped>
-
- ::v-deep .el-tabs__item{
- display: inline-flex;
- justify-content: center;
- font-size: 16px;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- min-width:128px;
- position: relative;
- left:10px;
- }
-
- ::v-deep .el-tabs__active-bar {
- min-width:128px;
- }
-
- ::v-deep .el-tabs__nav-wrap::after {
- background-color: #133242;
- opacity: 0.1;
- }
-
- .footTabs {
- display: inline;
- width:100%;
-
- }
-
- .TrafficFlow {
+
+ .content {
width: 100%;
- height: 100%;
- position: relative;
- z-index: 6;
- color: white;
-
- .header-shot{
- width: 98%;
- margin: auto;
- margin-top: 15px;
- height:160px;
+ margin: auto;
+ display: flex;
+ flex: 1;
+ pointer-events: none;
+ margin-top: 19px;
+ --keep-ratio: scaleX(1);
+ > div {
+ pointer-events: auto;
}
- .content {
- width: 100%;
- margin: auto;
- display: flex;
- flex: 1;
- pointer-events: none;
- margin-top: 19px;
-
- >div {
- pointer-events: auto;
- }
-
- .content-l {
- width: calc(25%);
-
- margin-right:20px;
+ .content-l {
+ width: calc(25%);
- }
+ margin-right: 20px;
+ }
- .content-mi {
- width: calc(50%);
-
- margin-right:20px;
- }
-
-
- .content-m {
- display: inline-flex;
- flex-direction: column;
- width: calc(100% / 4 );
- margin-right:20px;
-
- .content-m-t {
- width:100%;
- height:240px;
- margin-bottom: 20px;
- }
- }
- .content-r {
- width: 49.4%;
- }
+ .content-mi {
+ width: calc(50%);
+
+ margin-right: 20px;
}
- .foot{
- width: 98%;
- margin: auto;
- display: flex;
- justify-content: space-between;
- flex: 1;
- pointer-events: none;
- margin-top: 8px;
- >div {
- pointer-events: auto;
- }
- .foot-w {
- width:100%;
+ .content-m {
+ display: inline-flex;
+ flex-direction: column;
+ width: calc(100% / 4);
+ margin-right: 20px;
+ .content-m-t {
+ width: 100%;
+ height: 240px;
+ margin-bottom: 20px;
}
-
- .foot-l {
- width: 726px;
- }
- .foot-m {
- width: 613px;
- }
- .foot-r {
- width: 493px;
- }
+ }
+ .content-r {
+ width: 49.4%;
+ }
+ }
+ .foot {
+ width: 98%;
+ margin: auto;
+ display: flex;
+ justify-content: space-between;
+ flex: 1;
+ pointer-events: none;
+ margin-top: 8px;
+ > div {
+ pointer-events: auto;
+ }
+
+ .foot-w {
+ width: 100%;
+ }
+
+ .foot-l {
+ width: 726px;
+ }
+ .foot-m {
+ width: 613px;
+ }
+ .foot-r {
+ width: 493px;
}
}
- </style>
-
\ No newline at end of file
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
index 33c2c982..cad7cfc3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
@@ -129,6 +129,9 @@ export const InfoWarningSource = {
6: {
text: "非机预警",
},
+ 7: {
+ text: "气象监测器",
+ }
};
// 事件主类 warningType
diff --git a/ruoyi-ui/src/views/login copy.vue b/ruoyi-ui/src/views/login copy.vue
new file mode 100644
index 00000000..a65882cb
--- /dev/null
+++ b/ruoyi-ui/src/views/login copy.vue
@@ -0,0 +1,461 @@
+<template>
+ <div class="login">
+ <!-- <Bg2 style=" width: 600px; height:800px; position: fixed; left: 100px; top:100px">发多少刚发的刚发的</Bg2> -->
+ <el-form
+ ref="loginForm"
+ :model="loginForm"
+ :rules="loginRules"
+ class="login-form"
+ >
+ <div
+ style="
+ width: 100%;
+ text-align: center;
+ padding-right: 20px;
+ padding-bottom: 10px;
+ "
+ >
+ <!-- <img src="../assets/image/login-logo.png" width="120px;" /> -->
+ <div class="loginTitle">欢迎登录</div>
+ </div>
+ <div class="title">{{ "" }}</div>
+ <el-form-item prop="username" style="margin-top: 40px">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ auto-complete="off"
+ placeholder="请输入用户名"
+ class="username"
+ >
+ <img
+ slot="prefix"
+ src="../assets/images/Vector.png"
+ class="el-input__icon input-icon"
+ />
+ </el-input>
+ <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ auto-complete="off"
+ placeholder="请输入密码"
+ @keyup.enter.native="handleLogin"
+ class="password"
+ >
+ <img
+ slot="prefix"
+ src="../assets/images/locked.png"
+ class="el-input__icon input-icon"
+ />
+ </el-input>
+ <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
+ </el-form-item>
+ <Verify
+ @success="capctchaCheckSuccess"
+ :mode="'pop'"
+ :captchaType="'blockPuzzle'"
+ :imgSize="{ width: '330px', height: '155px' }"
+ ref="verify"
+ ></Verify>
+ <el-checkbox
+ v-model="loginForm.rememberMe"
+ style="margin: 40px 0px 20px 0px"
+ >记住密码</el-checkbox
+ >
+ <el-form-item style="width: 100%; text-align: center">
+ <el-button
+ :loading="loading"
+ size="medium"
+ type="goon"
+ style="width: 100%"
+ @click.native.prevent="handleLogin"
+ >
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ <div style="float: right" v-if="register">
+ <router-link class="link-type" :to="'/register'"
+ >立即注册</router-link
+ >
+ </div>
+ </el-form-item>
+ </el-form>
+
+ <!-- 底部 -->
+ <div class="el-login-footer">
+ <!-- <span>Copyright ©hamdell All Rights Reserved.</span> -->
+ </div>
+ </div>
+</template>
+
+<script>
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import Verify from "@/components/Verifition/Verify";
+import { getCaptchaOnOff } from "@/api/login.js";
+import { listOrder } from "@/api/payment/order";
+import { getUserDeptId } from "@/api/system/user";
+import { listTunnels } from "@/api/equipment/tunnel/api.js";
+import { getConfigKey } from "@/api/system/config.js";
+
+import Bg2 from "@screen/components/Decorations/bg-2.vue";
+
+export default {
+ components: { Verify, Bg2 },
+ name: "Login",
+ data() {
+ return {
+ title: "", // 系统标题
+ cookiePassword: "",
+ loginForm: {
+ // username: "admin",
+ // password: "dxc123!@#",
+ //dxc123!@#
+ username: "",
+ password: "",
+ rememberMe: false,
+ code: "",
+ uuid: "",
+ },
+ loginRules: {
+ username: [
+ { required: true, trigger: "blur", message: "请输入您的账号" },
+ ],
+ password: [
+ { required: true, trigger: "blur", message: "请输入您的密码" },
+ ],
+ },
+ loading: false,
+ // 验证码开关
+ captchaOnOff: false,
+ // 注册开关
+ register: false,
+ redirect: undefined,
+ };
+ },
+ watch: {
+ $route: {
+ handler: function (route) {
+ this.redirect = route.query && route.query.redirect;
+ },
+ immediate: true,
+ },
+ },
+ created() {
+ this.getCookie();
+ //this.getCaptchaOnOffFun();
+ this.title = systemConfig.title(systemConfig.systemType);
+ },
+ methods: {
+ // 获取验证码是否开启
+ getCaptchaOnOffFun() {
+ getCaptchaOnOff().then((response) => {
+ this.captchaOnOff = response.captchaOnOff;
+ });
+ },
+ // 验证码
+ capctchaCheckSuccess(params) {
+ this.loginForm.code = params.captchaVerification;
+ this.loading = true;
+ console.log(this.loginForm.rememberMe, "=======================");
+ if (this.loginForm.rememberMe == true) {
+ Cookies.set("username", this.loginForm.username, { expires: 30 });
+ Cookies.set("password", encrypt(this.loginForm.password), {
+ expires: 30,
+ });
+ Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+ } else {
+ Cookies.remove("username");
+ Cookies.remove("password");
+ Cookies.remove("rememberMe");
+ }
+ this.$store
+ .dispatch("Login", this.loginForm)
+ .then(() => {
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+ })
+ .catch(() => {
+ this.loading = false;
+ });
+ },
+ getCookie() {
+ const username = Cookies.get("username");
+ const password = Cookies.get("password");
+ const rememberMe = Cookies.get("rememberMe");
+ console.log("rem", rememberMe);
+ this.loginForm = {
+ username: username === undefined ? this.loginForm.username : username,
+ password:
+ password === undefined ? this.loginForm.password : decrypt(password),
+ rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+ };
+ },
+ handleLogin() {
+ if (this.captchaOnOff) {
+ this.$refs.loginForm.validate((valid) => {
+ if (valid) {
+ this.$refs.verify.show();
+ }
+ });
+ } else {
+ if (this.loginForm.rememberMe == true) {
+ Cookies.set("username", this.loginForm.username, { expires: 30 });
+ Cookies.set("password", encrypt(this.loginForm.password), {
+ expires: 30,
+ });
+ Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+ } else {
+ Cookies.remove("username");
+ Cookies.remove("password");
+ Cookies.remove("rememberMe");
+ }
+
+ this.$store
+ .dispatch("Login", this.loginForm)
+ .then(() => {
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+ // this.getManageStation();
+ })
+ .catch(() => {
+ this.loading = false;
+ });
+ }
+ },
+ getManageStation() {
+ getConfigKey("sd.moduleSwitch").then((res) => {
+ console.log(res, "管理站01");
+ this.$cache.local.set("manageStation", res.msg);
+ });
+ getConfigKey("sd.navigationBar").then((res) => {
+ console.log(res, "res");
+ let sideTheme = "theme-blue";
+ if (res.msg == "0") {
+ sideTheme = "theme-dark";
+ } else {
+ sideTheme = "theme-blue";
+ }
+ // console.log(res, "是否胡山隧道，胡山单独导航栏样式");
+ this.$cache.local.set("navigationBar", res.msg);
+ this.$store.dispatch("settings/changeSetting", {
+ key: "sideTheme",
+ value: sideTheme,
+ });
+ // this.sideTheme = val;
+ this.$cache.local.set(
+ "layout-setting",
+ `{
+ "topNav":${this.$store.state.settings.topNav},
+ "tagsView":${this.$store.state.settings.tagsView},
+ "weatherView":${this.$store.state.settings.weatherView},
+ "fixedHeader":${this.$store.state.settings.fixedHeader},
+ "sidebarLogo":${this.$store.state.settings.sidebarLogo},
+ "dynamicTitle":${this.$store.state.settings.dynamicTitle},
+ "sideTheme":"${sideTheme}",
+ "theme":"${this.$store.state.settings.theme}"
+ }`
+ );
+ // console.log(this.$store.state.settings.sideTheme)
+ });
+ },
+ },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input__inner {
+ background-color: transparent !important;
+ height: 100%;
+ font-size: 22px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ color: #07caf6;
+ margin-left: 68px;
+}
+
+::v-deep .el-checkbox__label {
+ color: #fff;
+ font-size: 18px !important;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ color: #ffffff !important;
+ margin-bottom: 10px;
+}
+
+::v-deep .el-form-item__error {
+ position: absolute;
+ top: 75px;
+}
+
+::v-deep .el-input__inner::placeholder {
+ color: #07caf6;
+}
+
+.login {
+ position: relative;
+ height: 100%;
+ background-image: url("../assets/images/login-background.png");
+ // background-size: 100% auto;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+}
+
+.login::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 120px;
+ background-image: url("../assets/images/login-head.png");
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ background-position: center center;
+}
+
+.title {
+ margin: 0px auto 10px auto;
+ font-size: 24px;
+ text-align: center;
+ color: #353f55;
+ letter-spacing: 2px;
+}
+
+.login-form::after {
+ content: "";
+ position: absolute;
+ left: -4px;
+ top: 0px;
+ width: 4px;
+ height: 100%;
+ background: linear-gradient(
+ 180deg,
+ #bdfff600 0%,
+ #bdfff6 50%,
+ #bdfff600 100%
+ );
+}
+
+.login-form::before {
+ content: "";
+ position: absolute;
+ right: -4px;
+ top: 0px;
+ width: 4px;
+ height: 100%;
+ background: linear-gradient(
+ 180deg,
+ #bdfff600 0%,
+ #bdfff6 50%,
+ #bdfff600 100%
+ );
+}
+
+.login-form {
+ position: absolute;
+ left: 50%;
+ top: 20%;
+ transform: translateX(-50%);
+ width: 400px;
+ height: 500px;
+ background: #00000080;
+ border-radius: 0px 0px 0px 0px;
+ opacity: 1;
+ border: 4px solid #0c5963;
+ padding: 50px;
+ // margin-left: 50%;
+
+ .loginTitle {
+ display: inline-flex;
+ width: 100%;
+ height: 45px;
+ font-size: 30px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 500;
+ color: #ffffff;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .el-input {
+ width: 300px;
+ height: 60px;
+ border-radius: 4px 4px 4px 4px;
+ opacity: 1;
+ border: 1px solid #01cffe;
+ background-color: transparent;
+ margin-bottom: 12px;
+
+ ::v-deep .el-input__inner {
+ font-size: 20px !important;
+ }
+
+ input {
+ border: 0;
+ height: 35px;
+ }
+ }
+
+ .input-icon {
+ height: 20px;
+ width: 20px;
+ margin-left: 2px;
+ position: relative;
+ left: 14px;
+ top: 18px;
+ }
+}
+
+.login-tip {
+ font-size: 13px;
+ text-align: center;
+ color: #bfbfbf;
+}
+
+.login-code {
+ width: 37%;
+ height: 35px;
+ float: right;
+
+ img {
+ cursor: pointer;
+ vertical-align: middle;
+ }
+}
+
+.el-login-footer {
+ height: 40px;
+ line-height: 40px;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ color: #fff;
+ font-family: Arial;
+ font-size: 12px;
+ letter-spacing: 1px;
+}
+
+.login-code-img {
+ height: 35px;
+}
+
+/* 重置按钮 */
+.el-button--goon {
+ font-size: 24px;
+ font-weight: 400;
+ color: #fff;
+ width: 380px;
+ height: 55px;
+ background: #07caf6;
+ border-radius: 4px;
+ opacity: 1;
+ border: none;
+}
+
+.el-button--goon:hover {
+}
+
+::v-deep .el-form-item__error {
+ top: 62px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index 6b0ab0a5..1f1ab1c8 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -1,43 +1,79 @@
<template>
<div class="login">
- <!-- <Bg2 style=" width: 600px; height:800px; position: fixed; left: 100px; top:100px">发多少刚发的刚发的</Bg2> -->
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
- <div style="
- width: 100%;
- text-align: center;
- padding-right: 20px;
- padding-bottom: 10px;
- ">
- <!-- <img src="../assets/image/login-logo.png" width="120px;" /> -->
- <div class="loginTitle">欢迎登录</div>
+ <div class="login-content">
+ <div class="login-l">
+ <div class="logo"><img src="../assets/images/login/logo.png" /></div>
+ <span>山东高速</span>
+ <span>济菏数字运营管理平台</span>
</div>
- <div class="title">{{ '' }}</div>
- <el-form-item prop="username" style="margin-top: 40px;">
- <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" class="username">
- <img slot="prefix" src="../assets/images/Vector.png" class="el-input__icon input-icon" />
- </el-input>
- <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
- </el-form-item>
- <el-form-item prop="password">
- <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码"
- @keyup.enter.native="handleLogin" class="password">
- <img slot="prefix" src="../assets/images/locked.png" class="el-input__icon input-icon" />
- </el-input>
- <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
- </el-form-item>
- <Verify @success="capctchaCheckSuccess" :mode="'pop'" :captchaType="'blockPuzzle'"
- :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
- <el-checkbox v-model="loginForm.rememberMe" style="margin:40px 0px 20px 0px;">记住密码</el-checkbox>
- <el-form-item style="width: 100%; text-align: center">
- <el-button :loading="loading" size="medium" type="goon" style="width: 100%" @click.native.prevent="handleLogin">
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- <div style="float: right" v-if="register">
- <router-link class="link-type" :to="'/register'">立即注册</router-link>
- </div>
- </el-form-item>
- </el-form>
+ <div class="login-r">
+ <span class="title">欢迎登录</span>
+ <img class="line" src="../assets/images/login/139.png" />
+ <el-form
+ ref="loginForm"
+ :model="loginForm"
+ :rules="loginRules"
+ class="login-form"
+ ><el-form-item prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ auto-complete="off"
+ placeholder="请输入用户名"
+ class="username"
+ >
+ <img
+ slot="prefix"
+ src="../assets/images/login/user.png"
+ class="el-input__icon input-icon"
+ />
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ auto-complete="off"
+ placeholder="请输入密码"
+ @keyup.enter.native="handleLogin"
+ class="password"
+ >
+ <img
+ slot="prefix"
+ src="../assets/images/login/password.png"
+ class="el-input__icon input-icon"
+ />
+ </el-input>
+ </el-form-item>
+ <Verify
+ @success="capctchaCheckSuccess"
+ :mode="'pop'"
+ :captchaType="'blockPuzzle'"
+ :imgSize="{ width: '330px', height: '155px' }"
+ ref="verify"
+ ></Verify>
+ <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+ <el-form-item>
+ <el-button
+ class="btn"
+ :loading="loading"
+ size="medium"
+ type="goon"
+ style="width: 100%"
+ @click.native.prevent="handleLogin"
+ >
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ <div style="float: right" v-if="register">
+ <router-link class="link-type" :to="'/register'"
+ >立即注册</router-link
+ >
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
<!-- 底部 -->
<div class="el-login-footer">
@@ -56,9 +92,7 @@ import { getUserDeptId } from "@/api/system/user";
import { listTunnels } from "@/api/equipment/tunnel/api.js";
import { getConfigKey } from "@/api/system/config.js";
-
-import Bg2 from "@screen/components/Decorations/bg-2.vue"
-
+import Bg2 from "@screen/components/Decorations/bg-2.vue";
export default {
components: { Verify, Bg2 },
@@ -132,7 +166,7 @@ export default {
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
- this.$router.push({ path: this.redirect || "/" }).catch(() => { });
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
@@ -158,7 +192,6 @@ export default {
}
});
} else {
-
if (this.loginForm.rememberMe == true) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
@@ -174,7 +207,7 @@ export default {
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
- this.$router.push({ path: this.redirect || "/" }).catch(() => { });
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
// this.getManageStation();
})
.catch(() => {
@@ -188,7 +221,7 @@ export default {
this.$cache.local.set("manageStation", res.msg);
});
getConfigKey("sd.navigationBar").then((res) => {
- console.log(res, "res")
+ console.log(res, "res");
let sideTheme = "theme-blue";
if (res.msg == "0") {
sideTheme = "theme-dark";
@@ -224,155 +257,170 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__inner {
- background-color: transparent !important;
- height: 100%;
- font-size: 22px;
- font-family: Source Han Sans CN, Source Han Sans CN;
+ background-color: #fff !important;
+ height: 34px;
+ font-size: 14px;
font-weight: 400;
- color: #07CAF6;
- margin-left: 68px;
+ color: #999999;
+ border: 1px solid rgba(0, 145, 67, 0.5);
+ // margin-left: 20px;
}
::v-deep .el-checkbox__label {
- color: #fff;
- font-size: 18px !important;
- font-family: Source Han Sans CN, Source Han Sans CN;
+ color: #999;
+ font-size: 12px !important;
font-weight: 400;
- color: #FFFFFF !important;
+ color: #999 !important;
margin-bottom: 10px;
+ margin-top: 20px;
}
-
-::v-deep .el-form-item__error {
- position: absolute;
- top: 75px;
-}
+// ::v-deep .el-form-item__error {
+// position: absolute;
+// top: 75px;
+// }
::v-deep .el-input__inner::placeholder {
- color: #07CAF6;
+ color: #999999;
}
.login {
position: relative;
height: 100%;
- background-image: url("../assets/images/login-background.png");
+ background-image: url("../assets/images/login/login-background.png");
// background-size: 100% auto;
background-repeat: no-repeat;
background-size: 100% 100%;
}
-.login::after {
- content: "";
- position: absolute;
- width: 100%;
- height: 120px;
- background-image: url('../assets/images/login-head.png');
- background-repeat: no-repeat;
- background-size: auto 100%;
- background-position: center center;
-}
-
-.title {
- margin: 0px auto 10px auto;
- font-size: 24px;
- text-align: center;
- color: #353f55;
- letter-spacing: 2px;
-}
-
-.login-form::after {
- content: "";
- position: absolute;
- left: -4px;
- top: 0px;
- width: 4px;
- height: 100%;
- background: linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%);
- ;
-}
-
-.login-form::before {
- content: "";
- position: absolute;
- right: -4px;
- top: 0px;
- width: 4px;
- height: 100%;
- background: linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%);
-}
-
-.login-form {
+.login-content {
position: absolute;
left: 50%;
- top: 20%;
+ top: 367px;
transform: translateX(-50%);
- width: 400px;
- height: 500px;
- background: #00000080;
- border-radius: 0px 0px 0px 0px;
- opacity: 1;
- border: 4px solid #0C5963;
- padding: 50px;
- // margin-left: 50%;
-
- .loginTitle {
- display: inline-flex;
- width: 100%;
- height: 45px;
- font-size: 30px;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 500;
- color: #FFFFFF;
- justify-content: center;
- align-items: center;
+ width: 700px;
+ height: 367px;
+ background: rgba(10, 82, 123, 0.6);
+ display: flex;
+ .login-l {
+ // width: 300px;
+ margin-top: 42px;
+ margin-left: 25px;
+ .logo {
+ width: 177px;
+ height: 135px;
+ margin: auto;
+ margin-bottom: 10px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ span {
+ display: block;
+ font-family: PingFang;
+ font-weight: 600;
+ font-size: 30px;
+ color: rgba(42, 217, 253, 0.7);
+ line-height: 35px;
+ text-align: center;
+ margin-top: 20px;
+ }
}
+ .login-r {
+ width: 320px;
+ height: 290px;
+ margin-right: 27px;
+ margin-top: 42px;
+ margin-left: 20px;
+ background: #c9e5eb;
+ padding: 25px 22px;
+
+ .title {
+ display: block;
+ width: 100%;
+ font-family: PingFang;
+ font-weight: 600;
+ font-size: 28px;
+ color: #009143;
+ text-align: center;
+ }
+ .line {
+ width: 210px;
+ height: 3px;
+ display: block;
+ margin: auto;
+ margin-bottom: 20px;
+ }
+ .btn {
+ margin: auto;
+ width: 155px;
+ height: 34px;
+ background: #009143;
+ border-radius: 1px;
+ color: #fff;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 5px;
+ }
+ }
+ // .loginTitle {
+ // display: inline-flex;
+ // width: 100%;
+ // height: 45px;
+ // font-size: 30px;
+ // font-family: Source Han Sans CN, Source Han Sans CN;
+ // font-weight: 500;
+ // color: #ffffff;
+ // justify-content: center;
+ // align-items: center;
+ // }
.el-input {
- width: 300px;
- height: 60px;
- border-radius: 4px 4px 4px 4px;
- opacity: 1;
- border: 1px solid #01CFFE;
- background-color: transparent;
- margin-bottom: 12px;
+ width: 275px;
+ height: 36px;
+ border-radius: 2px;
+ background: #fff;
+ padding-left: 20px;
::v-deep .el-input__inner {
- font-size: 20px !important;
+ font-size: 14px !important;
}
-
input {
border: 0;
- height: 35px;
+ height: 36px;
}
}
.input-icon {
height: 20px;
width: 20px;
- margin-left: 2px;
+ margin-right: 10px;
position: relative;
- left: 14px;
- top: 18px;
+ left: 10px;
+ top: 7px;
}
}
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
+// .login-tip {
+// font-size: 13px;
+// text-align: center;
+// color: #bfbfbf;
+// }
-.login-code {
- width: 37%;
- height: 35px;
- float: right;
+// .login-code {
+// width: 37%;
+// height: 35px;
+// float: right;
- img {
- cursor: pointer;
- vertical-align: middle;
- }
-}
+// img {
+// cursor: pointer;
+// vertical-align: middle;
+// }
+// }
.el-login-footer {
height: 40px;
@@ -395,18 +443,19 @@ export default {
.el-button--goon {
font-size: 24px;
font-weight: 400;
- color: #FFF;
+ color: #fff;
width: 380px;
height: 55px;
- background: #07CAF6;
+ background: #07caf6;
border-radius: 4px;
opacity: 1;
border: none;
}
-.el-button--goon:hover {}
+.el-button--goon:hover {
+}
-::v-deep .el-form-item__error{
- top:62px;
+::v-deep .el-form-item__error {
+ top: 62px;
}
</style>