mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改bug

wangqin
zhangzhang 1 year ago
parent
380ea3700b
commit
0cb65176e1
9 changed files with 396 additions and 273 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 230
      ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue
  4. 23
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
  5. 40
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
  6. 259
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
  7. 99
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
  8. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
  9. 4
      ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss

230
ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
View File

@ -1,12 +1,29 @@
<template> <template>
<ElForm :style="getStyle()" :model="modelFormData" :label-width="labelWidth" class="FormConfig" ref="ElFormRef" <ElForm
size="mini"> :style="getStyle()"
:model="modelFormData"
:label-width="labelWidth"
class="FormConfig"
ref="ElFormRef"
size="mini"
>
<template v-for="(item, index) in formList"> <template v-for="(item, index) in formList">
<ElFormItem class="formItem" :rules="getRules(item)" v-if="formItemVisible(item)" :key="`${item.key}|${index}`" <ElFormItem
:label="item.label" :style="gridStyle(item, index)" :prop="item.type !== 'MultipleLabelItem' ? item.key : void 0" class="formItem"
:required="item.required"> :rules="getRules(item)"
v-if="formItemVisible(item)"
:key="`${item.key}|${index}`"
:label="item.label"
:style="gridStyle(item, index)"
:prop="item.type !== 'MultipleLabelItem' ? item.key : void 0"
:required="item.required"
>
<slot :name="item.key" :data="item" :formData="modelFormData"> <slot :name="item.key" :data="item" :formData="modelFormData">
<ProxyCom :value="getValue(item)" :item="item" @update:value="data => updateValue(item, data)" /> <ProxyCom
:value="getValue(item)"
:item="item"
@update:value="(data) => updateValue(item, data)"
/>
<!-- <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="modelFormData[item.key]" <!-- <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="modelFormData[item.key]"
v-on="resolveListeners(item.ons)" /> --> v-on="resolveListeners(item.ons)" /> -->
</slot> </slot>
@ -22,20 +39,27 @@ import { set as pathSet, get as pathGet, cloneDeep } from "lodash";
import ProxyCom from "./Proxy.vue"; import ProxyCom from "./Proxy.vue";
const files = require.context('./components', true, /^.\/[^/]+\/index\.vue$|^.\/[^/]+.vue$/); const files = require.context(
"./components",
true,
/^.\/[^/]+\/index\.vue$|^.\/[^/]+.vue$/
);
const components = files.keys().reduce((prev, key) => { const components = files.keys().reduce(
prev[key.match(/[^./]+/g)[0]] = files(key).default; (prev, key) => {
prev[key.match(/[^./]+/g)[0]] = files(key).default;
return prev; return prev;
}, { },
Empty: 'div' {
}) Empty: "div",
}
);
export default { export default {
name: 'FormConfig', name: "FormConfig",
components: { components: {
ProxyCom ProxyCom,
}, },
provide() { provide() {
return { return {
@ -45,8 +69,8 @@ export default {
getValue: this.getValue, getValue: this.getValue,
updateValue: this.updateValue, updateValue: this.updateValue,
parent: this, parent: this,
getRules: this.getRules getRules: this.getRules,
} };
}, },
props: { props: {
/** /**
@ -62,7 +86,7 @@ export default {
*/ */
dFormData: { dFormData: {
type: Object, type: Object,
default: () => { } default: () => {},
}, },
/** /**
* { * {
@ -78,37 +102,37 @@ export default {
value: Object, value: Object,
formList: { formList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
labelWidth: { labelWidth: {
type: String, type: String,
default: "auto" default: "auto",
}, },
rules: { rules: {
type: Object, type: Object,
default: null default: null,
}, },
column: { column: {
type: [String, Number], type: [String, Number],
default: "3" default: "3",
} },
}, },
model: { model: {
prop: 'value', prop: "value",
event: "update:value" event: "update:value",
}, },
data() { data() {
return { return {
formData: {} formData: {},
} };
}, },
watch: { watch: {
formList: { formList: {
immediate: true, immediate: true,
handler() { handler() {
this.reset(true); this.reset(true);
} },
} },
}, },
// created() { // created() {
// this.reset(true); // this.reset(true);
@ -120,60 +144,69 @@ export default {
}, },
set(data) { set(data) {
this.formData = data; this.formData = data;
this.$emit('update:value', this.formData); this.$emit("update:value", this.formData);
} },
}, },
gridStyle() { gridStyle() {
return (item, index) => ({ return (item, index) => ({
gridRow: `span ${item.gridRow || 1}`, gridRow: `span ${item.gridRow || 1}`,
gridColumn: `span ${item.gridColumn || item.isAlone && this.column || 1}`, gridColumn: `span ${
}) item.gridColumn || (item.isAlone && this.column) || 1
}`,
});
}, },
formItemVisible() { formItemVisible() {
return item => { return (item) => {
const result = item && item.visible ? item.visible(this.modelFormData) : true; const result =
item && item.visible ? item.visible(this.modelFormData) : true;
// if (!result) { // if (!result) {
// delete this.formData[item.key]; // delete this.formData[item.key];
// } // }
return result; return result;
} };
} },
}, },
methods: { methods: {
getValue(item) { getValue(item) {
return pathGet(this.formData, item.key) return pathGet(this.formData, item.key);
}, },
updateValue(item, data) { updateValue(item, data) {
// 对于数组的修改无响应式 采用此方法 // 对于数组的修改无响应式 采用此方法
this.modelFormData = { ...pathSet(this.modelFormData, item.key, data) } this.modelFormData = { ...pathSet(this.modelFormData, item.key, data) };
}, },
reset(isFirst) { reset(isFirst) {
return this.modelFormData = reduceDefaultValue(this.formList, isFirst ? this.value || this.dFormData : {}); console.log(23, isFirst);
return (this.modelFormData = reduceDefaultValue(
this.formList,
isFirst ? this.value || this.dFormData : {}
));
}, },
getStyle() { getStyle() {
return { return {
gridTemplateColumns: `repeat(${this.column}, 1fr)`, gridTemplateColumns: `repeat(${this.column}, 1fr)`,
} };
}, },
getBindData(item) { getBindData(item) {
let componentKey = resolveName(item.type || 'input'); let componentKey = resolveName(item.type || "input");
return { return {
placeholder: "请输入", placeholder: "请输入",
...(defaultComponentOptions[componentKey]), ...defaultComponentOptions[componentKey],
...item.options ...item.options,
} };
}, },
getComponent(type) { getComponent(type) {
if (!type) type = 'input'; if (!type) type = "input";
const componentKey = resolveName(type); const componentKey = resolveName(type);
const ElComponentKey = `El${componentKey}`; const ElComponentKey = `El${componentKey}`;
return components[componentKey] || components[ElComponentKey] || ElComponentKey; return (
components[componentKey] || components[ElComponentKey] || ElComponentKey
);
}, },
getRules(item) { getRules(item) {
// 自定义的没添加 // 自定义的没添加
@ -199,60 +232,72 @@ export default {
for (let index = 0; index < rules.length; index++) { for (let index = 0; index < rules.length; index++) {
const rule = rules[index]; const rule = rules[index];
// 返回值 true 通过 false 异常 // 返回值 true 通过 false 异常
if (typeof rule.callback === 'function') { if (typeof rule.callback === "function") {
if (!rule.callback(value, this.modelFormData)) return new Error(rule.message || "内容错误"); if (!rule.callback(value, this.modelFormData))
} return new Error(rule.message || "内容错误");
else if (RegexpMap[rule.type]) { } else if (RegexpMap[rule.type]) {
if (!RegexpMap[rule.type].reg.test(value)) return new Error(rule.message || RegexpMap[rule.type].message) if (!RegexpMap[rule.type].reg.test(value))
return new Error(rule.message || RegexpMap[rule.type].message);
} }
} }
} };
if (item.required) return [ if (item.required)
{ return [
validator: (_, __, callback) => { {
const value = pathGet(this.modelFormData, item.key) validator: (_, __, callback) => {
if (!value && typeof value != 'number' || typeof value === 'string' && !value.trim() || typeof value === 'object' && value.length == 0) return callback(new Error(`${item.options?.placeholder || `${item.label}不能为空`}`)) const value = pathGet(this.modelFormData, item.key);
if (
const err = ruleMatch(value); (!value && typeof value != "number") ||
(typeof value === "string" && !value.trim()) ||
if (err) return callback(err) (typeof value === "object" && value.length == 0)
)
callback() return callback(
new Error(
`${item.options?.placeholder || `${item.label}不能为空`}`
)
);
const err = ruleMatch(value);
if (err) return callback(err);
callback();
},
trigger: ["blur", "change"],
}, },
trigger: ["blur", "change"], ];
}, else if (item.rules?.length)
] return [
else if (item.rules?.length) return [ {
{ validator: (_, __, callback) => {
validator: (_, __, callback) => { /**
/** * @type {{ callback?: (value: any) => boolean; type?: "phone"; message: string; }[]}
* @type {{ callback?: (value: any) => boolean; type?: "phone"; message: string; }[]} */
*/
const err = ruleMatch(pathGet(this.modelFormData, item.key));
const err = ruleMatch(pathGet(this.modelFormData, item.key));
if (err) return callback(err);
if (err) return callback(err)
callback();
callback() },
trigger: ["blur", "change"],
}, },
trigger: ["blur", "change"], ];
},
]
}, },
validate() { validate() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$refs.ElFormRef.validate((bool) => { this.$refs.ElFormRef.validate((bool) => {
if (bool) resolve(cloneDeep(this.modelFormData)) if (bool) resolve(cloneDeep(this.modelFormData));
else reject("表单验证未通过") else reject("表单验证未通过");
}) });
}) });
} },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.list-item { .list-item {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
@ -283,7 +328,6 @@ export default {
align-items: center; align-items: center;
} }
::v-deep { ::v-deep {
.el-form-item { .el-form-item {
align-items: center; align-items: center;
@ -307,7 +351,7 @@ export default {
font-size: 15px; font-size: 15px;
// font-family: PingFang SC, PingFang SC; // font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #3DE8FF; color: #3de8ff;
line-height: unset; line-height: unset;
// -webkit-background-clip: text; // -webkit-background-clip: text;
// -webkit-text-fill-color: transparent; // -webkit-text-fill-color: transparent;

2
ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
View File

@ -133,7 +133,7 @@ export default {
}, },
handleResetForm() { handleResetForm() {
this.$refs.FormConfigRef?.reset(); this.$refs.FormConfigRef?.reset();
this.$refs.FormConfigRef.$refs.ElFormRef.resetFields();
this.$refs.PopoverRef.doClose(); this.$refs.PopoverRef.doClose();
this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData)); this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData));

2
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue
View File

@ -63,7 +63,7 @@ div.el-popper.global-input-search-popover {
position: relative; position: relative;
padding-top: 36px; padding-top: 36px;
transform: translateY(24px); transform: translateY(24px);
margin-top: 6vh; // margin-top: 6vh;
.body { .body {
.title { .title {

23
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
View File

@ -3,15 +3,15 @@ import * as echarts from "echarts";
let options = { let options = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "rgba(17,95,182,0.5)", // backgroundColor: "rgba(17,95,182,0.5)",
textStyle: { // textStyle: {
color: "#fff", // color: "#fff",
}, // },
formatter: function (params) { // formatter: function (params) {
return ( // return (
params[0].name + params[0].seriesName + ": " + params[0].value + "%" // params[0].name + params[0].seriesName + ": " + params[0].value + "%"
); // );
}, // },
}, },
grid: { grid: {
left: "2%", left: "2%",
@ -135,7 +135,7 @@ let options = {
series: [ series: [
// 下半截柱状图 // 下半截柱状图
{ {
name: "", name: "在线率",
type: "bar", type: "bar",
barWidth: 12, barWidth: 12,
barGap: "-100%", barGap: "-100%",
@ -178,6 +178,9 @@ let options = {
opacity: 0.1, opacity: 0.1,
}, },
data: [], data: [],
tooltip: {
show: false,
},
}, },
], ],
}; };

40
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
View File

@ -27,85 +27,85 @@ export const searchFormList = [
{ {
label: "时间范围:", label: "时间范围:",
key: "time", key: "time",
// required: true, required: true,
type: "datePicker", type: "datePicker",
options: { options: {
format:"yyyy-MM-dd", format: "yyyy-MM-dd",
type: "daterange", type: "daterange",
}, },
}, },
{ {
label: "设备类型:", label: "设备类型:",
key: "type", key: "type",
// required: true, required: true,
type: "select", type: "select",
options: { options: {
options: [ options: [
{ {
value: "1", value: "1",
label: "高清网络枪型固定摄像机", label: "高清网络枪型固定摄像机",
}, },
{ {
value: "2", value: "2",
label: "高清网络球形摄像机", label: "高清网络球形摄像机",
}, },
{ {
value: "3", value: "3",
label: "桥下高清网络球形摄像机", label: "桥下高清网络球形摄像机",
}, },
{ {
value: "4", value: "4",
label: "360°全景摄像机", label: "360°全景摄像机",
}, },
{ {
value: "5", value: "5",
label: "180°全景摄像机", label: "180°全景摄像机",
}, },
{ {
value: "6", value: "6",
label: "门架式可变信息标志", label: "门架式可变信息标志",
}, },
{ {
value: "7", value: "7",
label: "雨棚可变信息标志", label: "雨棚可变信息标志",
}, },
{ {
value: "8", value: "8",
label: "站前悬臂式可变信息标志", label: "站前悬臂式可变信息标志",
}, },
{ {
value: "9", value: "9",
label: "气象检测器", label: "气象检测器",
}, },
{ {
value: "10", value: "10",
label: "路段语音广播系统", label: "路段语音广播系统",
}, },
{ {
value: "11", value: "11",
label: "护栏碰撞预警系统", label: "护栏碰撞预警系统",
}, },
{ {
value: "12", value: "12",
label: "毫米波雷达", label: "毫米波雷达",
}, },
{ {
value: "13", value: "13",
label: "合流区预警系统", label: "合流区预警系统",
}, },
{ {
value: "14", value: "14",
label: "激光疲劳唤醒", label: "激光疲劳唤醒",
}, },
{ {
value: "15", value: "15",
label: "一类交通量调查站", label: "一类交通量调查站",
}, },
{ {
value: "16", value: "16",
label: "智能行车诱导系统", label: "智能行车诱导系统",
}, },
{ {
value: "17", value: "17",
label: "智能设备箱", label: "智能设备箱",
}, },

259
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
View File

@ -1,41 +1,78 @@
<template> <template>
<div class='statisticAnalysis'> <div class="statisticAnalysis">
<el-tabs class="saContent" v-model="activeName" @tab-click="changeTabs"> <el-tabs class="saContent" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="设备分析" name="first" class="deviceAnalysis"> <el-tab-pane label="设备分析" name="first" class="deviceAnalysis">
<DeviceSummary class="deviceSummary" :dataList="equipments"></DeviceSummary> <DeviceSummary
class="deviceSummary"
:dataList="equipments"
></DeviceSummary>
<div class="bottomTabs"> <div class="bottomTabs">
<DeviceUptime :dataList="equipments" class="tabs-lo" /> <DeviceUptime :dataList="equipments" class="tabs-lo" />
<MonthlyEquipment class="tabs-mo" :dataList="equipments" /> <MonthlyEquipment class="tabs-mo" :dataList="equipments" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设备查询" name="second"> <el-tab-pane label="设备查询" name="second">
<div class="topdiv"> <div class="topdiv">
<div class="left-div"> <div class="left-div">
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" @click="onRefreshData">刷新</el-button> <el-button
<el-button size="mini" icon="el-icon-download" class="btnSearch" size="mini"
@click="SystemStatusExport">导出Excel</el-button> icon="el-icon-refresh-left"
class="btnSearch"
@click="onRefreshData"
>刷新</el-button
>
<el-button
size="mini"
icon="el-icon-download"
class="btnSearch"
@click="SystemStatusExport"
>导出Excel</el-button
>
</div> </div>
<div class="right-div"> <div class="right-div">
<InputSearch :formList="searchFormList" @handleSearch="handleSearch" /> <InputSearch
:formList="searchFormList"
@handleSearch="handleSearch"
/>
<!-- :placeholder="searchText" --> <!-- :placeholder="searchText" -->
</div> </div>
</div> </div>
<div class="queryChart"> <div class="queryChart">
<!-- v-if="isEmpty01" --> <!-- v-if="isEmpty01" -->
<Empty v-if="isEmpty01" class="floatEmpty" :text="emptyText01"></Empty> <Empty
<div ref="queryChart" class="keep-ratio"> v-if="isEmpty01"
</div> class="floatEmpty"
:text="emptyText01"
></Empty>
<div ref="queryChart" class="keep-ratio"></div>
</div> </div>
<div style="position: relative;"> <div style="position: relative">
<Empty v-if="isEmpty02" class="floatEmpty" :text="emptyText02"></Empty> <Empty
<el-table :border="false" :data="tableData" height="480" header-align="left" empty-text=" "> v-if="isEmpty02"
class="floatEmpty"
:text="emptyText02"
></Empty>
<el-table
:border="false"
:data="tableData"
height="480"
header-align="left"
empty-text=" "
>
<el-table-column prop="order" label="序号" width="80"> <el-table-column prop="order" label="序号" width="80">
</el-table-column> </el-table-column>
<el-table-column prop="deviceName" label="设备名称"></el-table-column> <el-table-column
prop="deviceName"
label="设备名称"
></el-table-column>
<el-table-column prop="deviceNo" label="设备桩号" width=""> <el-table-column prop="deviceNo" label="设备桩号" width="">
</el-table-column> </el-table-column>
<el-table-column prop="direction" label="方向" class-name="showClass" width=""> <el-table-column
prop="direction"
label="方向"
class-name="showClass"
width=""
>
</el-table-column> </el-table-column>
<el-table-column prop="deviceIp" label="设备IP" width=""> <el-table-column prop="deviceIp" label="设备IP" width="">
</el-table-column> </el-table-column>
@ -69,13 +106,21 @@
<el-table-column prop="deviceStatus" label="设备状态" width=""> <el-table-column prop="deviceStatus" label="设备状态" width="">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.deviceStatus == 1">在线</div> <div v-if="scope.row.deviceStatus == 1">在线</div>
<div v-if="scope.row.deviceStatus == 0" style="color: #BBB;">离线</div> <div v-if="scope.row.deviceStatus == 0" style="color: #bbb">
离线
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="foot"> <div class="foot">
<Pagination @current-change="changePage" width="'100%'" :page-size="pageSize" :current-page.sync="pageIndex" <Pagination
layout="total, sizes, prev, pager, next" :total="pageTotal"> @current-change="changePage"
width="'100%'"
:page-size="pageSize"
:current-page.sync="pageIndex"
layout="total, sizes, prev, pager, next"
:total="pageTotal"
>
</Pagination> </Pagination>
</div> </div>
</div> </div>
@ -85,28 +130,32 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import DeviceUptime from './components/deviceUptime'; import DeviceUptime from "./components/deviceUptime";
import MonthlyEquipment from './components/monthlyEquipment'; import MonthlyEquipment from "./components/monthlyEquipment";
import DeviceSummary from './components/deviceSummary'; import DeviceSummary from "./components/deviceSummary";
import { getSystemStatusList, getSystemStatusTabList, getSystemStatusType, getSystemStatusExport } from "../../../../../api/MonthlyEquipment"; import {
import { download } from '../../../../../utils/request.js'; getSystemStatusList,
import Pagination from '@screen/components/Pagination.vue'; getSystemStatusTabList,
import InputSearch from '@screen/components/InputSearch/index.vue'; getSystemStatusType,
getSystemStatusExport,
} from "../../../../../api/MonthlyEquipment";
import { download } from "../../../../../utils/request.js";
import Pagination from "@screen/components/Pagination.vue";
import InputSearch from "@screen/components/InputSearch/index.vue";
import { searchFormList } from "./data"; import { searchFormList } from "./data";
import { Loading } from 'element-ui'; import { Loading } from "element-ui";
import { first } from "lodash"; import { first } from "lodash";
export default { export default {
name: 'publicService', name: "publicService",
components: { components: {
DeviceUptime, DeviceUptime,
MonthlyEquipment, MonthlyEquipment,
Pagination, Pagination,
InputSearch, InputSearch,
DeviceSummary DeviceSummary,
}, },
data() { data() {
return { return {
@ -143,32 +192,35 @@ export default {
equipments: [], equipments: [],
activeName: "first", activeName: "first",
tableData: [], tableData: [],
interval: null interval: null,
} };
}, },
destroyed() { destroyed() {
clearInterval(this.interval); clearInterval(this.interval);
}, },
methods: { methods: {
initData() { initData() {
this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
this.time = moment().format("YYYY-MM-DD HH:mm:ss");
this.typeQuery = searchFormList[1].options.options[0].value;
console.log(8888, this.startTime, this.time, this.typeQuery);
clearInterval(this.interval); clearInterval(this.interval);
if (this.activeName == "first") { if (this.activeName == "first") {
this.initDevice(); this.initDevice();
} else if (this.activeName == 'second') { } else if (this.activeName == "second") {
this.queryChart = echarts.init(this.$refs["queryChart"]); this.queryChart = echarts.init(this.$refs["queryChart"]);
this.queryChart.setOption(chartsStatistics); this.queryChart.setOption(chartsStatistics);
this.initQueryChart();
this.initQueryTable(1);
} }
this.interval = setInterval(() => { this.interval = setInterval(() => {
if (this.activeName == "first") { if (this.activeName == "first") {
this.initDevice(); this.initDevice();
} }
}, 30000) }, 30000);
}, },
changePage(page) { changePage(page) {
this.initQueryTable(page); this.initQueryTable(page);
}, },
formatDate(val) { formatDate(val) {
@ -185,19 +237,23 @@ export default {
if (!this.typeQuery || !this.startTime) { if (!this.typeQuery || !this.startTime) {
this.$message({ this.$message({
message: "请先设置查询条件！", message: "请先设置查询条件！",
type: "warning" type: "warning",
}) });
return return;
} }
this.initQueryChart(); this.initQueryChart();
this.initQueryTable(1); this.initQueryTable(1);
}, },
handleSearch(data) { handleSearch(data) {
console.log(777, data);
this.typeQuery = data.type; this.typeQuery = data.type;
this.startTime = this.formatDate(data.time[0]); this.startTime = this.formatDate(data.time[0]);
this.time = this.formatDate(data.time[1]); this.time = this.formatDate(data.time[1]);
let typeText = this.searchFormList[1].options.options[this.typeQuery - 1].label; let typeText =
this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; this.searchFormList[1].options.options[this.typeQuery - 1].label;
this.searchText = `${moment(this.startTime).format(
"YYYY年MM月DD日"
)}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`;
this.initQueryChart(); this.initQueryChart();
this.initQueryTable(1); this.initQueryTable(1);
}, },
@ -210,45 +266,49 @@ export default {
}, },
//导出 //导出
SystemStatusExport() { SystemStatusExport() {
let loadingInstance = Loading.service({ fullscreen: true, background: "#00000052", text: "文件正在下载..." }); let loadingInstance = Loading.service({
fullscreen: true,
background: "#00000052",
text: "文件正在下载...",
});
getSystemStatusExport({ getSystemStatusExport({
startTime: this.startTime, startTime: this.startTime,
time: this.time, time: this.time,
type: this.typeQuery, type: this.typeQuery,
}).then((res) => {
console.log(res);
const url = window.URL.createObjectURL(new Blob([res]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '设备统计信息.xlsx')
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href) // 释放URL 对象
document.body.removeChild(link)
link = null
loadingInstance.close();
}).catch(err => {
Message.error(err);
loadingInstance.close();
}) })
.then((res) => {
console.log(res);
const url = window.URL.createObjectURL(new Blob([res]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", "设备统计信息.xlsx");
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href); // 释放URL 对象
document.body.removeChild(link);
link = null;
loadingInstance.close();
})
.catch((err) => {
Message.error(err);
loadingInstance.close();
});
}, },
initDevice() { //设备在线离线率接口 initDevice() {
//设备在线离线率接口
getSystemStatusType().then((res) => { getSystemStatusType().then((res) => {
if (IS_TESTING && (!res.data || res.msg == "暂无数据")) { if (IS_TESTING && (!res.data || res.msg == "暂无数据")) {
this.equipments = []; this.equipments = [];
this.equipSeries.forEach(item => { this.equipSeries.forEach((item) => {
this.equipments.push({ this.equipments.push({
title: item, title: item,
total: Math.floor(Math.random() * 600) + 800, total: Math.floor(Math.random() * 600) + 800,
pctOnl: Math.floor(100 * Math.random()) + "%", pctOnl: Math.floor(100 * Math.random()) + "%",
pctOffl: "25%", pctOffl: "25%",
pctLose: "15%" pctLose: "15%",
}); });
}); });
return; return;
} }
@ -260,8 +320,8 @@ export default {
total: val.sum, total: val.sum,
pctOnl: val.sucessRate, pctOnl: val.sucessRate,
pctLose: val.failRate, pctLose: val.failRate,
pctOffl: val.lostRate pctOffl: val.lostRate,
} };
if (key.includes("全部设备")) { if (key.includes("全部设备")) {
allList.unshift(item); allList.unshift(item);
} else { } else {
@ -269,23 +329,21 @@ export default {
} }
} }
this.equipments = allList; this.equipments = allList;
}) });
}, },
setStatus(id, status) { setStatus(id, status) {
if (status == "doing") { if (status == "doing") {
this["isEmpty" + id] = true this["isEmpty" + id] = true;
this["emptyText" + id] = "数据查询中..." this["emptyText" + id] = "数据查询中...";
} else if (status == "empty") { } else if (status == "empty") {
this["isEmpty" + id] = true this["isEmpty" + id] = true;
this["emptyText" + id] = "暂无数据..." this["emptyText" + id] = "暂无数据...";
} else if (status == "finish") { } else if (status == "finish") {
this["isEmpty" + id] = false this["isEmpty" + id] = false;
this["emptyText" + id] = "" this["emptyText" + id] = "";
} }
}, },
initQueryChart() { initQueryChart() {
this.setStatus("01", "doing"); this.setStatus("01", "doing");
getSystemStatusList({ getSystemStatusList({
@ -294,15 +352,13 @@ export default {
type: this.typeQuery, type: this.typeQuery,
}).then((res) => { }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
if (res.data && Object.keys(res.data).length > 0) { if (res.data && Object.keys(res.data).length > 0) {
this.setStatus("01", "finish"); this.setStatus("01", "finish");
let origin = res.data; let origin = res.data;
let startStamp = +moment(this.startTime).startOf('day').format("x"); let startStamp = +moment(this.startTime).startOf("day").format("x");
let endStamp = +moment(this.time).endOf('day').format("x"); let endStamp = +moment(this.time).endOf("day").format("x");
let oneDay = 86400000; let oneDay = 86400000;
let daysTotal = Math.ceil((endStamp - startStamp) / oneDay); let daysTotal = Math.ceil((endStamp - startStamp) / oneDay);
let queryChartData = []; let queryChartData = [];
@ -325,16 +381,11 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.queryChart.setOption(chartsStatistics); this.queryChart.setOption(chartsStatistics);
}); });
} else { } else {
this.setStatus("01", "empty"); this.setStatus("01", "empty");
} }
} }
}) });
}, },
//查询列表 //查询列表
initQueryTable(pageIndex, pageSize = 30) { initQueryTable(pageIndex, pageSize = 30) {
@ -354,24 +405,22 @@ export default {
this.pageTotal = res.total; this.pageTotal = res.total;
this.tableData = res.rows; this.tableData = res.rows;
this.tableData.forEach((it, index) => { this.tableData.forEach((it, index) => {
it.order = (pageIndex - 1) * (pageSize) + index + 1; it.order = (pageIndex - 1) * pageSize + index + 1;
}) });
} else { } else {
this.setStatus("02", "empty"); this.setStatus("02", "empty");
} }
} }
}) });
} },
}, },
mounted() { mounted() {
this.initData(); this.initData();
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.floatEmpty { .floatEmpty {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
@ -407,7 +456,7 @@ export default {
} }
.btnSearch { .btnSearch {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px; margin-left: 10px;
border-color: transparent; border-color: transparent;
color: #fff; color: #fff;
@ -419,7 +468,7 @@ export default {
::v-deep .el-table .el-table__header-wrapper th { ::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important; background-color: #064258 !important;
color: #00D1FF; color: #00d1ff;
border-color: #064258 !important; border-color: #064258 !important;
border: 0px !important; border: 0px !important;
font-size: 14px; font-size: 14px;
@ -444,17 +493,17 @@ export default {
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:hover td {
background: #1b2528 !important; background: #1b2528 !important;
color: #00D1FF; color: #00d1ff;
height: 47px; height: 47px;
} }
::v-deep .el-table tr:nth-child(odd) td { ::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272F; background-color: #13272f;
border: 0px !important; border: 0px !important;
} }
@ -475,7 +524,7 @@ export default {
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
min-width: 128px; min-width: 128px;
position: relative; position: relative;
left: 10px; left: 10px;
@ -494,7 +543,8 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
.deviceAnalysis {} .deviceAnalysis {
}
} }
.topdiv { .topdiv {
@ -519,7 +569,6 @@ export default {
margin: auto; margin: auto;
margin-top: 15px; margin-top: 15px;
height: 160px; height: 160px;
} }
.queryChart { .queryChart {
@ -533,7 +582,7 @@ export default {
margin-bottom: 30px; margin-bottom: 30px;
--keep-ratio: scaleX(1); --keep-ratio: scaleX(1);
>div { > div {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -548,7 +597,7 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
@ -556,7 +605,6 @@ export default {
width: calc(25%); width: calc(25%);
margin-right: 20px; margin-right: 20px;
} }
.content-mi { .content-mi {
@ -565,7 +613,6 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -583,7 +630,5 @@ export default {
width: 49.4%; width: 49.4%;
} }
} }
} }
</style> </style>

99
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
View File

@ -3,6 +3,14 @@ var options = {
tooltip: { tooltip: {
show: true, show: true,
trigger: "axis", trigger: "axis",
formatter: (params) => {
return `${params[0].name.replace(/-/g, "")}${params[1].name.replace(
/-/g,
""
)}<br/>${params[0].marker}${params[0].seriesName} : ${
params[0].value
} 辆`;
},
}, },
axisPointer: { axisPointer: {
link: [ link: [
@ -28,22 +36,38 @@ var options = {
{ {
type: "category", type: "category",
data: [ data: [
"枢纽", " ",
"立交", " ",
"立交", " ",
"枢纽", " ",
"立交", " ",
"立交", " ",
"立交", " ",
"枢纽", " ",
"立交", " ",
"立交", " ",
"枢纽", " ",
"立交", " ",
"立交", " ",
"枢纽", " ",
"立交", " ",
"枢纽", " ",
// "枢纽",
// "立交",
// "立交",
// "枢纽",
// "立交",
// "立交",
// "立交",
// "枢纽",
// "立交",
// "立交",
// "枢纽",
// "立交",
// "立交",
// "枢纽",
// "立交",
// "枢纽",
], ],
axisLabel: { axisLabel: {
color: "#ffffff", color: "#ffffff",
@ -63,26 +87,31 @@ var options = {
type: "category", type: "category",
z: 10, z: 10,
data: [ data: [
"殷家林", "殷家林-枢纽",
"大学城", "大学城-枢纽",
"长清", "长清-枢纽",
"松竹", "松竹-枢纽",
"孝里", "孝里-枢纽",
"安城", "安城-枢纽",
"平阴", "平阴-枢纽",
"孔村", "孔村-枢纽",
"平阴南", "平阴南-枢纽",
"东平", "东平-枢纽",
"东平湖", "东平湖-枢纽",
"韩岗", "韩岗-枢纽",
"梁山", "梁山-枢纽",
"鄄郓", "鄄郓-枢纽",
"嘉祥西", "嘉祥西-枢纽",
"王官中", "王官中-枢纽",
], ],
position: "top", position: "top",
axisLabel: { axisLabel: {
color: "#ffffff", color: "#fff",
margin: -20,
formatter: function (params) {
let value = params.split("-");
return `${value[0]}\n\n${value[1]}`;
},
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -131,7 +160,7 @@ var options = {
], ],
series: [ series: [
{ {
name: "", name: "济南方向",
type: "line", type: "line",
symbolSize: 0, symbolSize: 0,
lineStyle: { lineStyle: {
@ -164,7 +193,7 @@ var options = {
], ],
}, },
{ {
name: "", name: "菏泽方向",
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 0, symbolSize: 0,

6
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
View File

@ -1,7 +1,7 @@
var res = [ var res = [
{ value: 50, name: "情报板发布" }, { value: 50, name: "审核通过" },
{ value: 20, name: "微博发布" }, { value: 20, name: "审核未通过" },
{ value: 30, name: "服务网站" }, { value: 30, name: "待审核" },
]; ];
// var res = this.evaluatedCountList; // var res = this.evaluatedCountList;
var data1 = [], var data1 = [],

4
ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss
View File

@ -328,7 +328,9 @@ div.el-picker-panel.el-date-range-picker.el-popper {
} }
} }
} }
.el-date-range-picker .el-picker-panel__body {
min-width: 405px;
}
div.el-scrollbar { div.el-scrollbar {
.el-scrollbar__wrap { .el-scrollbar__wrap {
/** /**

Write Preview
Loading…
Cancel
Save