igds-v4-whjl.git

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试圆仓温度图</title>
    <style type="text/css">
    </style>
</head>
 
<body>
 
    <canvas id="canvas" width="1200" height="620" style="border:1px solid #000000;">
        当前浏览器不支持Canvas，请更换浏览器后再试!!
    </canvas>
    <button onclick="last()" value="上一个">上一个</button>
    <button onclick="next()" value="下一个">下一个</button>
    <button onclick="clockSwitch()" value="下一个">切换时针</button>
    <input type="text" id="rotate" placeholder="输入液位高度"/>
    <input type="button" value="确定" onclick="rotate()"/>
    <button onclick="display_all()" value="全显示">全显示</button>
    <button onclick="display_outside()" value="外显示">外显示</button>
    <button onclick="display_inside()" value="内显示">内显示</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 
        //定义数据
        var listPoints = [{'lay': 0, 'cir': 1, 'rows': 0, 'val': 11.11}, {'lay': 0, 'cir': 1, 'rows': 1, 'val': 22.22}, {'lay': 0, 'cir': 1, 'rows': 2, 'val': 33.33}, {'lay': 0, 'cir': 1, 'rows': 3, 'val': 44.44}, {'lay': 0, 'cir': 2, 'rows': 0, 'val': 33.33}, {'lay': 0, 'cir': 2, 'rows': 1, 'val': -1.96}, {'lay': 0, 'cir': 2, 'rows': 2, 'val': 16.45}, {'lay': 0, 'cir': 2, 'rows': 3, 'val': 13.43}, {'lay': 0, 'cir': 3, 'rows': 0, 'val': 12.23}, {'lay': 0, 'cir': 3, 'rows': 1, 'val': 32.78}, {'lay': 0, 'cir': 3, 'rows': 2, 'val': 0.2}, {'lay': 0, 'cir': 3, 'rows': 3, 'val': 15.49}, {'lay': 0, 'cir': 3, 'rows': 4, 'val': 36.79}, {'lay': 0, 'cir': 3, 'rows': 5, 'val': 37.03}, {'lay': 0, 'cir': 3, 'rows': 6, 'val': 0.78}, {'lay': 0, 'cir': 3, 'rows': 7, 'val': 2.71}, {'lay': 0, 'cir': 4, 'rows': 0, 'val': 30.74}, {'lay': 0, 'cir': 4, 'rows': 1, 'val': 38.02}, {'lay': 0, 'cir': 4, 'rows': 2, 'val': 8.71}, {'lay': 0, 'cir': 4, 'rows': 3, 'val': 8.41}, {'lay': 0, 'cir': 4, 'rows': 4, 'val': 19.8}, {'lay': 0, 'cir': 4, 'rows': 5, 'val': 21.57}, {'lay': 0, 'cir': 4, 'rows': 6, 'val': -3.66}, {'lay': 0, 'cir': 4, 'rows': 7, 'val': 2.5}, {'lay': 0, 'cir': 4, 'rows': 8, 'val': -2.65}, {'lay': 0, 'cir': 4, 'rows': 9, 'val': 31.49}, {'lay': 1, 'cir': 1, 'rows': 0, 'val': 11.61}, {'lay': 1, 'cir': 1, 'rows': 1, 'val': 35.19}, {'lay': 1, 'cir': 1, 'rows': 2, 'val': 0.38}, {'lay': 1, 'cir': 1, 'rows': 3, 'val': 32.75}, {'lay': 1, 'cir': 2, 'rows': 0, 'val': 3.09}, {'lay': 1, 'cir': 2, 'rows': 1, 'val': 6.55}, {'lay': 1, 'cir': 2, 'rows': 2, 'val': 30.48}, {'lay': 1, 'cir': 2, 'rows': 3, 'val': 21.03}, {'lay': 1, 'cir': 3, 'rows': 0, 'val': 24.74}, {'lay': 1, 'cir': 3, 'rows': 1, 'val': 23.34}, {'lay': 1, 'cir': 3, 'rows': 2, 'val': 16.98}, {'lay': 1, 'cir': 3, 'rows': 3, 'val': -1.43}, {'lay': 1, 'cir': 3, 'rows': 4, 'val': 9.69}, {'lay': 1, 'cir': 3, 'rows': 5, 'val': 11.59}, {'lay': 1, 'cir': 3, 'rows': 6, 'val': 32.18}, {'lay': 1, 'cir': 3, 'rows': 7, 'val': 14.51}, {'lay': 1, 'cir': 4, 'rows': 0, 'val': 5.19}, {'lay': 1, 'cir': 4, 'rows': 1, 'val': 23.23}, {'lay': 1, 'cir': 4, 'rows': 2, 'val': 34.23}, {'lay': 1, 'cir': 4, 'rows': 3, 'val': 21.03}, {'lay': 1, 'cir': 4, 'rows': 4, 'val': 38.94}, {'lay': 1, 'cir': 4, 'rows': 5, 'val': 32.12}, {'lay': 1, 'cir': 4, 'rows': 6, 'val': 37.0}, {'lay': 1, 'cir': 4, 'rows': 7, 'val': 27.21}, {'lay': 1, 'cir': 4, 'rows': 8, 'val': 23.67}, {'lay': 1, 'cir': 4, 'rows': 9, 'val': 2.37}, {'lay': 2, 'cir': 1, 'rows': 0, 'val': 19.11}, {'lay': 2, 'cir': 1, 'rows': 1, 'val': 34.9}, {'lay': 2, 'cir': 1, 'rows': 2, 'val': 0.06}, {'lay': 2, 'cir': 1, 'rows': 3, 'val': 6.2}, {'lay': 2, 'cir': 2, 'rows': 0, 'val': 30.69}, {'lay': 2, 'cir': 2, 'rows': 1, 'val': 8.35}, {'lay': 2, 'cir': 2, 'rows': 2, 'val': 9.45}, {'lay': 2, 'cir': 2, 'rows': 3, 'val': 5.46}, {'lay': 2, 'cir': 3, 'rows': 0, 'val': 18.33}, {'lay': 2, 'cir': 3, 'rows': 1, 'val': -0.27}, {'lay': 2, 'cir': 3, 'rows': 2, 'val': -5.14}, {'lay': 2, 'cir': 3, 'rows': 3, 'val': 11.33}, {'lay': 2, 'cir': 3, 'rows': 4, 'val': -2.7}, {'lay': 2, 'cir': 3, 'rows': 5, 'val': 2.19}, {'lay': 2, 'cir': 3, 'rows': 6, 'val': 2.16}, {'lay': 2, 'cir': 3, 'rows': 7, 'val': 23.08}, {'lay': 2, 'cir': 4, 'rows': 0, 'val': -3.42}, {'lay': 2, 'cir': 4, 'rows': 1, 'val': 32.94}, {'lay': 2, 'cir': 4, 'rows': 2, 'val': 30.6}, {'lay': 2, 'cir': 4, 'rows': 3, 'val': 4.74}, {'lay': 2, 'cir': 4, 'rows': 4, 'val': 21.23}, {'lay': 2, 'cir': 4, 'rows': 5, 'val': 34.62}, {'lay': 2, 'cir': 4, 'rows': 6, 'val': 30.55}, {'lay': 2, 'cir': 4, 'rows': 7, 'val': 21.23}, {'lay': 2, 'cir': 4, 'rows': 8, 'val': 9.47}, {'lay': 2, 'cir': 4, 'rows': 9, 'val': 34.82}, {'lay': 3, 'cir': 1, 'rows': 0, 'val': 7.14}, {'lay': 3, 'cir': 1, 'rows': 1, 'val': 28.63}, {'lay': 3, 'cir': 1, 'rows': 2, 'val': 25.98}, {'lay': 3, 'cir': 1, 'rows': 3, 'val': -6.62}, {'lay': 3, 'cir': 2, 'rows': 0, 'val': 33.44}, {'lay': 3, 'cir': 2, 'rows': 1, 'val': 25.0}, {'lay': 3, 'cir': 2, 'rows': 2, 'val': 10.81}, {'lay': 3, 'cir': 2, 'rows': 3, 'val': 33.1}, {'lay': 3, 'cir': 3, 'rows': 0, 'val': 21.59}, {'lay': 3, 'cir': 3, 'rows': 1, 'val': 24.03}, {'lay': 3, 'cir': 3, 'rows': 2, 'val': 29.27}, {'lay': 3, 'cir': 3, 'rows': 3, 'val': 7.71}, {'lay': 3, 'cir': 3, 'rows': 4, 'val': 4.49}, {'lay': 3, 'cir': 3, 'rows': 5, 'val': 10.03}, {'lay': 3, 'cir': 3, 'rows': 6, 'val': -2.01}, {'lay': 3, 'cir': 3, 'rows': 7, 'val': -0.25}, {'lay': 3, 'cir': 4, 'rows': 0, 'val': 10.26}, {'lay': 3, 'cir': 4, 'rows': 1, 'val': 10.5}, {'lay': 3, 'cir': 4, 'rows': 2, 'val': 31.69}, {'lay': 3, 'cir': 4, 'rows': 3, 'val': 25.72}, {'lay': 3, 'cir': 4, 'rows': 4, 'val': 38.44}, {'lay': 3, 'cir': 4, 'rows': 5, 'val': 17.86}, {'lay': 3, 'cir': 4, 'rows': 6, 'val': -8.14}, {'lay': 3, 'cir': 4, 'rows': 7, 'val': 23.3}, {'lay': 3, 'cir': 4, 'rows': 8, 'val': 34.72}, {'lay': 3, 'cir': 4, 'rows': 9, 'val': 3.76}, {'lay': 4, 'cir': 1, 'rows': 0, 'val': -7.49}, {'lay': 4, 'cir': 1, 'rows': 1, 'val': 6.56}, {'lay': 4, 'cir': 1, 'rows': 2, 'val': 4.58}, {'lay': 4, 'cir': 1, 'rows': 3, 'val': -0.75}, {'lay': 4, 'cir': 2, 'rows': 0, 'val': 0.46}, {'lay': 4, 'cir': 2, 'rows': 1, 'val': 23.75}, {'lay': 4, 'cir': 2, 'rows': 2, 'val': 37.21}, {'lay': 4, 'cir': 2, 'rows': 3, 'val': -2.45}, {'lay': 4, 'cir': 3, 'rows': 0, 'val': 23.01}, {'lay': 4, 'cir': 3, 'rows': 1, 'val': -5.52}, {'lay': 4, 'cir': 3, 'rows': 2, 'val': -5.97}, {'lay': 4, 'cir': 3, 'rows': 3, 'val': 2.56}, {'lay': 4, 'cir': 3, 'rows': 4, 'val': 36.87}, {'lay': 4, 'cir': 3, 'rows': 5, 'val': 38.77}, {'lay': 4, 'cir': 3, 'rows': 6, 'val': 11.91}, {'lay': 4, 'cir': 3, 'rows': 7, 'val': 37.08}, {'lay': 4, 'cir': 4, 'rows': 0, 'val': -4.19}, {'lay': 4, 'cir': 4, 'rows': 1, 'val': 22.83}, {'lay': 4, 'cir': 4, 'rows': 2, 'val': 4.34}, {'lay': 4, 'cir': 4, 'rows': 3, 'val': 2.65}, {'lay': 4, 'cir': 4, 'rows': 4, 'val': 35.65}, {'lay': 4, 'cir': 4, 'rows': 5, 'val': 6.77}, {'lay': 4, 'cir': 4, 'rows': 6, 'val': 9.46}, {'lay': 4, 'cir': 4, 'rows': 7, 'val': -1.92}, {'lay': 4, 'cir': 4, 'rows': 8, 'val': 24.29}, {'lay': 4, 'cir': 4, 'rows': 9, 'val': 13.38}, {'lay': 5, 'cir': 1, 'rows': 0, 'val': 3.19}, {'lay': 5, 'cir': 1, 'rows': 1, 'val': 24.89}, {'lay': 5, 'cir': 1, 'rows': 2, 'val': 5.59}, {'lay': 5, 'cir': 1, 'rows': 3, 'val': 23.76}, {'lay': 5, 'cir': 2, 'rows': 0, 'val': 26.26}, {'lay': 5, 'cir': 2, 'rows': 1, 'val': 27.03}, {'lay': 5, 'cir': 2, 'rows': 2, 'val': 15.93}, {'lay': 5, 'cir': 2, 'rows': 3, 'val': 15.25}, {'lay': 5, 'cir': 3, 'rows': 0, 'val': 2.14}, {'lay': 5, 'cir': 3, 'rows': 1, 'val': 28.12}, {'lay': 5, 'cir': 3, 'rows': 2, 'val': 7.74}, {'lay': 5, 'cir': 3, 'rows': 3, 'val': 2.84}, {'lay': 5, 'cir': 3, 'rows': 4, 'val': 3.53}, {'lay': 5, 'cir': 3, 'rows': 5, 'val': 10.07}, {'lay': 5, 'cir': 3, 'rows': 6, 'val': 6.9}, {'lay': 5, 'cir': 3, 'rows': 7, 'val': 16.83}, {'lay': 5, 'cir': 4, 'rows': 0, 'val': -3.5}, {'lay': 5, 'cir': 4, 'rows': 1, 'val': 33.37}, {'lay': 5, 'cir': 4, 'rows': 2, 'val': 3.42}, {'lay': 5, 'cir': 4, 'rows': 3, 'val': 37.68}, {'lay': 5, 'cir': 4, 'rows': 4, 'val': -6.79}, {'lay': 5, 'cir': 4, 'rows': 5, 'val': 31.23}, {'lay': 5, 'cir': 4, 'rows': 6, 'val': 39.85}, {'lay': 5, 'cir': 4, 'rows': 7, 'val': -9.32}, {'lay': 5, 'cir': 4, 'rows': 8, 'val': 17.6}, {'lay': 5, 'cir': 4, 'rows': 9, 'val': 6.87}, {'lay': 6, 'cir': 1, 'rows': 0, 'val': 33.95}, {'lay': 6, 'cir': 1, 'rows': 1, 'val': 28.63}, {'lay': 6, 'cir': 1, 'rows': 2, 'val': 10.64}, {'lay': 6, 'cir': 1, 'rows': 3, 'val': 2.93}, {'lay': 6, 'cir': 2, 'rows': 0, 'val': 16.03}, {'lay': 6, 'cir': 2, 'rows': 1, 'val': 11.2}, {'lay': 6, 'cir': 2, 'rows': 2, 'val': -5.12}, {'lay': 6, 'cir': 2, 'rows': 3, 'val': -8.5}, {'lay': 6, 'cir': 3, 'rows': 0, 'val': 21.38}, {'lay': 6, 'cir': 3, 'rows': 1, 'val': 31.76}, {'lay': 6, 'cir': 3, 'rows': 2, 'val': 15.29}, {'lay': 6, 'cir': 3, 'rows': 3, 'val': 15.12}, {'lay': 6, 'cir': 3, 'rows': 4, 'val': 17.65}, {'lay': 6, 'cir': 3, 'rows': 5, 'val': 24.83}, {'lay': 6, 'cir': 3, 'rows': 6, 'val': -2.94}, {'lay': 6, 'cir': 3, 'rows': 7, 'val': 11.7}, {'lay': 6, 'cir': 4, 'rows': 0, 'val': 6.4}, {'lay': 6, 'cir': 4, 'rows': 1, 'val': 35.02}, {'lay': 6, 'cir': 4, 'rows': 2, 'val': -5.72}, {'lay': 6, 'cir': 4, 'rows': 3, 'val': 34.04}, {'lay': 6, 'cir': 4, 'rows': 4, 'val': 27.69}, {'lay': 6, 'cir': 4, 'rows': 5, 'val': 7.63}, {'lay': 6, 'cir': 4, 'rows': 6, 'val': -9.3}, {'lay': 6, 'cir': 4, 'rows': 7, 'val': 12.17}, {'lay': 6, 'cir': 4, 'rows': 8, 'val': -0.81}, {'lay': 6, 'cir': 4, 'rows': 9, 'val': 3.95}, {'lay': 7, 'cir': 1, 'rows': 0, 'val': 27.1}, {'lay': 7, 'cir': 1, 'rows': 1, 'val': 38.57}, {'lay': 7, 'cir': 1, 'rows': 2, 'val': 26.84}, {'lay': 7, 'cir': 1, 'rows': 3, 'val': 22.42}, {'lay': 7, 'cir': 2, 'rows': 0, 'val': -6.93}, {'lay': 7, 'cir': 2, 'rows': 1, 'val': 39.7}, {'lay': 7, 'cir': 2, 'rows': 2, 'val': -1.74}, {'lay': 7, 'cir': 2, 'rows': 3, 'val': 38.46}, {'lay': 7, 'cir': 3, 'rows': 0, 'val': 22.06}, {'lay': 7, 'cir': 3, 'rows': 1, 'val': -5.31}, {'lay': 7, 'cir': 3, 'rows': 2, 'val': 29.23}, {'lay': 7, 'cir': 3, 'rows': 3, 'val': 12.19}, {'lay': 7, 'cir': 3, 'rows': 4, 'val': -2.66}, {'lay': 7, 'cir': 3, 'rows': 5, 'val': 28.0}, {'lay': 7, 'cir': 3, 'rows': 6, 'val': 35.23}, {'lay': 7, 'cir': 3, 'rows': 7, 'val': 26.67}, {'lay': 7, 'cir': 4, 'rows': 0, 'val': -2.66}, {'lay': 7, 'cir': 4, 'rows': 1, 'val': -3.66}, {'lay': 7, 'cir': 4, 'rows': 2, 'val': 29.47}, {'lay': 7, 'cir': 4, 'rows': 3, 'val': -6.21}, {'lay': 7, 'cir': 4, 'rows': 4, 'val': 29.19}, {'lay': 7, 'cir': 4, 'rows': 5, 'val': 1.14}, {'lay': 7, 'cir': 4, 'rows': 6, 'val': 6.18}, {'lay': 7, 'cir': 4, 'rows': 7, 'val': 13.29}, {'lay': 7, 'cir': 4, 'rows': 8, 'val': 24.74}, {'lay': 7, 'cir': 4, 'rows': 9, 'val': 25.98}, {'lay': 8, 'cir': 1, 'rows': 0, 'val': 30.05}, {'lay': 8, 'cir': 1, 'rows': 1, 'val': -9.78}, {'lay': 8, 'cir': 1, 'rows': 2, 'val': 17.82}, {'lay': 8, 'cir': 1, 'rows': 3, 'val': 15.09}, {'lay': 8, 'cir': 2, 'rows': 0, 'val': 12.92}, {'lay': 8, 'cir': 2, 'rows': 1, 'val': -4.22}, {'lay': 8, 'cir': 2, 'rows': 2, 'val': 15.2}, {'lay': 8, 'cir': 2, 'rows': 3, 'val': 13.06}, {'lay': 8, 'cir': 3, 'rows': 0, 'val': 21.2}, {'lay': 8, 'cir': 3, 'rows': 1, 'val': 12.49}, {'lay': 8, 'cir': 3, 'rows': 2, 'val': 3.18}, {'lay': 8, 'cir': 3, 'rows': 3, 'val': 14.83}, {'lay': 8, 'cir': 3, 'rows': 4, 'val': 7.82}, {'lay': 8, 'cir': 3, 'rows': 5, 'val': 31.31}, {'lay': 8, 'cir': 3, 'rows': 6, 'val': 26.01}, {'lay': 8, 'cir': 3, 'rows': 7, 'val': 17.42}, {'lay': 8, 'cir': 4, 'rows': 0, 'val': -1.33}, {'lay': 8, 'cir': 4, 'rows': 1, 'val': 4.65}, {'lay': 8, 'cir': 4, 'rows': 2, 'val': -0.31}, {'lay': 8, 'cir': 4, 'rows': 3, 'val': 39.64}, {'lay': 8, 'cir': 4, 'rows': 4, 'val': 20.94}, {'lay': 8, 'cir': 4, 'rows': 5, 'val': 8.93}, {'lay': 8, 'cir': 4, 'rows': 6, 'val': 4.44}, {'lay': 8, 'cir': 4, 'rows': 7, 'val': 19.46}, {'lay': 8, 'cir': 4, 'rows': 8, 'val': 17.16}, {'lay': 8, 'cir': 4, 'rows': 9, 'val': -6.07}, {'lay': 9, 'cir': 1, 'rows': 0, 'val': -5.69}, {'lay': 9, 'cir': 1, 'rows': 1, 'val': 24.64}, {'lay': 9, 'cir': 1, 'rows': 2, 'val': 29.6}, {'lay': 9, 'cir': 1, 'rows': 3, 'val': 1.52}, {'lay': 9, 'cir': 2, 'rows': 0, 'val': 22.79}, {'lay': 9, 'cir': 2, 'rows': 1, 'val': 22.43}, {'lay': 9, 'cir': 2, 'rows': 2, 'val': 19.07}, {'lay': 9, 'cir': 2, 'rows': 3, 'val': 3.41}, {'lay': 9, 'cir': 3, 'rows': 0, 'val': -1.42}, {'lay': 9, 'cir': 3, 'rows': 1, 'val': 5.33}, {'lay': 9, 'cir': 3, 'rows': 2, 'val': 32.45}, {'lay': 9, 'cir': 3, 'rows': 3, 'val': 28.35}, {'lay': 9, 'cir': 3, 'rows': 4, 'val': 35.45}, {'lay': 9, 'cir': 3, 'rows': 5, 'val': 6.86}, {'lay': 9, 'cir': 3, 'rows': 6, 'val': 5.86}, {'lay': 9, 'cir': 3, 'rows': 7, 'val': 15.93}, {'lay': 9, 'cir': 4, 'rows': 0, 'val': 10.4}, {'lay': 9, 'cir': 4, 'rows': 1, 'val': 15.71}, {'lay': 9, 'cir': 4, 'rows': 2, 'val': 36.75}, {'lay': 9, 'cir': 4, 'rows': 3, 'val': 8.98}, {'lay': 9, 'cir': 4, 'rows': 4, 'val': 12.19}, {'lay': 9, 'cir': 4, 'rows': 5, 'val': 31.59}, {'lay': 9, 'cir': 4, 'rows': 6, 'val': 31.32}, {'lay': 9, 'cir': 4, 'rows': 7, 'val': 8.4}, {'lay': 9, 'cir': 4, 'rows': 8, 'val': 15.15}, {'lay': 9, 'cir': 4, 'rows': 9, 'val': 37.42}]
        var listLays = [{z: 1, tempMin:-1.96, tempMax: 11.11, tempAve: 23.1},{z: 2, tempMin: -1.43, tempMax: 11.61, tempAve: 23.1},{z: 3, tempMin: -5.14, tempMax: 34.9, tempAve: 23.1},{z: 4, tempMin: -6.62, tempMax:38.44, tempAve: 23.1},{z: 5, tempMin: -7.49, tempMax: 36.87, tempAve: 23.1},{z: 6, tempMin: 2.84, tempMax: 37.68, tempAve: 23.1},{z: 7, tempMin: -5.12, tempMax: 34.04, tempAve: 23.1},{z: 8, tempMin: -6.93, tempMax: 39.7, tempAve: 23.1},{z: 9, tempMin: 16.5, tempMax: 20.7, tempAve: 23.1},{z: 10, tempMin: 16.5, tempMax: 20.7, tempAve: 23.1}]
        
        distrList = [1];
        bottomList = [9];
        //定义数据显示容器
        layPoints = [];
 
        var cirNum = distrList.length; //圈数
        var layNum = bottomList[bottomList.length-1]; //层数
        var longAxis = 120; //第一内圈半长轴
        var shortAxis = 20; //第一内圈半短轴
        var spaceCir = 35; //两圈间距
        var intervalTop = 20; //距离顶端距离
        var spaceLay = 50; //层间距
        var maxSpace = cirNum * spaceCir; //内外圈最大差值
        var curVal = 1; //层数控制变量
        var edge_distance = 0;
        var initAngle = 0; //角度控制
        var clockwise = true; //时针控制
        var displayMode = 'all'; //内外显示
        var textSize = 15;//文本框大小
        var waterShift = 0; //液体偏移值
        var arr = [];//定义绑定事件数组
        var waterMax = 10;//液位灌容量高度
        var curWater = 8;//液位高度
 
        //色块颜色常量
        var color = null;
        var R = 0;
        var G = 0;
        var B = 0;
        
        var timer;
        var t=-2;
 
 
        //绘制主程序
        function draw(ctx) {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            center_x = canvas.width/3; //仓心X坐标
            center_y = shortAxis /3+ maxSpace + intervalTop; //仓心y坐标
 
            ctx.strokeStyle = "black";
            ctx.lineWidth = 1;
            autoAdjust(canvas);
            make_ellipse(ctx);
            gainData(ctx);  
            entityBlock(ctx); 
            make_top_ellipse(ctx);
            make_top_ellipse(ctx);
            title(ctx);
            showIndex(canvas,ctx);
            // waterShow(ctx);
            waterLine(ctx)
            scaleShow(ctx)
        }
 
         //绘制顶部椭圆
        function make_top_ellipse(ctx){
 
            //绘制顶部椭圆
            ctx.beginPath();
            ctx.strokeStyle = "rgba(0,0,0,0.5)";
            ctx.ellipse(center_x,center_y,longAxis + maxSpace,shortAxis + maxSpace,0,0, Math.PI * 2 );
            ctx.stroke();
            ctx.closePath();
        }
 
        //高度自调整
        function autoAdjust(ctx){
 
            //设置仓高
            caseHeight = spaceLay * layNum;
 
            //计算仓库占画布总高
            sum_long = caseHeight + 2 * (maxSpace  + shortAxis + intervalTop )
            //总高越界进行调整层间距
            if(eval(canvas.height)< eval(sum_long)){
 
                //仓管设置为最高
                caseHeight = canvas.height - 2 * (maxSpace  + shortAxis + intervalTop )
 
                //调整层间距
                spaceLay = caseHeight / layNum;
            }
 
        }
 
        //绘制仓体
        function make_ellipse(ctx){
 
            //绘制仓左右边界
            ctx.beginPath();
            ctx.moveTo(center_x + (longAxis + maxSpace),center_y );
            ctx.lineTo(center_x + (longAxis + maxSpace),center_y + caseHeight)
            ctx.moveTo(center_x - (longAxis + maxSpace),center_y );
            ctx.lineTo(center_x - (longAxis + maxSpace),center_y + caseHeight)
            ctx.stroke();
            ctx.closePath();
 
            //填充背部
            var grd=ctx.createRadialGradient(center_x,center_y + caseHeight - longAxis,shortAxis,center_x,center_y + caseHeight - 2 * longAxis,5 * longAxis);
            grd.addColorStop(0,"white");
            // grd.addColorStop(1,"#c0deea");
            grd.addColorStop(1,"rgba(115,200,231,1)")
            // grd.addColorStop(1,"#b1d6e6");
 
            ctx.beginPath();
            ctx.fillStyle = grd;
            ctx.moveTo(center_x + (longAxis + maxSpace),center_y + caseHeight);
            ctx.lineTo(center_x + (longAxis + maxSpace),center_y );
            ctx.ellipse(center_x,center_y,longAxis + maxSpace,shortAxis + maxSpace,0,0,Math.PI,anticlockwise=true);
            ctx.lineTo(center_x - (longAxis + maxSpace),center_y + caseHeight);
 
            ctx.fill();
            ctx.closePath();
 
            //绘制底部椭圆
            var grd=ctx.createRadialGradient(center_x,center_y + caseHeight - longAxis,shortAxis,center_x,center_y + caseHeight - 2 * longAxis,5 * longAxis);
            grd.addColorStop(0,"white");
            // grd.addColorStop(1,"#c0deea");
            grd.addColorStop(1,"rgba(115,200,231,1)")
 
            ctx.beginPath();
            ctx.fillStyle = grd;
            ctx.ellipse(center_x,center_y + caseHeight,longAxis + maxSpace,shortAxis + maxSpace,0,0,Math.PI * 2 );
            ctx.stroke();
            ctx.fill();
            ctx.closePath();
 
        }
 
        //过滤数据
        function gainData(){
 
            // for(i = 0;i < listPoints.length;i++){
            //     if(listPoints[i]['lay'] + 1 === curVal){
            //         layPoints.push(listPoints[i])
            //     }
            // }
 
            for (  i = 0; i < 9; i++) {
                if(listPoints[i]['rows']  === i){
                    layPoints.push(listPoints[i])
                }
            }
 
 
            console.log(layPoints);
        }
 
        //进行排线，绘制色块
        function entityBlock(ctx){
            
            z_peak = [1,cirNum];
            // color_list = ["ff69b3","fb0003","ffa401","ffff01","018001","3fe1d3","410098","9400d4"];
            color_list = ["e9e9e9","bbe5cc","f8dabc","f4c8d5","958a9b","9f9aa0"]
           
            turns = null;
 
            for(i = 0;i < bottomList.length;i++){
                if(curVal === bottomList[i]){
                    turns = cirNum-i;
                    break;
                }else{
                    turns = cirNum;
                }
            }
 
            showMax = turns;
            //循环生成每圈
            for(i = turns;i >= 1;i--){
                
                //内外显示逻辑判断
                if((displayMode === 'outside' )&& !(i === cirNum)){
                    ctx.beginPath();
                    ctx.setLineDash([8, 5]);
                    ctx.strokeStyle = 'rgba(0,0,0,1)';
                    ctx.ellipse(center_x,center_y + (curVal)*spaceLay,longAxis + i * spaceCir,shortAxis + i * spaceCir,0,0,Math.PI * 2 );
                    var grd=ctx.createRadialGradient(center_x,center_y + caseHeight - longAxis,shortAxis,center_x,center_y + caseHeight - 2 * longAxis,5 * longAxis);
                    grd.addColorStop(0,"white");
                    grd.addColorStop(1,"rgba(115,200,231,1)")
                    ctx.fillStyle = grd;
                    ctx.fill();
                    // ctx.stroke();
                    ctx.closePath();
                    ctx.setLineDash([]);
                    break;
 
                }else if ((displayMode === 'inner') && i === cirNum ){
                    showMax -= 1
                    continue;
                }
                
                
                splNum = distrList[i-1];
                if(splNum === 1){
 
                    point = null;
                    //循环找到对应点值
                    for(z = 0;z < layPoints.length; z++){
                        point = layPoints[z];
                        curVal = z+1;
 
                        point_x = center_x ;
                        point_y = center_y  + curVal * spaceLay ;
 
                        console.log("--------------point_y--------"+point_y);
                        textBox(ctx,point,point_x,point_y);
 
                    }
 
                    continue;
                }
 
 
                ctx.beginPath();
                // ctx.strokeStyle = "rgba(123,123,132,1)";
                // ctx.strokeStyle = "rgba(255,28,0,1)";
                ctx.setLineDash([8, 5]);
                ctx.strokeStyle = 'rgba(0,0,0,1)';
                ctx.ellipse(center_x,center_y + (curVal)*spaceLay,longAxis + i * spaceCir,shortAxis + i * spaceCir,0,0,Math.PI * 2 );
                
 
                if (i === 1){
                    var grd=ctx.createRadialGradient(center_x,center_y + caseHeight - longAxis,shortAxis,center_x,center_y + caseHeight - 2 * longAxis,5 * longAxis);
                    grd.addColorStop(0,"white");
                    grd.addColorStop(1,"rgba(115,200,231,1)")
 
                    ctx.fillStyle = grd;
                    ctx.fill();
 
                }else{
                    var grd=ctx.createRadialGradient(center_x,center_y + caseHeight - longAxis,shortAxis,center_x,center_y + caseHeight - 2 * longAxis,2 * longAxis);
                    grd.addColorStop(0,"white");
                    grd.addColorStop(1,"#" + color_list[i])
                    ctx.fillStyle = grd;
                    ctx.fill();
                    ctx.stroke();
                }
 
                
                ctx.closePath();
                ctx.setLineDash([]);
 
                
 
                
                //设置点值为null;
                point = null;
 
 
 
 
                //循环生成圈内点
                for(j = 0;j< splNum;j++){
 
                    //循环找到对应点值
                    for(z = 0;z < layPoints.length; z++){
                        if((layPoints[z]['cir'] === i)&&(layPoints[z]['rows'] === j)){
                            point = layPoints[z];
                            break;
                        }
                    }
 
                    //判断显示时针
                    if (clockwise){
                        angle = (2 * Math.PI / splNum) * j + initAngle;
                    }else{
                        angle = (2 * Math.PI / splNum) * (splNum - j) + initAngle;
                    }
 
                    point_x = center_x + (longAxis + i * spaceCir) * Math.cos(angle);
                    point_y = center_y + curVal * spaceLay + (shortAxis + i * spaceCir) *  Math.sin(angle);
                    textBox(ctx,point,point_x,point_y)
                }
            }
        }
        
        //绘制一个圆形文本框
        function textBox(ctx,point,x,y){
            val = point['val'];
 
            if ((t % 2 === 1)){
                if (val == listLays[curVal-1]['tempMax']){   //此点为最高温
                    ctx.fillStyle = "rgba(229,29,29,1)";
                }else if(val == listLays[curVal-1]['tempMin']){  //此点为最低温
                    ctx.fillStyle = "rgba(0,255,28,1)";
                }else{
                    ctx.fillStyle = getColor(val);      
                }
            }else{
                ctx.fillStyle = getColor(val);
            }
 
            ctx.beginPath();
            ctx.lineWidth = 1;
 
            ctx.arc(x,y,textSize,0,2*Math.PI);
            ctx.stroke();
            ctx.fill();
            ctx.fillStyle = "rgba(0,0,0,1)";
            ctx.textAlign = 'center'
            ctx.fillText(val,x,y+3);
            ctx.closePath();
 
            arr.push({'x':x - 0.6 * textSize,'y':y - 0.7 * textSize, 'width':2.1 * textSize,'height':2.2 * textSize,'type':'val','lay':point['lay'],'val':point['val']})
 
            // arr.push({'x':x + shift - 10,'y':y + out_window_top - 10,'width':40,'height':25,'type':'val','pointX':obj['x']+1,'pointY':obj['y']+1,'pointZ':obj['z']+1})
        }
 
        //根据温度获取RGB
        function getColor(val){
            //温度分段1 [50,+无穷)= [(255,0,0),(255,0,0)]
            //温度分段2 [20,50)= [(255,255,0),(255,0,0)]
            //温度分段3 [0,20)= [(100,255,30),(255,255,0)]
            //温度分段4 [-10,0)= [(34,233,42),(100,255,30)]
            if(val >= 50){
                color = "rgba(255,0,0,1)";
                return color;
            }else if(val >= 20){
                G = Math.round(255 - 255 * ((val-20)/30));
                color = "rgba(255," + G + ",0,1)";
                return color;
            }else if(val >= 0){
                R = Math.round(100 + (155 / 20) * val);
                B = Math.round(30 - 1.5 * val);
                color =  "rgba(" + R + ",255," + B + ",1)";
                return color;
            }else if(val >= -10){
                R = Math.round(100 - 6.6 * (val * (-1)));
                G = Math.round(255 - 2.2 * ( val * (-1)));
                B = Math.round(30 + 1.2 * ( val * (-1)));
                color = "rgba(" + R + ","+ G + "," + B + ",1)";
                return color;
            }else{
                color = "rgba(34,233,42,1)";
                return color;
            }
 
        }
 
        //睡眠
        function sleep(){
            t++;
            if(t >= 0 ){
                // initAngle += 2 * Math.PI / 360;
                waterShift += 1;
                flash();
            }
            timer = setTimeout("sleep()", 400);
        }
       
        //闪烁程序
        function flash(){
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            canvas.height = canvas.height;
            layPoints = [];
            arr = [];
            make_ellipse(ctx);
            gainData(ctx);  
            entityBlock(ctx); 
            make_top_ellipse(ctx);
            title(ctx)
            // waterShow(ctx);
            waterLine(ctx)
            scaleShow(ctx)
        }
 
        //水位展示
        function waterLine(ctx){
 
 
            start_x = center_x + (longAxis + maxSpace) + 20 + 3 * spaceLay;
            start_y = center_y + caseHeight * (1 - curWater/waterMax);
 
            ctx.beginPath();
            ctx.moveTo(start_x,start_y);
            for(i = 0;i<=  2 * spaceLay;i++){
                x = i
                y = Math.sin(i/20 + waterShift) * 5 ; 
                ctx.lineTo(start_x + x,start_y-y)
               
            }
            ctx.lineTo(start_x + 2 * spaceLay,center_y + caseHeight )
            ctx.lineTo(start_x ,center_y + caseHeight  )
            ctx.lineTo(start_x,start_y)
            ctx.fillStyle="rgba(183,233,221,1)"
            ctx.fill();
            // ctx.stroke(); 
            ctx.closePath(); 
 
 
            ctx.beginPath();
            ctx.moveTo(start_x,start_y);
            for(i = 0;i<=  2 * spaceLay;i++){
                x = i
                y = Math.sin(i/10 + 1 + waterShift) * 5 ; 
                ctx.lineTo(start_x + x,start_y-y)
               
            }
            ctx.lineTo(start_x + 2 * spaceLay,center_y + caseHeight )
            ctx.lineTo(start_x ,center_y + caseHeight)
            ctx.lineTo(start_x,start_y)
            ctx.fillStyle="rgba(71,205,198,1)"
            // ctx.fillStyle="rgba(16,158,151,1)"
            ctx.fill();
            // ctx.stroke(); 
            ctx.closePath(); 
 
            
        }
 
        //标题栏
        function title(ctx){
 
            for(i = 1; i <= layNum; i++){
 
 
                start_x = center_x + (longAxis + maxSpace) + 20;
                start_y = center_y + spaceLay * (i - 1);
                
 
                if(curVal===i){
                    var grad =ctx.createLinearGradient(start_x  , start_y  ,start_x + 2 * spaceLay, start_y);
                    grad.addColorStop(0, "#2f2fff");
                    // grad.addColorStop(0.3, "#5858ff");
                    grad.addColorStop(0.7, "#b3b3ff");
                    grad.addColorStop(1, "#ffffff"); 
                //设置为未选择时的渐变填充
                }else{
                    var grad =ctx.createLinearGradient(start_x  , start_y  ,start_x + 2 * spaceLay, start_y);
                    grad.addColorStop(0,"#a2baef");
                    grad.addColorStop(0.8,"#ffffff");
                }
 
                ctx.fillStyle = grad;
                ctx.lineWidth= 1;
                ctx.strokeStyle = 'rgba(214,223,232,1)';
                ctx.beginPath();
                ctx.moveTo(start_x ,start_y + 1); //原点
                ctx.lineTo(start_x + 1.8 * spaceLay ,start_y + 1); //右移
                ctx.lineTo(start_x + 1.8 * spaceLay ,start_y + spaceLay - 1); //下移
                ctx.lineTo(start_x ,start_y + spaceLay - 1); //左移
                ctx.lineTo(start_x ,start_y + 1); //上移
                ctx.stroke();
                ctx.fill();
                ctx.closePath();
                //设置为选择时的字体填充
                if(curVal===i){
                    ctx.fillStyle ='rgba(255,14,0,1)';
                //设置为未选择时的字体填充
                }else{
                    ctx.fillStyle ='rgba(30,30,30,1)';
                }
 
                val = "第" + i + "层";
                // val = "第" + 10 + "层";
                ctx.font="15px Arial";
                ctx.textAlign = 'center';
                ctx.fillText(val, start_x + 0.9 * spaceLay,start_y + 0.7 * spaceLay);
 
                arr.push({'x':start_x,'y':start_y + 1,'width':1.8 * spaceLay,'height':spaceLay,'num':i,'type':'titel'})
 
                
            }
           
        }
 
        //绑定触发的事件
        function draws(x,y,canvas,ctx){
        
            console.log(arr);
 
            //创建点击事件的画布（画布2）
            ctx.rect(0, 0, canvas.width, canvas.height);
            arr.forEach(function(v, i){
 
                ctx.beginPath();
                //绘制每一个对象的区域
                ctx.rect(v.x, v.y, v.width, v.height);
                ctx.closePath();
                //判断点是否在区域内
                if(ctx.isPointInPath(x, y)){
 
                    //点的类型为值
                    if (v.type === 'val'){
                        //类型为val，则弹出点信息
                        showData = "lay="+v.lay +"\nval" + v.val
                        alert(showData);
                        
                        console.log(v);
                        
                    }else{ //其他类型则切换显示色块
                    console.log(v);
 
                        curVal = v['num'];
                  
                        flash();
 
                    }
                }
            })
           
        }
 
        //绑定事件
        function showIndex(canvas,ctx) {
 
            //整个画布对象添加点击事件
            canvas.addEventListener('click',function location(e) {
                x = e.clientX;
                y = e.clientY;
                draws(x,y,canvas,ctx);
            }, false);
        }
 
        //水位框展示
        function waterShow(ctx){
 
            //绘制水位显示外壳
            start_x = center_x + (longAxis + maxSpace) + 20 + 3 * spaceLay;
            start_y = center_y;
            ctx.beginPath();
            ctx.strokeStyle = "rgba(0,0,0,1)"
            ctx.moveTo(start_x,start_y);
            ctx.lineTo(start_x + 2 * spaceLay,start_y)
            ctx.lineTo(start_x + 2 * spaceLay,start_y + caseHeight)
            ctx.lineTo(start_x ,start_y + caseHeight)
            ctx.lineTo(start_x,start_y)
            ctx.stroke();
            ctx.closePath();
 
        
 
        }
        
        function scaleShow(ctx){
 
            start_x = center_x + (longAxis + maxSpace) + 20 + 5 * spaceLay;
            start_y = center_y + caseHeight * (1 - curWater/waterMax);
 
            ctx.beginPath();
            
            ctx.moveTo(start_x,start_y);
            // ctx.lineTo(start_x + spaceLay, start_y)
            ctx.lineTo(start_x + 30 ,start_y + 10);
            ctx.lineTo(start_x + 20 ,start_y);
            ctx.lineTo(start_x + 30 ,start_y - 10);
            ctx.lineTo(start_x,start_y);
            ctx.fillStyle = "rgba(207,86,128,1)"
            ctx.fill();
            // ctx.stroke();
            ctx.closePath();
 
            ctx.beginPath();
            ctx.strokeStyle = "rgba(0,0,0,1)"
            ctx.moveTo(start_x + 20 ,start_y);
            ctx.lineTo(start_x + 50,start_y);
            ctx.stroke();
            ctx.lineTo(start_x + 40,start_y + 20)
            
            ctx.arcTo(start_x + 40, start_y + 30, start_x + 50, start_y + 30,10)
            ctx.arcTo(start_x + 60, start_y + 30, start_x + 60, start_y + 20,10)
            ctx.lineTo(start_x + 50,start_y)
            ctx.fillStyle = "rgba(71,205,198,1)";
 
            ctx.fill();
 
            ctx.font="12px Arial";
            ctx.textAlign = 'center';
            ctx.fillStyle = "rgba(231,30,43,1)";
 
            ctx.fillText(curWater, start_x + 50, start_y + 25);
            
            ctx.closePath();
           
        }
       
        // --------------- 按钮点击事件---------------------
        //上一行
        function last(){
            if(curVal === 1){
                curVal = Number(layNum);
            }else{
                curVal -= 1;
            }
            flash();
        }
 
        //下一行
        function next(){
            if(curVal === Number(layNum)){
                curVal = 1;
            }else{
                curVal += 1;
            }
            flash();
        }
 
        //时针切换
        function clockSwitch (){
            if (clockwise){
                clockwise = false;
            }else{
                clockwise = true;
            }
            flash();
        }
 
        //角度旋转
        function rotate(){
            curWater = document.getElementById("rotate").value
            flash();
        }
 
        //全显示
        function display_all(){
            displayMode = 'all';
            flash();
        }
 
        //外显示 
        function display_outside(){
            displayMode =  'outside';
            flash();
        }
 
        //内显示
        function display_inside(){
            displayMode = 'inner';
            flash();
        }
 
        draw();
        sleep();
 
 
 
 
</script>
</html>