|
|
@@ -4,105 +4,150 @@
|
|
|
@click.stop="preventDefault"
|
|
|
@mouseleave="leaveFun"
|
|
|
>
|
|
|
- <div class="dialog-title">
|
|
|
- <img src="@/assets/images/main/cont_title_bg.png" />
|
|
|
- <div class="title">各单位终端数据</div>
|
|
|
- </div>
|
|
|
+<!-- <div class="dialog-title">-->
|
|
|
+<!-- <img src="@/assets/images/main/cont_title_bg.png" />-->
|
|
|
+<!-- <div class="title">资源台账</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="dialog-cont">-->
|
|
|
+<!-- <div class="dialog-left">-->
|
|
|
+<!-- <div class="dialog-list">-->
|
|
|
+
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
<div class="dialog-cont">
|
|
|
<div class="dialog-left">
|
|
|
+ <div class="content-title long">
|
|
|
+ <span class="title">公务车实有数</span>
|
|
|
+ </div>
|
|
|
<div class="dialog-list">
|
|
|
<div class="content-left">
|
|
|
- <div class="content-title">
|
|
|
- <span class="title">终端设备整体在线率</span>
|
|
|
+ <div class="dialog-list">
|
|
|
+ <div class=" content-our">
|
|
|
+ <div class="content-two">
|
|
|
+ <div class="img-car">
|
|
|
+ <img src="@/assets/images/main/choose_bg9.png">
|
|
|
+ </div>
|
|
|
+ <div class="data-snd">
|
|
|
+ <div class="names">56<span class="nums">万辆</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="saddddf">
|
|
|
+ <div class="naw">车辆用途</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="charts-cont">
|
|
|
+ <pie-chart
|
|
|
+ :chart-data="pieData"
|
|
|
+ :legend="pieLegend"
|
|
|
+ :center="pieCenter"
|
|
|
+ width="220px"
|
|
|
+ height="140px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="content">
|
|
|
- <div class="rate-area">
|
|
|
- <img
|
|
|
- src="@/assets/images/main/rate_bg.png"
|
|
|
- class="icon"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="rate">
|
|
|
- <div class="rate-data">
|
|
|
- <div class="data">56</div>
|
|
|
- <div class="unit">%</div>
|
|
|
+ <div class="dialog-list">
|
|
|
+ <div>
|
|
|
+ <div class="naw">车辆类型</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="charts-cont">
|
|
|
+ <pie-chart
|
|
|
+ :chart-data="totalPieData"
|
|
|
+ :legend="totalPieLegend"
|
|
|
+ :center="totalCenter"
|
|
|
+ width="220px"
|
|
|
+ height="140px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="naw">动力类型</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="charts-cont">
|
|
|
+ <pie-chart
|
|
|
+ :chart-data="catePieData"
|
|
|
+ :legend="catePieLegend"
|
|
|
+ :center="catePieCenter"
|
|
|
+ width="220px"
|
|
|
+ height="140px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="desc">整体在线率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-area">
|
|
|
+ <div class="contentr-left" >
|
|
|
+ <div class="dialog-item wid100">
|
|
|
+ <div class="content-title">
|
|
|
+ <span class="title">公务车编制概况</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="content-maper">
|
|
|
+ <div class="content-one">
|
|
|
+ <div class="img-car">
|
|
|
+ <img src="@/assets/images/main/choose_bg9.png">
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="namer">公务车编制数</div>
|
|
|
+ <div class="names">56<span class="nums">万辆</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-maper">
|
|
|
+ <div class="content-one">
|
|
|
+ <div class="img-car">
|
|
|
+ <img src="@/assets/images/main/choose_bg9.png">
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="namer">公务车缺勤率</div>
|
|
|
+ <div class="names">56<span class="nums">%</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="content-right">
|
|
|
- <div class="content-title">
|
|
|
- <span class="title">设备在线数</span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="data-content flex-row align-items-center">
|
|
|
- <div class="data-left">
|
|
|
- <div class="data-item">
|
|
|
- <div class="data-fir">
|
|
|
- <img
|
|
|
- src="@/assets/images/service_new/img_2.png"
|
|
|
- class="icon"
|
|
|
- />
|
|
|
- <div class="name">离线数</div>
|
|
|
- </div>
|
|
|
- <div class="data-snd">
|
|
|
- <div class="num">56</div>
|
|
|
- <div class="unit">个</div>
|
|
|
+ <div class="dialog-item wid100">
|
|
|
+ <div class="content-title">
|
|
|
+ <span class="title">公务车年度车辆数</span>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="content">
|
|
|
+ <div class="rate-area">
|
|
|
+ <img src="@/assets/images/main/rate_bg.png" class="img-car" alt="" />
|
|
|
+ <div class="rate">
|
|
|
+ <div class="rate-data">
|
|
|
+ <div class="data">56</div>
|
|
|
+ <div class="unit">%</div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">整体在线率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="data-fir">
|
|
|
- <img
|
|
|
- src="@/assets/images/service_new/img_1.png"
|
|
|
- class="icon"
|
|
|
- />
|
|
|
- <div class="name">在线数</div>
|
|
|
- </div>
|
|
|
- <div class="data-snd">
|
|
|
- <div class="num">56</div>
|
|
|
- <div class="unit">个</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="content">
|
|
|
+ <div class="rate-area">
|
|
|
+ <img src="@/assets/images/main/rate_bg.png" class="img-car" alt="" />
|
|
|
+ <div class="rate">
|
|
|
+ <div class="rate-data">
|
|
|
+ <div class="data">56</div>
|
|
|
+ <div class="unit">%</div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">整体在线率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="data-right">
|
|
|
- <pie-chart
|
|
|
- position="left"
|
|
|
- :chart-data="pieData"
|
|
|
- :legend="pieLegend"
|
|
|
- :center="pieCenter"
|
|
|
- :radius="pieRadius"
|
|
|
- width="150px"
|
|
|
- height="150px"
|
|
|
- />
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="dialog-list">
|
|
|
- <div class="dialog-item wid100">
|
|
|
- <div class="content-title long">
|
|
|
- <span class="title">各单位终端设备在线情况</span>
|
|
|
- </div>
|
|
|
- <div class="data-chart">
|
|
|
- <!-- <div class="choose-area flex-row align-items-center">
|
|
|
- <div class="choose-item">年度统计</div>
|
|
|
- <div class="choose-item">2024年</div>
|
|
|
- </div>-->
|
|
|
- <bar-chart
|
|
|
- :chart-data="barData"
|
|
|
- :x-axis="barAxis"
|
|
|
- :y-axis="barYAxis"
|
|
|
- :grid="barGrid"
|
|
|
- :legend="barLegend"
|
|
|
- y-color="#FFF"
|
|
|
- l-color="#FFF"
|
|
|
- width="500px"
|
|
|
- height="300px"
|
|
|
- />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -113,11 +158,6 @@
|
|
|
<span class="title">各单位车辆预警统计列表</span>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <!-- <div class="choose-area flex-row align-items-center">-->
|
|
|
- <!-- <div class="choose-item">单位</div>-->
|
|
|
- <!-- <div class="choose-item">异动类型</div>-->
|
|
|
- <!-- <div class="choose-item">预警排序</div>-->
|
|
|
- <!-- </div>-->
|
|
|
<div class="list-area">
|
|
|
<div class="list-item list-title">
|
|
|
<div class="item item-1">序号</div>
|
|
|
@@ -134,14 +174,7 @@
|
|
|
class="list-item"
|
|
|
>
|
|
|
<div class="item item-1">{{ index + 1 }}</div>
|
|
|
- <!-- <el-tooltip
|
|
|
- class="item"
|
|
|
- effect="dark"
|
|
|
- L:content="item.name"
|
|
|
- placement="top-start"
|
|
|
- > -->
|
|
|
<div class="item item-2">{{ item.name }}</div>
|
|
|
- <!-- </el-tooltip> -->
|
|
|
<div class="item item-3">{{ item.data1 }}</div>
|
|
|
<div class="item item-4">{{ item.data2 }}</div>
|
|
|
<div class="item item-5">{{ item.data3 }}</div>
|
|
|
@@ -154,7 +187,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -175,10 +207,50 @@ export default {
|
|
|
return {
|
|
|
//在线数
|
|
|
pieData: [],
|
|
|
+ catePieData: [
|
|
|
+ { value: 40, name: "新能源汽车" },
|
|
|
+ { value: 20, name: "燃油汽车" },
|
|
|
+ ],
|
|
|
+ totalPieData: [
|
|
|
+ { value: 110, name: "商务车" },
|
|
|
+ { value: 120, name: "越野车" },
|
|
|
+ { value: 130, name: "小型客车" },
|
|
|
+ { value: 140, name: "大型客车" },
|
|
|
+ { value: 150, name: "小轿车" },
|
|
|
+ ],
|
|
|
+ catePieLegend: {
|
|
|
+ orient: "vertical",
|
|
|
+ top: 60,
|
|
|
+ right: 23,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ totalPieLegend: {
|
|
|
+ top: 20,
|
|
|
+ right: 10,
|
|
|
+ itemWidth: 8,
|
|
|
+ itemHeight: 8,
|
|
|
+ orient: "vertical",
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
pieLegend: {
|
|
|
- show: false,
|
|
|
+ orient: "vertical",
|
|
|
+ top: 50,
|
|
|
+ right: 30,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
},
|
|
|
- pieCenter: ["50%", "50%"],
|
|
|
+ pieCenter: ["27%", "50%"],
|
|
|
+ totalCenter: ["30%", "50%"],
|
|
|
+ catePieCenter: ["27%", "50%"],
|
|
|
pieRadius: ["35%", "50%"],
|
|
|
|
|
|
//各单位终端在线
|
|
|
@@ -599,7 +671,7 @@ export default {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between !important;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 0px;
|
|
|
|
|
|
.dialog-item {
|
|
|
width: calc(50% - 20px);
|
|
|
@@ -645,7 +717,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
- margin-top: 20px;
|
|
|
.title-format {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
@@ -706,7 +777,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
- margin-top: 20px;
|
|
|
.title-format {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
@@ -1004,7 +1074,92 @@ export default {
|
|
|
width: 3px;
|
|
|
height: 3px;
|
|
|
}
|
|
|
+ .content-left{
|
|
|
+ width: 520px;
|
|
|
+ height:320px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .content-our{
|
|
|
+ width: 50%;
|
|
|
+ height: 130px;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 40px;
|
|
|
+ padding-left: 10px;
|
|
|
+ //align-items: center;
|
|
|
+ .img-car{
|
|
|
+ width: 105px;
|
|
|
+ height: 81px;
|
|
|
+ }
|
|
|
+ .content-two{
|
|
|
+ width: 181.5px;
|
|
|
+ height: 81px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .names{
|
|
|
+ font-size: 32px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ .nums{
|
|
|
+ font-size:10px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
|
|
|
+ left:2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .saddddf{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ }
|
|
|
+ .naw{
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .content-area {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px 20px 0 15px;
|
|
|
+ }
|
|
|
+ .contentr-left{
|
|
|
+ width: 520px;
|
|
|
+ height:240px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .content-right{
|
|
|
+ width: 520px;
|
|
|
+ height:240px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .content-one{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ height: 100%; /* 确保父容器有高度 */
|
|
|
+ }
|
|
|
+ .names{
|
|
|
+ font-size: 32px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ .nums{
|
|
|
+ font-size:10px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ left:2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .namer{
|
|
|
+ color: white;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
//滑块部分
|
|
|
// border-radius: 5px;
|
|
|
@@ -1019,4 +1174,3 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
-
|
psguo