xyxj
/
CPCenterData
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

应急广播

master
chenchen 6 months ago
parent
e70821a463
commit
4f0329fadc
2 changed files with 102 additions and 15 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. 4
      config/index.js
  2. 113
      src/views/screen/emergency-screen-two.vue

4
config/index.js
View File

@ -12,7 +12,7 @@ module.exports = {
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
'/api': { '/api': {
target: 'http://192.168.111.144:9990', target: 'http://127.0.0.1:9990',
// target: 'http://60.255.186.185:9024/api', // target: 'http://60.255.186.185:9024/api',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
@ -21,7 +21,7 @@ module.exports = {
}, },
'/localImage': { '/localImage': {
// target: 'http://60.255.186.185:9024/', // target: 'http://60.255.186.185:9024/',
target: 'http://localhost:9990/', target: 'http://127.0.0.1:9990/',
changeOrigin: true, changeOrigin: true,
}, },
'/socket.io': { '/socket.io': {

113
src/views/screen/emergency-screen-two.vue
View File

@ -112,7 +112,7 @@
发布单位 发布单位
</div> </div>
<div class="table-title-item" style="width: 20%; text-align: right"> <div class="table-title-item" style="width: 20%; text-align: right">
调度状态 播发状态
</div> </div>
</div> </div>
<div class="table-body-box" style="height: 394px"> <div class="table-body-box" style="height: 394px">
@ -120,7 +120,8 @@
<div> <div>
<div v-for="( <div v-for="(
item, index item, index
) in infoTableData" :key="index" class="table-body-item"> ) in infoTableData" :key="index" class="table-body-item"
@click="currentInfo = item; infoState = true">
<div class="table-info-item" style=" <div class="table-info-item" style="
width: 20%; width: 20%;
text-align: left; text-align: left;
@ -131,21 +132,19 @@
{{ item.msgTitle }} {{ item.msgTitle }}
</div> </div>
<div class="table-info-item" style="width: 30%"> <div class="table-info-item" style="width: 30%">
{{ item.senderName }} {{ item.sendName }}
</div> </div>
<div class="table-info-item" style=" <div class="table-info-item" style="
width: 20%; width: 20%;
text-align: right; text-align: right;
" :style="{ " :style="{
color: color:
item.status == 1 item.broadcastState == 3
? 'green' ? 'green'
: 'red', : 'red',
}"> }">
{{ {{
item.status == 1 item.broadcastStateName
? "已调度"
: "未调度"
}} }}
</div> </div>
</div> </div>
@ -224,6 +223,72 @@
</div> </div>
</div> </div>
</CommonModal> </CommonModal>
<!-- 应急信息详情 -->
<CommonModal v-model="infoState" title="应急信息详情" width="500">
<div style="
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
">
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">事件类别：{{ currentInfo.eventTypeName }}</span>
</div>
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">事件标题：{{ currentInfo.msgTitle }}</span>
</div>
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">发布单位：{{ currentInfo.sendName }}</span>
</div>
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">发布时间：{{ currentInfo.sendTime }}</span>
</div>
<!-- 开始时间 -->
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">开始时间：{{ currentInfo.startTime }}</span>
</div>
<!-- 结束时间 -->
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">结束时间：{{ currentInfo.endTime }}</span>
</div>
<div style="
display: flex;
align-items: center;
margin-bottom: 20px;
">
<span style="font-size: 20px">播发状态：</span>
<Tag :color="currentInfo.broadcastState == '3' ? 'green' : 'red'">
{{ currentInfo.broadcastStateName }}
</Tag>
</div>
</div>
</CommonModal>
</div> </div>
</template> </template>
@ -276,6 +341,8 @@ export default {
r_barChart2: null, r_barChart2: null,
r_barChart3: null, r_barChart3: null,
r_barChart4: null, r_barChart4: null,
infoState: false,
currentInfo: {},
}; };
}, },
mounted() { mounted() {
@ -395,16 +462,29 @@ export default {
one: { one: {
name: "设备在线", name: "设备在线",
value: data.totalOnlineCount, value: data.totalOnlineCount,
color: '#01FF94'
}, },
two: { two: {
name: "设备离线", name: "设备离线",
value: data.totalOutlineCount, value: data.totalOutlineCount,
color: '#01A4FF'
} }
}); });
} }
} }
) )
}, },
blendColor(color, blend, percentage) {
const f = parseInt(color.slice(1), 16),
t = parseInt(blend.slice(1), 16),
R1 = f >> 16,
G1 = (f >> 8) & 0x00FF,
B1 = f & 0x0000FF;
const R2 = t >> 16,
G2 = (t >> 8) & 0x00FF,
B2 = t & 0x0000FF;
return `#${((1 << 24) + (Math.round((R2 - R1) * percentage) + R1 << 16) + (Math.round((G2 - G1) * percentage) + G1 << 8) + (Math.round((B2 - B1) * percentage) + B1)).toString(16).slice(1)}`;
},
// initBarChart // initBarChart
initBarChart(config) { initBarChart(config) {
this[config.id] = echarts.init(document.getElementById(config.id)); this[config.id] = echarts.init(document.getElementById(config.id));
@ -424,13 +504,13 @@ export default {
type: 'pie', type: 'pie',
radius: '50%', radius: '50%',
data: config.more ? [ data: config.more ? [
{ value: config.one.value, name: config.one.name }, { value: config.one.value, name: config.one.name, itemStyle: { color: this.blendColor(config.one.color, '#223455', 0.5) } },
{ value: config.two.value, name: config.two.name }, { value: config.two.value, name: config.two.name, itemStyle: { color: this.blendColor(config.two.color, '#223455', 0.5) } },
{ value: config.three.value, name: config.three.name }, { value: config.three.value, name: config.three.name, itemStyle: { color: this.blendColor(config.three.color, '#223455', 0.5) } },
{ value: config.four.value, name: config.four.name }, { value: config.four.value, name: config.four.name, itemStyle: { color: this.blendColor(config.four.color, '#223455', 0.5) } },
] : [ ] : [
{ value: config.one.value, name: config.one.name }, { value: config.one.value, name: config.one.name, itemStyle: { color: this.blendColor(config.one.color, '#223455', 0.5) } },
{ value: config.two.value, name: config.two.name }, { value: config.two.value, name: config.two.name, itemStyle: { color: this.blendColor(config.two.color, '#223455', 0.5) } },
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
@ -464,10 +544,12 @@ export default {
one: { one: {
name: "应急广播", name: "应急广播",
value: item.emergency, value: item.emergency,
color: '#01FF94'
}, },
two: { two: {
name: "日常广播", name: "日常广播",
value: item.daily, value: item.daily,
color: '#01A4FF'
} }
}); });
}) })
@ -478,18 +560,22 @@ export default {
one: { one: {
name: "一级", name: "一级",
value: item.broadcastLevelList[0].statistic, value: item.broadcastLevelList[0].statistic,
color: '#01FF94'
}, },
two: { two: {
name: "二级", name: "二级",
value: item.broadcastLevelList[1].statistic, value: item.broadcastLevelList[1].statistic,
color: '#01A4FF'
}, },
three: { three: {
name: "三级", name: "三级",
value: item.broadcastLevelList[2].statistic, value: item.broadcastLevelList[2].statistic,
color: '#01A494'
}, },
four: { four: {
name: "四级", name: "四级",
value: item.broadcastLevelList[3].statistic, value: item.broadcastLevelList[3].statistic,
color: '#02FDE4'
}, },
more: true more: true
}); });
@ -728,6 +814,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
cursor: pointer;
.table-info-item { .table-info-item {
text-align: center; text-align: center;

Write Preview
Loading…
Cancel
Save