联调数据清洗页面 绘制终端运行评价页面

src/views/pqs/runManage/runEvaluate/components/region.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="mt10 mr5 btnsBox">
+        <el-radio-group v-model="radio2">
+            <el-radio-button label="区域" value="1" />
+            <el-radio-button label="变电站" value="2" />
+            <el-radio-button label="用户" value="3" />
+        </el-radio-group>
+    </div>
+    <div :style="height">
+        <MyEChart :options="options" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+const radio2 = ref('1')
+const height = mainHeight(300, 1.5)
+const options = ref({})
+const info = () => {
+    let dataSource = [
+        { value: '90',  name: '张家口' },
+        { value: '80',  name: '廊坊' },
+        { value: '70',  name: '秦皇岛' },
+        { value: '60',  name: '唐山' },
+        { value: '50',  name: '承德' },
+    
+    ]
+    options.value = {
+        xAxis: {
+            type: 'value',
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#FFF'
+                }
+            },
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                show: true
+            }
+        },
+        grid: {
+            top: '10'
+        },
+        toolbox: {
+            show: false
+        },
+        options: {
+            yAxis: {
+                type: 'category',
+                data: dataSource.map(item => item.name),
+                axisLabel: {
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            dataZoom: null,
+            series: [
+                {
+                    type: 'bar',
+                    itemStyle: {
+                        color: function (params) {
+                            return params.value >= 90
+                                ? '#009900'
+                                : params.value >= 60
+                                ? '#FFCC00'
+                                : params.value > 0
+                                ? '#CC0000'
+                                : '#CCC'
+                        }
+                    },
+
+                    data: dataSource.map(item => item.value)
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+.btnsBox {
+    display: flex;
+    justify-content: end;
+}
+::v-deep .el-radio-button__inner {
+    padding: 8px 18px;
+    background: var(--el-color-primary);
+    border: 1px solid #00fff4;
+    border-radius: 0;
+    font-weight: normal;
+    color: #ffffff;
+    text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
+    opacity: 0.52;
+}
+::v-deep .el-radio-button:last-child .el-radio-button__inner {
+    border-radius: 0;
+}
+::v-deep .el-radio-button:first-child .el-radio-button__inner {
+    border-radius: 0;
+    border-left: 1px solid #00fff4;
+}
+::v-deep .is-active {
+    border: 1px solid #00fff4;
+    opacity: 1 !important;
+    color: #ffffff;
+    background: var(--el-color-primary);
+    
+    .el-radio-button__inner{
+        opacity: 1 !important;
+        border-left: 1px solid #00fff4 !important;
+    }
+}
+</style>